import { gsap } from "@/lib/gsap";

export class SecurityAnimation {
  private securityTitle: HTMLHeadingElement | null;
  private securityDescription: HTMLParagraphElement | null;
  private securityItems: NodeListOf<HTMLLIElement>;

  constructor() {
    this.securityTitle = document.querySelector<HTMLHeadingElement>("#security-title");
    this.securityDescription = document.querySelector<HTMLParagraphElement>("#security-description");
    this.securityItems = document.querySelectorAll<HTMLLIElement>(".security-items");
    this.initAnimations();
  }

  private initAnimations(): void {
    if (!this.securityTitle || !this.securityDescription || !this.securityItems.length)
      return console.warn(
        "Some of the following elements don't exist: #security-title, #security-description, .security-items",
      );

    gsap.set([this.securityTitle, this.securityDescription, this.securityItems], {
      y: 50,
      autoAlpha: 0,
    });

    gsap
      .timeline({
        defaults: { ease: "expo", duration: 0.5, y: 0, autoAlpha: 1 },
        scrollTrigger: {
          trigger: "#security",
          start: "-50% top",
        },
      })
      .to([this.securityTitle, this.securityDescription], { stagger: 0.2 })
      .to(this.securityItems, { stagger: 0.1 }, "-=.5");
  }
}