// alert("hello")


const lt = gsap.timeline();

// Register GSAP and ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

function createSlideAnimation(className, direction) {
    const elements = gsap.utils.toArray(className);
    if (elements.length > 0) {
        let xValue = 0;
        let yValue = 0;

        switch (direction) {
            case 'slide-up':
                yValue = 40;
                break;
            case 'slide-down':
                yValue = -40;
                break;
            case 'slide-right':
                xValue = -100;
                break;
            case 'slide-left':
                xValue = 60;
                break;
            case 'fade-up':
                yValue = 60;
                break;
            default:
                break;
        }

        // GSAP animation with scroll trigger
        elements.forEach((element, index) => {
            gsap.from(element, {
                opacity: 0,
                x: xValue,
                y: yValue,
                ease: "power1.out",
                duration: 1.5,
                stagger: className === '.fade-up' ? 0.3 : 0,
                scrollTrigger: {
                    trigger: element,
                    scroller: "body",
                    start: "top 75%", // Adjust this as needed
                    once: true,
                    markers: false,
                },
            });
        });
    }
}

// Call the function for different slide animations
if ($(window).width() > 768) {
    createSlideAnimation('.slide-up', 'slide-up');     // Slide up
    createSlideAnimation('.slide-down', 'slide-down'); // Slide down
    createSlideAnimation('.slide-right', 'slide-right'); // Slide in from the left
    createSlideAnimation('.slide-left', 'slide-left');   // Slide in from the right


    lt.from("section.with-warego ul li", {
        scrollTrigger: {
            trigger: "section.with-warego",
            scroller: window,
            markers: false,
            start: "top 20%",
            end: "bottom 0",
            scrub: 2
        },
        x: "-100%",
        opacity: 0,
        stagger: 0.3,
        ease: "power1.out"
    });

    lt.from("section.with-warego ul li .text-animate", {
        scrollTrigger: {
            trigger: "section.with-warego",
            scroller: window,
            // markers: true,
            start: "top bottom",
            end: "bottom top",
            scrub: 2
        },
        y: 40,
        opacity: 0,
        stagger: 0.3,
        ease: "power1.out"
    });

    lt.from("section.tech-story .direction-arrow", {
        opacity: 0,
        bottom: 0,
        scrollTrigger: {
            trigger: "section.tech-story",
            scroller: window,
            // markers: true,
            start: "top bottom",
            // end: "bottom top",
            scrub: 2,
            height: 0,
            width: 0,
            right: 0,
            bottom: 0
        }
    });


    // -----------------Pricing Page Animation Pricing Table Start-----------------
    document.addEventListener("DOMContentLoaded", function () {
        gsap.registerPlugin(ScrollTrigger);
    
        const section = document.querySelector(".choose-plan");
        const promotions = document.querySelector(".pricing-promotions");
    
        if (!promotions) {
            return;
        }
    
        console.log(promotions.offsetHeight); // Log height for debugging
    
        // Create ScrollTrigger for the .choose-plan section
        ScrollTrigger.create({
            trigger: section,
            start: "top top", 
            endTrigger: promotions, 
            end: () => `+=${promotions.offsetHeight * 0.95}`, 
            onEnter: () => {
                section.style.position = "sticky"; 
                section.style.top = "0"; 
            },
            onLeave: () => {
                section.style.position = "relative"; 
            },
            onEnterBack: () => {
                section.style.position = "sticky"; 
                section.style.top = "0";
            },
            onLeaveBack: () => {
                section.style.position = "relative"; 
            },
            // markers: true, // Optional: Enable markers for debugging
            toggleActions: "play none none reverse",
        });
    });
    
    // -----------------Pricing Page Animation Pricing Table End-----------------

}
