import { gsap } from "@/lib/gsap";
export class ExperienceSequence {
  private readonly mm: gsap.MatchMedia;

  constructor() {
    this.mm = gsap.matchMedia();
    this.init();
  }
  private init(): void {
    this.mm.add("(min-width: 768px)", () => {
      const section = document.querySelector<HTMLElement>("#experience-section");
      const agilidadSlide = document.querySelector<HTMLDivElement>("#agilidad-slide");
      const experienciaSlide = document.querySelector<HTMLDivElement>("#experiencia-slide");
      const emisionesSlide = document.querySelector<HTMLDivElement>("#emisiones-slide");

      if (!section || !agilidadSlide || !experienciaSlide || !emisionesSlide) {
        return;
      }

      gsap.set([experienciaSlide, emisionesSlide], {
        y: "100%",
        willChange: "transform",
      });

      gsap
        .timeline({
          scrollTrigger: {
            trigger: section,
            start: "top top",
            end: "+=300%",
            scrub: 2,
            pin: true,
          },
        })

        .to(
          experienciaSlide,
          {
            y: 0,
          },
          0.25,
        )
        .to(
          agilidadSlide,
          {
            scale: 0.9,
            rotate: -0.5,
            y: "20%",
          },
          "<",
        )
        .to(emisionesSlide, {
          y: 0,
          delay: 0.25,
        })
        .to(
          experienciaSlide,
          {
            scale: 0.9,
            rotate: 0.5,
            y: "20%",
          },
          "<",
        );
    });
  }

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