document.addEventListener("DOMContentLoaded", () => {
    // Burger Menu
    const toggle = document.querySelector(".menu-toggle");
    const nav = document.querySelector(".header nav");
    const overlay = document.querySelector(".menu-overlay");
    const links = document.querySelectorAll(".header nav a");

    function openMenu() {
        nav.classList.add("active");
        toggle.classList.add("active");
        overlay.classList.add("active");
        document.body.style.overflow = "hidden";
    }

    function closeMenu() {
        nav.classList.remove("active");
        toggle.classList.remove("active");
        overlay.classList.remove("active");
        document.body.style.overflow = "";
    }

    toggle.addEventListener("click", () => {
        nav.classList.contains("active") ? closeMenu() : openMenu();
    });

    overlay.addEventListener("click", closeMenu);

    links.forEach(link => {
        link.addEventListener("click", closeMenu);
    });


    const wrapper = document.querySelector(".pillar-card-wrapper");
    if (!wrapper) return;

    const cards = wrapper.querySelectorAll(".pillar-card");

    // create track
    const track = document.createElement("div");
    track.className = "pillar-card-track";

    cards.forEach(card => track.appendChild(card));
    wrapper.appendChild(track);

    let index = 0;
    const total = cards.length;

    function getCardWidth() {
        const card = wrapper.querySelector(".pillar-card");
        const gap = 32;
        return card.offsetWidth + gap;
    }

    function updateSlider() {
        const moveX = getCardWidth() * index;
        track.style.transform = `translateX(-${moveX}px)`;

        // update ALL navigation groups
        document.querySelectorAll(".card-navigation").forEach(nav => {

            const numbers = nav.querySelectorAll(".navigation-number");
            const prevBtn = nav.querySelector(".previous-btn");
            const nextBtn = nav.querySelector(".next-btn");

            numbers.forEach(n => n.classList.remove("active"));
            if (numbers[index]) numbers[index].classList.add("active");

            if (prevBtn) prevBtn.style.opacity = index === 0 ? "0.4" : "1";
            if (nextBtn) nextBtn.style.opacity = index === total - 1 ? "0.4" : "1";
        });
    }

    // attach events to ALL nav groups
    document.querySelectorAll(".card-navigation").forEach(nav => {

        const prevBtn = nav.querySelector(".previous-btn");
        const nextBtn = nav.querySelector(".next-btn");
        const numbers = nav.querySelectorAll(".navigation-number");

        prevBtn?.addEventListener("click", () => {
            if (index > 0) {
                index--;
                updateSlider();
            }
        });

        nextBtn?.addEventListener("click", () => {
            if (index < total - 1) {
                index++;
                updateSlider();
            }
        });

        numbers.forEach((num, i) => {
            num.addEventListener("click", () => {
                index = i;
                updateSlider();
            });
        });
    });

    window.addEventListener("resize", updateSlider);

    updateSlider();

    // FadeIn Animation
    gsap.registerPlugin(ScrollTrigger);

    gsap.utils.toArray("section").forEach((sec) => {
        gsap.utils.toArray(sec.children).forEach((child) => {
            gsap.from(child, {
                opacity: 0,
                y: 40,
                duration: 1.2,
                ease: "power2.out",
                scrollTrigger: {
                    trigger: child,
                    start: "top 82%",
                    toggleActions: "play none none none",
                }
            });
        });
    });

    gsap.from("footer > *", {
        opacity: 0,
        y: 40,
        duration: 1.6,
        ease: "power2.out",
        stagger: 0.15,
        scrollTrigger: {
            trigger: "footer",
            start: "top 70%",
            toggleActions: "play none none none",
        }
    });
});