const navGpuBg = document.querySelector(".nav-gpu");
const navGpuLink = document.querySelector("#nav-link-gpu");
const navGpuIcon = document.querySelector("#nav-gpu-icon")

const navSuppBg = document.querySelector(".nav-support");
const navSuppLink = document.querySelector("#nav-link-supp");
const navSuppIcon = document.querySelector("#nav-icon-supp")

gsap.set(navGpuBg, {
    display: "none"
})

gsap.set(navSuppBg, {
    display: "none"
})

let navGpuAnim = gsap.timeline({ paused: true });

navGpuAnim
    .to(navGpuIcon, {
        rotation: 180,
    })
    .to(navGpuBg, {
        scaleY: 1,
        duration: .25,
    })
    .from("#nav-gpu-block-header", {
        opacity: 0,
        y: 15,
        duration: 0.25
    })
    .from("#nav-gpu-block", {
        opacity: 0,
        y: 25,
        duration: 0.5,
        stagger: .25
    }, "<")
    .from("#nav-gpu-line", {
        scaleY: 0,
        duration: 0.25
    }, "-=1")
    .from("#nav-gpu-links-header", {
        opacity: 0,
        y: 15,
        duration: .25
    }, "-=0.5")
    .from("#nav-gpu-link", {
        opacity: 0,
        y: 15,
        duration: 0.5,
        stagger: 0.25
    }, "<")



function GpuHover() {
    navGpuLink.addEventListener("mouseover", () => {
        if (navGpuBg.style.display === "none") {
            gsap.set(navGpuBg, {
                display: "block"
            })
            navGpuAnim.play();
        }

    })
    navGpuBg.addEventListener("mouseleave", () => {
        gsap.set(navGpuBg, {
            display: "none"
        })
        navGpuAnim.reverse();
    })
}

GpuHover();


let navSuppAnim = gsap.timeline({ paused: true });

navSuppAnim
    .to(navSuppIcon, {
        rotation: 180,
    })
    .to(navSuppBg, {
        scaleY: 1,
        duration: .25,
    })
    .from("#nav-supp-block-header", {
        opacity: 0,
        y: 15,
        duration: 0.25
    })
    .from("#nav-supp-block", {
        opacity: 0,
        y: 25,
        duration: 0.5,
        stagger: .25
    }, "<")
    .from("#nav-supp-line", {
        scaleY: 0,
        duration: 0.25
    }, "-=1")
    .from("#nav-supp-links-header", {
        opacity: 0,
        y: 15,
        duration: .25
    }, "-=0.5")
    .from("#nav-supp-link", {
        opacity: 0,
        y: 15,
        duration: 0.5,
        stagger: 0.25
    }, "<")



function supportHover() {
    navSuppLink.addEventListener("mouseover", () => {
        if (navSuppBg.style.display === "none") {
            gsap.set(navSuppBg, {
                display: "block"
            })
            navSuppAnim.play();
        }

        navSuppAnim.play();
    })
    navSuppBg.addEventListener("mouseleave", () => {
        gsap.set(navSuppBg, {
            display: "none"
        })
        navSuppAnim.reverse();
    })
}

supportHover();

function mobileNav() {
	let icon = document.querySelector(".main-nav-menu");
	let showIcon = document.querySelector(".menu-show");
	let hideIcon = document.querySelector(".menu-hide");
	let mobileNavContent = document.querySelector(".nav-mobile-wrapper");
	icon.addEventListener("click", () => {
		if (showIcon.style.opacity === "1") {
			gsap.set(mobileNavContent, {
				display: "block"
			})
			gsap.set(showIcon, {
				opacity: 0
			})
			gsap.set(hideIcon, {
				opacity: 1
			})
		} else {
			gsap.set(mobileNavContent, {
				display: "none"
			})
			gsap.set(hideIcon, {
				opacity: 0
			})
			gsap.set(showIcon, {
				opacity: 1
			})
		}
	})
}

mobileNav()