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

  gsap.registerPlugin(ScrollTrigger);

  function initHeroAnimation() {
    const firstElsHero = document.querySelectorAll("[data-first-el-appear-hero]");
    const opacityElsHero = document.querySelectorAll("[data-opacity-el-appear-hero]");
    const secondElsHero = document.querySelectorAll("[data-second-el-appear-hero]");

    if (!firstElsHero.length && !opacityElsHero.length && !secondElsHero.length) return;

    const tlHero = gsap.timeline();

    if (firstElsHero.length) {
      tlHero.to(firstElsHero, {
        opacity: 1,
        duration: 1,
        ease: "power2.out",
      });
    }

    if (opacityElsHero.length) {
      tlHero.to(opacityElsHero, {
        opacity: 1,
        duration: 0.5,
      }, 0);
    }

    if (secondElsHero.length) {
      tlHero.to(secondElsHero, {
        y: 0,
        opacity: 1,
        duration: 0.8,
        ease: "power2.out",
        stagger: 0.05,
      }, 0);
    }
  }

  function killOwnScrollTriggers() {
    ScrollTrigger.getAll().forEach((trigger) => {
      if (trigger.vars && trigger.vars.id === "radency-scroll-animation") {
        trigger.kill();
      }
    });
  }

  function initScrollAnimations() {
    document.querySelectorAll("[data-animation-wrap]").forEach((wrap) => {
      const firstEls = wrap.querySelectorAll("[data-first-el-appear]");
      const secondEls = wrap.querySelectorAll("[data-second-el-appear]");
      const numEls = wrap.querySelectorAll("[anime-numbers]");

      let startValue = wrap.getAttribute("data-animation-wrap");

      if (!startValue || !startValue.includes("%")) {
        startValue = "80%";
      }

      if (!firstEls.length && !secondEls.length && !numEls.length) return;

      const tl = gsap.timeline({
        scrollTrigger: {
          id: "radency-scroll-animation",
          trigger: wrap,
          start: `top ${startValue}`,
          once: true,
        },
      });

      if (firstEls.length) {
        tl.to(firstEls, {
          opacity: 1,
          y: 0,
          duration: 1,
          ease: "power2.out",
          onStart() {
            firstEls.forEach((el) => {
              el.classList.add("is-animated");
            });
          },
        });
      }

      if (secondEls.length) {
        tl.to(secondEls, {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: "power2.out",
          stagger: 0.1,
          onStart() {
            secondEls.forEach((el) => {
              el.classList.add("is-animated");
            });
          },
        }, 0);
      }

      if (numEls.length) {
        numEls.forEach((el) => {
          const rawText = el.textContent.trim();
          const match = rawText.match(/-?\d+(\.\d+)?/);

          if (!match) return;

          const endStr = match[0];
          const endValue = parseFloat(endStr);
          const decimals = (endStr.split(".")[1] || "").length;

          const prefix = rawText.slice(0, match.index);
          const suffix = rawText.slice(match.index + endStr.length);

          const startValue = endValue * 0.7;
          const obj = { value: startValue };

          tl.to(obj, {
            value: endValue,
            duration: 1.5,
            ease: "power1.out",
            onUpdate() {
              const current = decimals
                ? obj.value.toFixed(decimals)
                : Math.floor(obj.value);

              el.textContent = `${prefix}${current}${suffix}`;
            },
          }, ">-0.2");
        });
      }
    });

    gsap.utils.toArray("[data-samefirts-el-appear]").forEach((el) => {
      gsap.to(el, {
        scrollTrigger: {
          id: "radency-scroll-animation",
          trigger: el,
          start: "top 80%",
          once: true,
        },
        opacity: 1,
        y: 0,
        duration: 1,
        ease: "power2.out",
        onStart() {
          el.classList.add("is-animated");
        },
      });
    });

    ScrollTrigger.refresh();
  }

  function reinitAfterFilter() {
    killOwnScrollTriggers();

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

  initHeroAnimation();
  initScrollAnimations();

  window.addEventListener("load", () => {
    ScrollTrigger.refresh();
  });

  document.addEventListener("click", (e) => {
    const filter = e.target.closest(".switch-cs, .switch-blog");

    if (!filter) return;

    setTimeout(() => {
      reinitAfterFilter();
    }, 700);
  });
});