// use a script tag or an external JS file
 document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(Flip,ScrollTrigger,MotionPathPlugin,DrawSVGPlugin,SplitText)

    // Hero Circle Animation 
    const heroMaskLeft = document.querySelector(".circle-mask-left");
    const heroMaskRight = document.querySelector(".circle-mask-right");
    const heroMaskPath = document.querySelector(".circle-path");

    gsap.fromTo(heroMaskLeft, 
        {
            motionPath: {
                path: heroMaskPath,
                align: heroMaskPath,
                alignOrigin: [0.5, 0.5],
                start: 0,
                end: 0
            }
        }, 
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: heroMaskPath,
                align: heroMaskPath,
                alignOrigin: [0.5, 0.5],
                start: 0,
                end: 1
            },
            repeat: -1,  
            yoyo: true   
        }
    );
    
    gsap.fromTo(heroMaskRight, 
        {
            motionPath: {
                path: heroMaskPath,
                align: heroMaskPath,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1
            }
        }, 
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: heroMaskPath,
                align: heroMaskPath,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0
            },
            repeat: -1,  
            yoyo: true  
        }
    );

    // Footer Animation 
    const footerStrokeLeftIn = document.querySelector("#footer-svg-left-path-in");
    const footerStrokeLeftExt = document.querySelector("#footer-svg-left-path-ext");
    const footerStrokeRightIn = document.querySelector("#footer-svg-right-path-in");
    const footerStrokeRightExt = document.querySelector("#footer-svg-right-path-ext");

    const footerLeftInItem1 = document.querySelector("#footer-left-in-path-1");
    const footerLeftInItem2 = document.querySelector("#footer-left-in-path-2");
    const footerLeftExtItem1 = document.querySelector("#footer-left-ext-path-1");
    const footerLeftExtItem2 = document.querySelector("#footer-left-ext-path-2");

    const footerRightInItem1 = document.querySelector("#footer-right-in-path-1");
    const footerRightInItem2 = document.querySelector("#footer-right-in-path-2");
    const footerRightExtItem1 = document.querySelector("#footer-right-ext-path-1");
    const footerRightExtItem2 = document.querySelector("#footer-right-ext-path-2");

    gsap.fromTo(footerLeftInItem1,
        {
            motionPath: {
                path: footerStrokeLeftIn,
                align: footerStrokeLeftIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeLeftIn,
                align: footerStrokeLeftIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 0
        }
    );
    
    gsap.fromTo(footerLeftInItem2,
        {
            motionPath: {
                path: footerStrokeLeftIn,
                align: footerStrokeLeftIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeLeftIn,
                align: footerStrokeLeftIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 5 
        }
    );

    gsap.fromTo(footerLeftExtItem1,
        {
            motionPath: {
                path: footerStrokeLeftExt,
                align: footerStrokeLeftExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeLeftExt,
                align: footerStrokeLeftExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 2.5
        }
    );
    
    gsap.fromTo(footerLeftExtItem2,
        {
            motionPath: {
                path: footerStrokeLeftExt,
                align: footerStrokeLeftExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeLeftExt,
                align: footerStrokeLeftExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 7.5
        }
    );

    // right 
    gsap.fromTo(footerRightInItem1,
        {
            motionPath: {
                path: footerStrokeRightIn,
                align: footerStrokeRightIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeRightIn,
                align: footerStrokeRightIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 0
        }
    );
    
    gsap.fromTo(footerRightInItem2,
        {
            motionPath: {
                path: footerStrokeRightIn,
                align: footerStrokeRightIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeRightIn,
                align: footerStrokeRightIn,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 5 
        }
    );

    gsap.fromTo(footerRightExtItem1,
        {
            motionPath: {
                path: footerStrokeRightExt,
                align: footerStrokeRightExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeRightExt,
                align: footerStrokeRightExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 2.5
        }
    );
    
    gsap.fromTo(footerRightExtItem2,
        {
            motionPath: {
                path: footerStrokeRightExt,
                align: footerStrokeRightExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 1,
                autoRotate: true,
            },
        },
        {
            duration: 10,
            ease: "linear",
            motionPath: {
                path: footerStrokeRightExt,
                align: footerStrokeRightExt,
                alignOrigin: [0.5, 0.5],
                start: 1,
                end: 0,
                autoRotate: true,
            },
            repeat: -1,
            delay: 7.5
        }
    );

    // Logo Animation

    const logoBoxes = document.querySelectorAll(".logo-box");
    const logoBoxInners = document.querySelectorAll(".logo-box-inner");

    function getRandomEmptyBox(existingPositions) {
        const emptyBoxes = Array.from(logoBoxes).filter((box, index) => !existingPositions.includes(index));
        return emptyBoxes[Math.floor(Math.random() * emptyBoxes.length)];
    }

    function animateLogoBoxInners() {
        const timeline = gsap.timeline({
            repeat: -1,
            repeatDelay: 1.5,
            defaults: {
                duration: 1,
                ease: "power1.inOut",
            }
        });

        logoBoxInners.forEach((inner, index) => {
            timeline.to(inner, {
                filter: "blur(10px)",
                opacity: 0,
                onComplete: () => {
                    const state = Flip.getState(inner);
                    const randomBox = getRandomEmptyBox([...document.querySelectorAll(".logo-box-inner:not([style*='opacity: 0'])")].map(el => Array.from(logoBoxes).indexOf(el.parentElement)));

                    randomBox.appendChild(inner);

                    Flip.from(state, {
                        duration: 0,
                        ease: "power1.inOut",
                        onComplete: () => {
                            gsap.fromTo(inner, 
                                { filter: "blur(10px)", opacity: 0},
                                { filter: "blur(0px)", opacity: 1, duration: 1, ease: "power1.inOut" }
                            );
                        }
                    });
                }
            }, "+=1.5");
        });
    }

    animateLogoBoxInners();

    // Heading animation 

    let typeSplit = new  SplitText("[text-split]", {type: "words,lines", wordsClass: "text-word", linesClass: "text-line"});

    function createScrollTrigger(triggerElement, timeline) {
        ScrollTrigger.create({
          trigger: triggerElement,
          start: "top bottom",
          onLeaveBack: () => {
            timeline.progress(0);
            timeline.pause();
          }
        });
        ScrollTrigger.create({
          trigger: triggerElement,
          start: "top 75%",
          onEnter: () => timeline.play()
        });
    }
    $("[lines-up]").each(function (index) {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".text-word"), { 
            yPercent: 150, 
            rotate: 10,
            duration: 1.125, 
            ease: "power1.out", 
            stagger: { 
                each: 0.075 
            } 
        });
        createScrollTrigger($(this), tl);
    });

    // Animation radar 

    const radarPath = document.querySelectorAll(".radar-circle-svg path");
    const radarSvg = document.querySelectorAll(".radar-circle-svg");
    const radarCross = document.querySelectorAll(".radar-cross");
    const radarBg = document.querySelectorAll(".radar-rotate-wrapper");
    const radarImg1 = document.querySelectorAll(".radar-img.is-1");
    const radarImg2 = document.querySelectorAll(".radar-img.is-2");
    const radarImg3 = document.querySelectorAll(".radar-img.is-3");

    let radarTl = gsap.timeline({
        repeat: -1,
        repeatDelay: 0,
    });

    gsap.set(radarPath, {
        opacity: 0,
    });
    gsap.set([radarImg1, radarImg2, radarImg3], {
        opacity: 0.25,
    });
    gsap.set([radarCross, radarBg, radarImg1, radarImg2, radarImg3], {
        transformOrigin: "center center",
    });
    gsap.set(radarBg, {
        rotate: 180,
    });
    gsap.set(radarSvg, {
        rotate: 180,
    });

    radarTl.to(radarPath, {
        opacity: 1,
        stagger: {
            amount: 11.5,
        },
        duration: 0.1,
        ease: "linear",
    });
    radarTl.to(radarPath, {
        opacity: 0,
        stagger: {
            amount: 11.5,
        },
        duration: 0.1,
        ease: "linear",
    }, ">0.5");

    radarTl.to(radarBg, {
        rotate: 900,
        ease: "linear",
        duration: 24,
    }, 0);
    radarTl.to(radarCross, {
        rotate: 720,
        ease: "linear",
        duration: 24,
    }, 0);

    radarTl.to(radarImg3,{
        scale: 1.45,
        opacity: 1,
        duration: 0.75,
    }, "1.5");
    radarTl.to(radarImg3,{
        scale: 1,
        opacity: 0.25,
        duration: 0.75,
    }, "2.25");
    radarTl.to(radarImg3,{
        scale: 1.45,
        opacity: 1,
        duration: 0.75,
    }, "13.5");
    radarTl.to(radarImg3,{
        scale: 1,
        opacity: 0.25,
        duration: 0.75,
    }, "14.25");

    radarTl.to(radarImg1,{
        scale: 1.45,
        opacity: 1,
        duration: 0.75,
    }, "5.625");
    radarTl.to(radarImg1,{
        scale: 1,
        opacity: 0.25,
        duration: 0.75,
    }, "6.375");
    radarTl.to(radarImg1,{
        scale: 1.45,
        opacity: 1,
        duration: 0.75,
    }, "17.625");
    radarTl.to(radarImg1,{
        scale: 1,
        opacity: 0.25,
        duration: 0.75,
    }, "18.375");

    radarTl.to(radarImg2,{
        scale: 1.45,
        opacity: 1,
        duration: 0.75,
    }, "8.25");
    radarTl.to(radarImg2,{
        scale: 1,
        opacity: 0.25,
        duration: 0.75,
    }, "9");
    radarTl.to(radarImg2,{
        scale: 1.45,
        opacity: 1,
        duration: 0.75,
    }, "20.25");
    radarTl.to(radarImg2,{
        scale: 1,
        opacity: 0.25,
        duration: 0.75,
    }, "21");

    // CA Animation 
    const caMask = document.querySelector(".ca-graph-mask");
    gsap.set(caMask,{
        width: 10,
    });
    caTl = gsap.timeline({
        repeat: -1,
        yoyo: true,
    })
    caTl.to(caMask,{
        width: 238,
        duration: 5,
        ease: "power2.inOut",
    }, 0);
    
});