$(document).ready(function() {

    var wind = $(window);

    wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 100,
        mobile: false,
        live: true
    });
    wow.init();





    // ---------- to top -----------
    $('.to-top').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });


});


// ------------ swiper sliders -----------
$(document).ready(function() {

    // services slider
    var swiper = new Swiper('.services .services-slider', {
        slidesPerView: 5,
        spaceBetween: 20,
        centeredSlides: true,
        speed: 1500,
        pagination: {
            el: '.services .swiper-pagination',
            clickable: true,
        },
        navigation: false,
        mousewheel: false,
        keyboard: true,
        autoplay: {
            delay: 5000,
        },
        loop: true,
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 3,
            },
            1200: {
                slidesPerView: 3.2,
            }
        }
    });

    // partners slider
    var swiper = new Swiper('.partners .partners-slider', {
        slidesPerView: "auto",
        spaceBetween: 20,
        // direction: 'vertical',
        centeredSlides: true,
        pagination: false,
        navigation: false,
        mousewheel: false,
        keyboard: false,
        speed: 15000,
        allowTouchMove: false,
        a11y: false,
        autoplay: {
            delay: 1,
            disableOnInteraction: false
        },
        loop: true,
        preloadImages: false,
        lazy: true,
        watchSlidesProgress: true,
        breakpoints: {
            0: {
                slidesPerView: 2,
                // direction: 'horizontal',
            },
            480: {
                slidesPerView: 3,
                // direction: 'horizontal',
            },
            787: {
                slidesPerView: 3,
                // direction: 'horizontal',
            },
            991: {
                slidesPerView: "5",
                // direction: 'vertical',
            },
            1200: {
                slidesPerView: "5",
                // direction: 'vertical',
            }
        }
    });

    // blog slider
    var swiper = new Swiper('.blog .blog-slider', {
        slidesPerView: 5,
        spaceBetween: 20,
        centeredSlides: true,
        speed: 1500,
        pagination: {
            el: '.blog .swiper-pagination',
            clickable: true,
        },
        navigation: false,
        mousewheel: false,
        keyboard: true,
        autoplay: {
            delay: 5000,
        },
        loop: true,
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 2,
            },
            991: {
                slidesPerView: 2,
            },
            1200: {
                slidesPerView: 2,
            }
        }
    });

    // ------------ footer slider -----------
    var swiper = new Swiper('.footer .text-slider', {
        slidesPerView: "auto",
        spaceBetween: 30,
        centeredSlides: true,
        pagination: false,
        navigation: false,
        mousewheel: false,
        keyboard: true,
        speed: 25000,
	    allowTouchMove: false,
        autoplay: {
            delay: 1,
        },
        loop: true,
    });

    // services slider
    var swiper = new Swiper('.portfolio-st2 .portfolio-slider', {
        slidesPerView: 1,
        spaceBetween: 20,
        centeredSlides: true,
        // effect:"fade",
        speed: 2000,
        pagination: {
            el: '.portfolio-st2 .swiper-pagination',
            clickable: true,
        },
        navigation: false,
        mousewheel: false,
        keyboard: true,
        autoplay: {
            delay: 5000,
        },
        loop: true,
    });

});


// ------------ gsap scripts -----------

if ($(window).width() > 991) {
    
    $(function () {
        gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
        const smoother = ScrollSmoother.create({
            content: "#scrollsmoother-container",
            smooth: 1.1,
            normalizeScroll: true,
            ignoreMobileResize: true,
            effects: true,
            ease: "power2.out",
            preventDefault: true,
            renderGutter: false,
        });

        // pin sections 
        const sections = document.querySelectorAll('.pin-section');
        sections.forEach((section) => {
            ScrollTrigger.create({
                trigger: section,
                start: "bottom bottom",
                end: "bottom top",
                pin: true,
                pinSpacing: false,
                markers: false,
            });
        });
        
        // Vision section ScrollTrigger for vision-card
        if (document.querySelectorAll('.vision .vision-card')) {    
            ScrollTrigger.create({
                trigger: '.vision',
                start: 'top top',
                endTrigger: '.vision',
                end: 'bottom 100%',
                pin: '.vision .vision-card',
                pinSpacing: false,
                anticipatePin: 1,
                markers: false,
            });
        }
        
        // Vision section ScrollTrigger for section-title
        if (document.querySelector('.vision .section-title')) {    
            ScrollTrigger.create({
                trigger: '.vision',
                start: 'top top',
                endTrigger: '.vision',
                end: 'bottom 60%',
                pin: '.vision .section-title',
                pinSpacing: false,
                anticipatePin: 1,
                markers: false,
            });
        }
    
        // logo-triangle animation
        const logoTriangle = document.querySelector('.logo-triangle');
        const tl1 = gsap.timeline({
            scrollTrigger: {
                trigger: '.vision',
                start: 'top 100%',
                end: 'top 20%',
                scrub: 1,
            }
        });
        tl1.to(logoTriangle, {
            y: 100,
            x: -600,
            scale: 1.5,
            duration: 2,
        })
    
        const tl2 = gsap.timeline({
            scrollTrigger: {
                trigger: '.partners',
                start: 'top 100%',
                end: 'top 20%',
                scrub: 1,
            }
        });
        tl2.to(logoTriangle, {
            y: 100,
            x: 0,
            scale: 1.3,
            duration: 2,
        })

        const bodyBg = document.querySelector('body');
        const tl3 = gsap.timeline({
            scrollTrigger: {
                trigger: '.about',
                start: 'top 100%',
                end: 'top 20%',
                scrub: 1,
            }
        });
        tl3.to(bodyBg, {
            backgroundColor: '#fff',
            color: '#0f0f0f',
            duration: 2,
        })
        const tl4 = gsap.timeline({
            scrollTrigger: {
                trigger: '.portfolio-st2',
                start: 'top 100%',
                end: 'top 20%',
                scrub: 1,
            }
        });
        tl4.to(bodyBg, {
            backgroundColor: '#0f0f0f',
            // color: '#fff',
            duration: 2,
        })
        
        // Header animation when scrolling to about section
        const headerH1 = document.querySelector('header h1');
        const tl = gsap.timeline({
            scrollTrigger: {
                trigger: '.about',
                start: 'top 70%',
                end: 'top 20%',
                scrub: 1,
            }
        });
        tl.to(headerH1, {
            y: 565,
            x: -450,
            scale: 0.6,
            duration: 1
        })
        
        // Text splitting and animation effects
        // smoother.effects("img", { speed: "auto" });
        let headings = gsap.utils.toArray(".js-title").reverse();
        headings.forEach((heading, i) => {
            let headingIndex = i + 1;
            let mySplitText = new SplitText(heading, { type: "chars" });
            let chars = mySplitText.chars;
            chars.forEach((char, i) => {
                smoother.effects(char, { lag: (i + headingIndex) * 0.1, speed: 1 });
            });
        });
        
        let splitTextLines = gsap.utils.toArray(".js-splittext-lines");
        splitTextLines.forEach(splitTextLine => {
            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: splitTextLine,
                    start: 'top 90%',
                    duration: 2,
                    end: 'bottom 60%',
                    scrub: false,
                    markers: false,
                    toggleActions: 'play none none none'
                    // toggleActions: 'play none play reset'
                }
            });
            const itemSplitted = new SplitText(splitTextLine, { type: "lines" });
            gsap.set(splitTextLine, { perspective: 400 });
            itemSplitted.split({ type: "lines" })
            // tl.from(itemSplitted.lines, { y: 100, delay: 0.2, opacity: 0, stagger: 0.1, duration: 1, ease: 'inOut' });
            // tl.from(itemSplitted.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 1, ease: 'back.inOut' });
            tl.from(itemSplitted.lines, { duration: 1, delay: 0.5, opacity: 0, rotationX: -50, force3D: false, transformOrigin: "top center -50", stagger: 0.1 });
        });
    });

}


// circles Animation
document.addEventListener("DOMContentLoaded", function () {
    // Function to set up animations for a container and its circles
    function setupCircleAnimation(containerSelector, circleSelectors) {
        const container = document.querySelector(containerSelector);
        
        // If container doesn't exist, skip this animation
        if (!container) return;
        
        const circles = container.querySelectorAll(circleSelectors);
        const circlesData = [];
        
        circles.forEach(circle => {
            const size = circle.offsetWidth;
            const maxX = container.clientWidth - size;
            const maxY = container.clientHeight - size;
            
            circlesData.push({
                element: circle,
                x: Math.random() * maxX,
                y: Math.random() * maxY,
                vx: (Math.random() - 0.5) * 4,
                vy: (Math.random() - 0.5) * 4,
                radius: size / 2
            });
            
            circle.style.transform = `translate(${circlesData[circlesData.length - 1].x}px, ${circlesData[circlesData.length - 1].y}px)`;
        });
        
        function animateCircles() {
            circlesData.forEach(circle => {
                circle.x += circle.vx * 2;
                circle.y += circle.vy * 2;
                
                if (circle.x <= 0 || circle.x >= container.clientWidth - circle.radius * 3) {
                    circle.vx *= -1;
                }
                if (circle.y <= 0 || circle.y >= container.clientHeight - circle.radius * 3) {
                    circle.vy *= -1;
                }
                
                circle.element.style.transform = `translate(${circle.x}px, ${circle.y}px)`;
            });
            
            requestAnimationFrame(animateCircles);
        }
        
        // Only start animation if we have circles
        
        if (circlesData.length > 0) {
            animateCircles();
        }
    }
    
    // Set up animations for both containers
    // setupCircleAnimation(".tc-header-st3", ".circle1, .circle2, .circle3, .circle4");
    setupCircleAnimation("header", ".circle1, .circle2, .circle3, .circle4");
    setupCircleAnimation(".services", ".circle1, .circle2, .circle3, .circle4");
    setupCircleAnimation(".portfolio-st2", ".circle1, .circle2, .circle3, .circle4");
});



$(window).on("load", function() {
    $(".circles").css("opacity", "1");
});

// ------------ Preloader -----------
$( function() {
    const svg = document.getElementById("svg");
    const tl = gsap.timeline();
    const curve = "M0 502S175 272 500 272s500 230 500 230V0H0Z";
    const flat = "M0 2S175 1 500 1s500 1 500 1V0H0Z";

    tl.to(".loader-wrap-heading .load-text , .loader-wrap-heading .cont", {
        delay: 1.5,
        y: -100,
        opacity: 0,
    });
    tl.to(svg, {
        duration: 0.5,
        attr: { d: curve },
        ease: "power2.easeIn",
    }).to(svg, {
        duration: 0.5,
        attr: { d: flat },
        ease: "power2.easeOut",
    });
    tl.to(".loader-wrap", {
        y: -1500,
    });
    tl.to(".loader-wrap", {
        zIndex: -1,
        display: "none",
    });
    tl.from(
        "header",
        {
            y: 200,
        },
        "-=1.5"
    );
    tl.from(
        "header .container",
        {
            y: 40,
            opacity: 0,
            delay: 0.3,
        },
        "-=1.5"
    );
});

$(window).on("load", function () {

    // ------------ Preloader -----------
    var body = $('body');
    body.addClass('loaded');
    setTimeout(function () {
        body.removeClass('loaded');
    }, 1500);

});