---
import Image from "astro/components/Image.astro";
import PantallaTactilDesktop from "@/assets/yoyo-pantalla-tactil-desktop.jpg";
import PantallaTactilMobile from "@/assets/yoyo-pantalla-tactil-mobile.jpg";
import CarPlayAndroidAutoBluetooth from "@/assets/yoyo-carplay-androidauto-bluetooth.png";
import ControlInteligenteDesktop from "@/assets/yoyo-control-inteligente-desktop.jpg";
import ControlInteligenteMobile from "@/assets/yoyo-control-inteligente-mobile.jpg";
---

<section id="inteligencia">
  <div class="yoyo-container">
    <h2 class="yoyo-section-title yoyo-section-title--chapters">Inteligencia</h2>
  </div>
  <div class="yoyo-section md:py-0 md:my-12 overflow-hidden" id="intelligence-section">
    <div
      class="md:h-[100svh] relative md:before:content-[''] md:before:w-full md:before:h-1/2 md:before:bg-linear-to-t md:before:from-black md:before:to-transparent md:before:absolute md:before:bottom-0 will-change-transform"
      id="pantalla-tactil"
    >
      <div
        class="yoyo-container mb-6 md:mb-0 md:absolute md:left-1/2 md:-translate-x-1/2 md:bottom-11 md:flex md:text-white md:justify-between gap-3"
      >
        <div class="max-w-[36.875rem]">
          <h2 class="font-bold text-2xl mb-1">Pantalla táctil inteligente de 10,25 pulgadas</h2>
          <p class="text-lg lg:text-xl">
            Pantalla doble inteligente que separa la información de manejo y entretenimiento, manteniéndote informado y
            en control en todo momento.
          </p>
        </div>
        <div class="hidden md:block max-w-[17.625rem]">
          <span class="inline-block mb-7 text-xl font-semibold">Compatible con:</span>
          <Image src={CarPlayAndroidAutoBluetooth} alt="Logos CarPlay, androidauto, Bluetooth" />
        </div>
      </div>
      <Image src={PantallaTactilDesktop} alt="Pantalla táctil" class="hidden md:block size-full object-cover" />
      <div
        class="yoyo-container md:hidden relative before:content-[''] before:w-full before:h-1/2 before:bg-linear-to-t before:from-black before:to-transparent before:absolute rounded-2xl overflow-hidden before:bottom-0"
      >
        <Image src={PantallaTactilMobile} alt="Pantalla táctil" class="size-full object-cover max-h-[35.5rem]" />
        <div class="absolute bottom-9 text-white left-1/2 -translate-x-1/2 w-[90%] text-center">
          <span class="inline-block mb-7 font-semibold text-lg">Compatible con:</span>
          <Image
            src={CarPlayAndroidAutoBluetooth}
            alt="Logos CarPlay, androidauto, Bluetooth"
            class="w-[min(100%,17.625rem)] block mx-auto"
          />
        </div>
      </div>
    </div>
    <div
      class="md:h-[100svh] relative md:before:content-[''] md:before:w-full md:before:h-1/2 md:before:bg-linear-to-t md:before:from-black md:before:to-transparent md:before:absolute md:before:bottom-0 md:absolute md:w-full md:top-0 mt-6 md:mt-0 will-change-transform"
      id="control-inteligente"
    >
      <div
        class="yoyo-container mb-6 md:mb-0 md:absolute md:left-1/2 md:-translate-x-1/2 md:bottom-11 md:flex md:text-white md:justify-between gap-3"
      >
        <div class="max-w-[36.875rem]">
          <h2 class="font-bold text-2xl mb-1">Control inteligente por aplicación</h2>
          <p class="text-lg lg:text-xl">
            Nuestra app dedicada permite acceder remotamente a tu YOYO PRO.<br />Controlá funciones del auto
            (cerraduras, ventanas, aire acondicionado, localización) y consultá información detallada sobre la batería.
          </p>
        </div>
      </div>
      <Image src={ControlInteligenteDesktop} alt="Control Inteligente" class="hidden md:block size-full object-cover" />
      <div class="yoyo-container md:hidden rounded-2xl overflow-hidden">
        <Image
          src={ControlInteligenteMobile}
          alt="Control Inteligente"
          class="size-full object-cover max-h-[35.5rem]"
        />
      </div>
    </div>
  </div>
  <script>
    import gsap from "gsap";
    import ScrollTrigger from "gsap/ScrollTrigger";
    gsap.registerPlugin(ScrollTrigger);
    import { onAppFullyReady } from "@/lib/on-app-full-ready";

    class IntelligenceScrollAnimation {
      private mm: gsap.MatchMedia;

      constructor() {
        this.mm = gsap.matchMedia();
        this.init();
      }

      private init(): void {
        this.mm.add("(min-width: 768px)", () => {
          const intelligenceSection = document.querySelector<HTMLElement>("#intelligence-section");
          const pantallaTactil = document.querySelector<HTMLElement>("#pantalla-tactil");
          const controlInteligente = document.querySelector<HTMLElement>("#control-inteligente");

          if (!intelligenceSection || !pantallaTactil || !controlInteligente) {
            return;
          }

          gsap.set(controlInteligente, { y: "100%" });

          gsap
            .timeline({
              scrollTrigger: {
                trigger: intelligenceSection,
                start: "top top",
                pin: true,
                scrub: 2,
                end: "+=100%",
              },
            })
            .to(pantallaTactil, { scale: 0.9, rotate: -0.5, y: "20%", delay: 0.5 })
            .to(controlInteligente, { y: 0 }, "<");
        });
      }

      public destroy(): void {
        this.mm.revert();
      }
    }

    onAppFullyReady(() => new IntelligenceScrollAnimation());
  </script>
</section>