<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const fullpageInstance = new fullpage("#fullpage", {
      scrollingSpeed: 1000,
      autoScrolling: true,
      scrollHorizontally: true,
      navigation: false,
      onLeave: function (origin, destination, direction) {
        const words = ["Unknown", "Unseen", "Unfamiliar", "Mystery"];
        const leavingText = origin.item.querySelector("h1");
        const enteringText = destination.item.querySelector("h1");
        const line = destination.item.querySelector(".line");

        // Animate the leaving text to fade out and move up
        gsap.to(leavingText, {
          opacity: 0,
          y: -100,
          duration: 1.5,
          ease: "power2.out",
        });

        // Animate the entering text to fade in and move up
        gsap.fromTo(
          enteringText,
          { y: 100, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            color: destination.item.getAttribute("data-text-color"), // Set text color
            duration: 1.5,
            ease: "power2.out",
            delay: 0.5,
          }
        );

        // Get the destination colors
        const newBgColor = destination.item.getAttribute("data-bg");
        const newTextColor = destination.item.getAttribute("data-text-color");

        // Change background color of destination slide
        destination.item.style.backgroundColor = newBgColor;

        // Change text colors dynamically
        gsap.to(line, { color: newTextColor, duration: 0.5 });

        // Line growth/shrinkage animation
        const newLineWidth = (destination.index + 1) * 150;
        const currentLineWidth = (origin.index + 1) * 150;

        if (direction === "down") {
          gsap.to(line, {
            width: newLineWidth + "px",
            duration: 1.5,
            ease: "power2.out",
          });
        } else {
          gsap.to(line, {
            width: currentLineWidth + "px",
            duration: 1.5,
            ease: "power2.out",
          });
        }
      },
    });

    document.getElementById("link1").addEventListener("click", function () {
      scrollToSection(1);
    });
    document.getElementById("link2").addEventListener("click", function () {
      scrollToSection(2);
    });
    document.getElementById("link3").addEventListener("click", function () {
      scrollToSection(3);
    });
    document.getElementById("link4").addEventListener("click", function () {
      scrollToSection(4);
    });

    function scrollToSection(sectionIndex) {
      fullpageInstance.moveTo(sectionIndex);
    }
  });
</script>