window.Webflow = window.Webflow || [];
  window.Webflow.push(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    gsap.registerPlugin(ScrollTrigger);

    const sections = gsap.utils.toArray(".how_to_apply");
    if (!sections.length) return;

    sections.forEach((section) => {
      if (section.dataset.howInited === "1") return;
      section.dataset.howInited = "1";

      const cards = gsap.utils.toArray(section.querySelectorAll(".cards_how_list .card_how_item"));
      const chips = gsap.utils.toArray(section.querySelectorAll(".chips_bot .chip_how"));
      if (!cards.length || !chips.length) return;

      const chipByStep = new Map();
      chips.forEach((chip) => {
        const step = Number(chip.dataset.step);
        if (Number.isFinite(step)) chipByStep.set(step, chip);
      });
      if (!chipByStep.size) return;

      const stepTopTime = new Map();
      let currentActiveStep = null;
      let isAutoScrolling = false;

      const setInitial = () => {
        cards.forEach((card, i) => {
          gsap.set(card, {
            y: window.innerHeight * 1.1 + i * 60,
            rotation: gsap.utils.random(-6, 6),
            zIndex: cards.length - i
          });
        });
      };

      const setActiveStep = (step) => {
        if (step == null || step === currentActiveStep) return;
        currentActiveStep = step;
        chips.forEach((chip) => chip.classList.remove("is-active"));
        const activeChip = chipByStep.get(step);
        if (activeChip) activeChip.classList.add("is-active");
      };

      const getActiveStepByTime = (t) => {
        let activeStep = null;
        let best = -Infinity;
        stepTopTime.forEach((time, step) => {
          if (t >= time && time > best) {
            best = time;
            activeStep = step;
          }
        });
        if (activeStep == null) {
          const first = Number(chips[0]?.dataset.step);
          return Number.isFinite(first) ? first : null;
        }
        return activeStep;
      };

      const getTargetTimeForStep = (step, tl) => {
        const current = stepTopTime.get(step);
        if (current == null) return null;

        let next = tl.duration() || 1;
        stepTopTime.forEach((t) => {
          if (t > current && t < next) next = t;
        });

        const ratio = step === 1 ? 0.2 : 0.9;
        return current + (next - current) * ratio;
      };

      const getScrollForStep = (step, st, tl) => {
        const targetTime = getTargetTimeForStep(step, tl);
        if (targetTime == null) return null;
        const dur = tl.duration() || 1;
        const progress = targetTime / dur;
        return st.start + (st.end - st.start) * progress;
      };

      const smoothScrollTo = (st, targetY, duration = 0.45) => {
        const startY = st.scroll();
        const state = { p: 0 };

        isAutoScrolling = true;
        gsap.to(state, {
          p: 1,
          duration,
          ease: "power2.out",
          overwrite: true,
          onUpdate: () => {
            const y = startY + (targetY - startY) * state.p;
            st.scroll(y);
          },
          onComplete: () => {
            isAutoScrolling = false;
          }
        });
      };

      setInitial();

      let tl;
      tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "+=3800",
          scrub: 0.6,
          pin: true,
          anticipatePin: 1,
          invalidateOnRefresh: true,
          fastScrollEnd: true,
          onUpdate: () => {
            if (isAutoScrolling) return;
            setActiveStep(getActiveStepByTime(tl.time()));
          }
        }
      });

      tl.to(cards, {
        y: 0,
        stagger: 0.2,
        duration: 1.2,
        ease: "power2.out"
      });

      tl.to(
        cards,
        {
          y: (i) => -i * 10,
          rotation: (i) => (i - (cards.length - 1) / 2) * 2,
          stagger: 0.06,
          duration: 0.8,
          ease: "power1.out"
        },
        ">-0.15"
      );

      const firstStep = Number(cards[0]?.dataset.step);
      if (Number.isFinite(firstStep)) stepTopTime.set(firstStep, tl.duration());

      cards.forEach((card, i) => {
        const pos = i === 0 ? tl.duration() + 0.15 : tl.duration();

        const nextStep = Number(cards[i + 1]?.dataset.step);
        if (Number.isFinite(nextStep)) stepTopTime.set(nextStep, pos);

        tl.to(
          card,
          {
            y: -window.innerHeight * 1.35,
            rotation: i % 2 ? 8 : -8,
            duration: 0.55,
            ease: "power2.in"
          },
          pos
        );
      });

      const st = tl.scrollTrigger;

      section.addEventListener(
        "click",
        (e) => {
          const chip = e.target.closest(".chip_how");
          if (!chip || !section.contains(chip)) return;

          e.preventDefault();
          e.stopPropagation();

          const step = Number(chip.dataset.step);
          if (!Number.isFinite(step)) return;

          const targetY = getScrollForStep(step, st, tl);
          if (targetY == null) return;

          setActiveStep(step);
          smoothScrollTo(st, targetY, 0.45);
        },
        true
      );

      ScrollTrigger.addEventListener("refreshInit", setInitial);
      ScrollTrigger.refresh();
      setActiveStep(getActiveStepByTime(tl.time()));
    });
  });