import { gsap } from "@/lib/gsap";
export 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();
  }
}