(() => {
  if (!window.gsap || !window.ScrollTrigger) return;

  const processes = document.querySelectorAll(".process_way-wrap");
  if (!processes.length) return;

  gsap.registerPlugin(ScrollTrigger);

  processes.forEach((process) => {
    const points = [...process.querySelectorAll(".process_dot")]
      .map((point) => {
        const attribute = [...point.attributes].find((attr) =>
          /^data-process-point-\d+$/.test(attr.name),
        );

        return attribute
          ? { point, number: attribute.name.match(/\d+$/)[0] }
          : null;
      })
      .filter(Boolean);

    points.forEach(({ point, number }) => {
      const card = process.querySelector(`[data-process-card-${number}]`);
      const bar = process.querySelector(`[data-process-bar-${number}]`);
      const line = bar?.closest(".process_line");

      if (!card || !bar || !line) return;

      gsap.set(bar, { yPercent: -100 });

      ScrollTrigger.create({
        trigger: point,
        start: "top 50%",
        onEnter: () => {
          point.classList.add("is-active");
          card.classList.add("is-active");
        },
        onLeaveBack: () => {
          point.classList.remove("is-active");
          card.classList.remove("is-active");
        },
      });

      gsap.to(bar, {
        yPercent: 0,
        ease: "none",
        scrollTrigger: {
          trigger: point,
          start: "top 50%",
          endTrigger: line,
          end: "bottom 50%",
          scrub: 0.5,
          invalidateOnRefresh: true,
        },
      });
    });
  });
})();