document.addEventListener('DOMContentLoaded', function () {
    // Burger Menu
    const burger = document.querySelector('.burger');
    const header = document.querySelector('.header');
    const overlay = document.querySelector('.menu-overlay');

    burger.addEventListener('click', () => {
        header.classList.toggle('active');
    });

    overlay.addEventListener('click', () => {
        header.classList.remove('active');
    });


    // Before After Slider
    const slider = document.querySelector('#before-after-slider');

    if (slider) {
        new Splide(slider, {
            perPage: 3,
            pagination: false,
            arrows: true,
            gap: '20px',
            autoplay: true,
            interval: 3000,
            breakpoints: {
                1025: { perPage: 2 },
                600: { perPage: 1 }
            }
        }).mount();
    }

    // Testimonial Slider
    const testimonial = document.querySelector('#testimonial');

    if (testimonial) {
        new Splide(testimonial, {
            type: 'loop',
            perPage: 3,
            pagination: false,
            arrows: true,
            autoplay: true,
            interval: 1000,
            gap: '20px',
            breakpoints: {
                1025: { perPage: 2 },
                600: { perPage: 1 }
            }
        }).mount();
    }


    // Image Slider
    const sliderEl = document.getElementById('image-slider');
    if (sliderEl) {
        const splide = new Splide('#image-slider', {
            type: 'loop',
            perPage: 1,
            focus: 'center',
            gap: '20px',
            padding: window.innerWidth <= 767 ? { left: '20px', right: '20px' } : { left: '20%', right: '20%' },
            arrows: true,
            pagination: false,
            speed: 600,
        });

        const current = document.getElementById('current');
        const total = document.getElementById('total');

        splide.on('mounted move', function () {
            current.textContent = splide.index + 1;
        });

        splide.on('mounted', function () {
            total.textContent = splide.length;
        });

        splide.mount();
    }


    // Faq Section
    const faqItems = document.querySelectorAll('.faq-item');

    if (faqItems) {
        faqItems.forEach((item, index) => {
            const question = item.querySelector('.faq-question');
            const answer = item.querySelector('.faq-answer');

            question.addEventListener('click', () => {
                const isActive = item.classList.contains('active');

                faqItems.forEach(i => {
                    i.classList.remove('active', 'previous');
                    i.querySelector('.faq-answer').style.maxHeight = null;
                });

                if (!isActive) {
                    item.classList.add('active');
                    answer.style.maxHeight = answer.scrollHeight + "px";

                    if (index > 0) {
                        faqItems[index - 1].classList.add('previous');
                    }
                }
            });
        });
    }


    // 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",
        }
    });
});
