---
import Image from "astro/components/Image.astro";
import YoyoPresentationImage from "@/assets/yoyo-presentation-img.jpg";
---

<section class="yoyo-section pt-10 lg:pt-24 relative" id="presentation-section">
  <div class="yoyo-container flex flex-col lg:gap-[10%] lg:flex-row lg:h-auto">
    <div
      class="aspect-[328/325] sm:aspect-video lg:aspect-[161/160] mb-8 lg:mb-0 lg:w-[48%] relative z-2"
      id="presentation-img-small"
    >
      <div class="size-full overflow-hidden rounded-3xl">
        <Image src={YoyoPresentationImage} alt="" class="size-full object-cover scale-125 lg:scale-110" />
      </div>
    </div>
    <div class="lg:w-[42%] lg:max-w-[32.125rem] shrink-0 flex flex-col justify-center gap-6 lg:gap-10">
      <h2 class="text-[min(8vw,1.625rem)] md:text-[min(3vw,3rem)] yoyo-section-title text-yoyo-light-blue">
        Llegó el YOYO Pro
      </h2>
      <div class="text-[0.875rem] md:text-[1.125rem] space-y-4">
        <p>YOYO Pro es un auto 100% eléctrico, súper equipado y listo para moverse por la ciudad.</p>
        <p>
          Probá su volante multifunción pensado para tu comodidad, o disfrutá de la pantalla táctil de 10" con Apple
          CarPlay y Android Auto.
        </p>
        <p>
          Con la dirección asistida eléctrica, cada maniobra se siente liviana y fluida. Pedí más info o agendá tu test
          drive y conocé todo lo nuevo de YOYO Pro.
        </p>
      </div>
      <button class="yoyo-btn sm:w-fit" id="more-info">Más información</button>
    </div>
  </div>
  <script>
    class PresentationFlip {
      private readonly moreInfo: HTMLButtonElement;

      constructor() {
        const moreInfo = document.querySelector("#more-info") as HTMLButtonElement;

        this.moreInfo = moreInfo;

        this.init();
      }

      private init(): void {
        this.scrollTo();
      }

      private scrollTo(): void {
        if (this.moreInfo) {
          this.moreInfo.addEventListener("click", () => {
            !window.animationConfortableComplete && (window.animationConfortableComplete = true);
            window.lenis?.scrollTo("#contactanos", { offset: -50, duration: 2 });
          });
        } else console.warn("The button with id='more-info doesn't exist'");
      }
    }

    new PresentationFlip();
  </script>
</section>