---
import Chasis from "@/assets/yoyo-chasis-alta-resistencia.jpg";
import Suspension from "@/assets/yoyo-suspensión-independiente.jpg";
import Motor from "@/assets/yoyo-motor-trasero.jpg";
import Image from "astro/components/Image.astro";
import { cn } from "@/lib/utils";
const features = [
  { imgSrc: Chasis, title: "Chasis monocasco de alta resistencia", dataTitle: "chasis" },
  { imgSrc: Suspension, title: "Suspensión independiente MacPherson", dataTitle: "suspension" },
  { imgSrc: Motor, title: "Motor trasero con tracción trasera", dataTitle: "motor" },
];
---

<section class="yoyo-section" id="configuracion-de-seguridad">
  <div class="yoyo-container">
    <h2 class="yoyo-section-title yoyo-section-title--chapters md:mb-20">Configuración de Seguridad</h2>
    <div class="relative aspect-[328/218] md:aspect-[1264/533] overflow-hidden">
      {
        features.map(({ title, imgSrc, dataTitle }, i) => (
          <Image
            src={imgSrc}
            alt={title}
            class={cn(
              "size-full object-cover transition-opacity duration-500 opacity-0",
              { "absolute inset-0": i },
              dataTitle,
            )}
          />
        ))
      }
    </div>
    <nav class="mt-6">
      <ul class="flex flex-col md:flex-row md:gap-6 w-full">
        {
          features.map(({ title, dataTitle }) => (
            <li
              class="border-t-2 border-[#CCC] py-2 font-noto-sans [--size:4vw] md:[--size:1.5vw] text-[min(var(--size),1rem)] grow text-center font-bold cursor-pointer text-[#505050] relative before:content-[''] before:absolute before:-top-0.5 before:w-full before:left-0 before:h-0.5 before:bg-yoyo-light-blue before:scale-x-0 before:transition-transform before:duration-500 before:ease-in-out before:block"
              data-title={dataTitle}
            >
              {title}
            </li>
          ))
        }
      </ul>
    </nav>
  </div>
  <style>
    .yoyo-section.chasis img.chasis,
    .yoyo-section.suspension img.suspension,
    .yoyo-section.motor img.motor {
      opacity: 1;
      transition-delay: 0.25s;
    }
    .yoyo-section.chasis [data-title="chasis"],
    .yoyo-section.chasis [data-title="chasis"]::before,
    .yoyo-section.suspension [data-title="suspension"],
    .yoyo-section.suspension [data-title="suspension"]::before,
    .yoyo-section.motor [data-title="motor"],
    .yoyo-section.motor [data-title="motor"]::before {
      --tw-scale-x: 1;
      color: var(--color-yoyo-light-blue);
    }
  </style>
  <script>
    import { onVisibleOnce } from "@/lib/on-visible-once";
    onVisibleOnce(document.querySelector("#configuracion-de-seguridad"), async () => {
      const { YoyoSectionFeatures } = await import("@/components/classes/YoyoSectionFeatures");
      new YoyoSectionFeatures();
    });
  </script>
</section>