document.addEventListener("DOMContentLoaded", () => {
  if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
    return;
  }

  gsap.registerPlugin(ScrollTrigger);

  const sections = gsap.utils.toArray(".courses_cms");

  const getInitialState = (card, index, totalCards) => {
    const rect = card.getBoundingClientRect();
    const viewportCenter = window.innerHeight / 2;
    const cardCenter = rect.top + rect.height / 2;
    
    if (cardCenter < viewportCenter - 100) {
      return {
        scale: 0.9,
        filter: "brightness(0.8) blur(4px)"
      };
    }
    else if (cardCenter >= viewportCenter - 100 && cardCenter <= viewportCenter + 100) {
      const progress = Math.max(0, Math.min(1, (viewportCenter - cardCenter + 100) / 200));
      return {
        scale: 0.9 + 0.1 * progress,
        filter: `brightness(${0.8 + 0.2 * progress}) blur(${4 - 4 * progress}px)`
      };
    }
    else {
      return index === 0 
        ? { scale: 1, filter: "brightness(1) blur(0px)" }
        : { scale: 0.9, filter: "brightness(0.8) blur(4px)" };
    }
  };

  sections.forEach((section) => {
    const cards = gsap.utils
      .toArray(section.querySelectorAll(".course_card"))
      .filter((card) => !card.closest(".list_courses"));

    if (!cards.length) return;

    if (cards.length === 1) {
      const initialState = getInitialState(cards[0], 0, 1);
      gsap.set(cards[0], initialState);
      return;
    }

    cards.forEach((card, index) => {
      const initialState = getInitialState(card, index, cards.length);
      gsap.set(card, initialState);
    });

    cards.forEach((card, i) => {
      const next = cards[i + 1];
      const isFirstPair = i === 0;

      if (next) {
        ScrollTrigger.create({
          trigger: isFirstPair ? card : next,
          start: isFirstPair ? "bottom bottom" : "top bottom",
          end: isFirstPair ? "bottom center" : "top center",
          scrub: 1.2,
          invalidateOnRefresh: true,
          onUpdate: (self) => {
            const p = self.progress;

            gsap.to(next, {
              scale: 0.9 + 0.1 * p,
              filter: `brightness(${0.8 + 0.2 * p}) blur(${4 - 4 * p}px)`,
              duration: 0.3,
              ease: "power2.out",
              overwrite: true
            });

            gsap.to(card, {
              scale: 1 - 0.1 * p,
              filter: `brightness(${1 - 0.2 * p}) blur(${4 * p}px)`,
              duration: 0.3,
              ease: "power2.out",
              overwrite: true
            });
          }
        });
      }

      ScrollTrigger.create({
        trigger: card,
        start: isFirstPair ? "bottom bottom" : "top center",
        end: isFirstPair ? "bottom center-=5%" : "top center-=5%",
        scrub: 1,
        invalidateOnRefresh: true,
        onEnter: () => {
          gsap.to(card, {
            scale: 1,
            filter: "brightness(1) blur(0px)",
            duration: 0.4,
            ease: "power2.out"
          });
        },
        onEnterBack: () => {
          gsap.to(card, {
            scale: 1,
            filter: "brightness(1) blur(0px)",
            duration: 0.4,
            ease: "power2.out"
          });
        }
      });
    });
  });

  ScrollTrigger.refresh();
  
  setTimeout(() => {
    ScrollTrigger.refresh();
  }, 100);
});