const lenis = new Lenis({
  duration: 2.5,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: "vertical", // vertical, horizontal
  gestureDirection: "vertical", // vertical, horizontal, both
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false,
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

gsap.registerPlugin(ScrollTrigger);

// UPDATE MOUSE CURSOR STYLE AND MOVEMENT
if (window.matchMedia("(min-width: 680px)").matches) {
  const cursorOuter = document.querySelector(".cursor--large"),
    cursorInner = document.querySelector(".cursor--small");

  if (cursorOuter && cursorInner) {
    function updateCursor(e) {
      setTimeout(function () {
        gsap.set([cursorInner], {
          x: e.clientX,
          y: e.clientY,
        });
      }, 50);

      setTimeout(function () {
        gsap.set([cursorOuter], {
          x: e.clientX,
          y: e.clientY,
        });
      }, 90);
    }

    window.addEventListener("mousemove", (e) => updateCursor(e));
  }
}

const counterElements = document.querySelectorAll(".counter");

if (counterElements.length > 0) {
  counterElements.forEach((counter) => {
    // Remove o "k+" do texto do elemento e obtém o valor final da contagem
    const initialText = counter.textContent.trim();
    const match = initialText.match(/(\d+)([a-zA-Z+]+)/);

    // Verifica se a correspondência é válida
    if (match) {
      const finalValue = parseInt(match[1], 10);
      const suffix = match[2];

      //console.log(`Final value: ${finalValue}, Suffix: ${suffix}`);

      // Define o valor inicial da contagem
      const startValue = { value: 0 };
      const duration = Math.max(0.5, finalValue / 400);

      // Cria a animação de contagem usando GSAP
      gsap.to(startValue, {
        value: finalValue,
        duration: duration, // Define a duração com base no valor final
        ease: "none", // Easing linear
        onUpdate: function () {
          // Atualiza o texto do elemento com o valor atual da contagem
          counter.textContent = Math.floor(startValue.value) + suffix;
        },
        scrollTrigger: {
          trigger: counter,
          start: "top center", // Inicia a animação quando o topo do elemento atinge o centro da viewport
          toggleActions: "play none none none", // Controla o comportamento da animação no scroll
        },
      });
    }
  });
}

const marquees = [...document.querySelectorAll(".marquee-text")];

if (marquees.length > 0) {
  marquees.forEach((marquee) => {
    marquee.innerHTML = marquee.innerHTML + " ".repeat(5);
    marquee.i = 0;
    marquee.step = 3;
    marquee.width = marquee.clientWidth + 1;
    marquee.style.position = "";
    marquee.innerHTML = `${marquee.innerHTML} `.repeat(10);
  });

  requestAnimationFrame(move);

  function move() {
    marquees.forEach((marquee) => {
      marquee.style.marginLeft = `-${marquee.i}px`;
      marquee.i = marquee.i < marquee.width ? marquee.i + marquee.step : 1;
    });

    requestAnimationFrame(move);
  }
}

if (window.matchMedia("(min-width: 768px)").matches) {
  const fadeUps = gsap.utils.toArray(".fade-up");
  const fadeLefts = gsap.utils.toArray(".fade-left");
  const fadeRights = gsap.utils.toArray(".fade-right");
  const linesLeft = gsap.utils.toArray(".line-left");
  const linesRight = gsap.utils.toArray(".line-right");
  const linesMiddle = gsap.utils.toArray(".line-middle");

  if (linesLeft.length > 0 || linesRight.length > 0 || linesMiddle.length > 0) {
    gsap.set(linesLeft, { opacity: 0, width: "0%" });
    gsap.set(linesRight, {
      opacity: 0,
      width: "0%",
      transformOrigin: "100% 50%",
    });
    gsap.set(linesMiddle, { opacity: 0, scaleX: 0 });

    linesLeft.forEach((lineLeft) => {
      gsap.to(lineLeft, {
        duration: 2.5,
        width: "100%",
        opacity: 1,
        ease: "power2.inOut",
        scrollTrigger: {
          trigger: lineLeft,
          start: "top 80%",
          end: "top 50%",
          toggleActions: "play none none none",
        },
      });
    });
    linesRight.forEach((lineRight) => {
      gsap.to(lineRight, {
        duration: 2.5,
        width: "100%",
        opacity: 1,
        ease: "power2.inOut",
        scrollTrigger: {
          trigger: lineRight,
          start: "top 80%",
          end: "top 50%",
          toggleActions: "play none none none",
        },
      });
    });
    linesMiddle.forEach((lineMiddle) => {
      gsap.to(lineMiddle, {
        duration: 2,
        scaleX: 1,
        opacity: 1,
        ease: "power2.inOut",
        scrollTrigger: {
          trigger: lineMiddle,
          start: "top 80%",
          end: "top 50%",
          toggleActions: "play none none none",
        },
      });
    });
  }

  if (fadeUps.length > 0 || fadeLefts.length > 0 || fadeRights.length > 0) {
    gsap.set(fadeUps, { opacity: 0, y: 50 });
    gsap.set(fadeLefts, { opacity: 0, x: "-100vw" });
    gsap.set(fadeRights, { opacity: 0, x: "100vw" });

    fadeUps.forEach((fadeUp) => {
      gsap.to(fadeUp, {
        duration: 1.5,
        opacity: 1,
        y: 0,
        ease: "power2.out",
        scrollTrigger: {
          trigger: fadeUp,
          start: "top 80%",
          end: "top 50%",
          toggleActions: "play none none none",
        },
      });
    });

    fadeLefts.forEach((fadeLeft) => {
      gsap.to(fadeLeft, {
        duration: 2.5,
        opacity: 1,
        x: 0,
        ease: "power2.out",
        scrollTrigger: {
          trigger: fadeLeft,
          start: "top 80%",
          end: "top 50%",
          toggleActions: "play none none none",
        },
      });
    });

    fadeRights.forEach((fadeRight) => {
      gsap.to(fadeRight, {
        duration: 2.5,
        opacity: 1,
        x: 0,
        ease: "power2.out",
        scrollTrigger: {
          trigger: fadeRight,
          start: "top 80%",
          end: "top 50%",
          toggleActions: "play none none none",
        },
      });
    });
  }
}