---
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 { onAppFullyReady } from "@/lib/on-app-full-ready";

    class YoyoSectionFeatures {
      private section: HTMLElement | null = null;
      private items: NodeListOf<HTMLLIElement> = [] as any;
      private currentClass: string | null = null;

      constructor() {
        this.section = document.querySelector<HTMLElement>("#configuracion-de-seguridad");
        if (!this.section) return;

        this.items = document.querySelectorAll<HTMLLIElement>("#configuracion-de-seguridad li[data-title]");
        this.init();
      }

      private init() {
        this.items.forEach((item) => {
          const dataTitle = item.dataset.title;
          if (!dataTitle) return;

          item.addEventListener("mouseenter", () => this.activate(dataTitle));
        });

        const first = this.items[0]?.dataset.title;
        if (first) this.activate(first);
      }

      private activate(cls: string) {
        if (!this.section) return;
        if (this.currentClass === cls) return;

        if (this.currentClass) this.section.classList.remove(this.currentClass);

        this.section.classList.add(cls);
        this.currentClass = cls;
      }
    }
    onAppFullyReady(() => new YoyoSectionFeatures());
  </script>
</section>