const GlobalHeader = ({ loading }) => {
    const [menuOpen, setMenuOpen] = useState(false);
    const [hoveredLink, setHoveredLink] = useState(null);

    const menuLinks = [
        { name: 'Home', link: 'https://bizco.in', img: ASSETS.case1 },
        { name: 'Portfolio', link: 'https://bizco.in/portfolio/', img: ASSETS.grid },
        { name: 'Services', link: 'https://bizco.in/services/', img: ASSETS.case2 },
        { name: 'Get in touch', link: 'https://bizco.in/contact-us/', img: ASSETS.flow2 }
    ];

    useEffect(() => {
        if (menuOpen) document.body.style.overflow = 'hidden';
        else if (!loading) document.body.style.overflow = 'auto';
    }, [menuOpen, loading]);

    return (
        <>
            <motion.header
                initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: loading ? 0 : 0.8 }}
                className="fixed top-0 w-full p-6 md:p-12 flex justify-between items-center z-[100] pointer-events-none mix-blend-difference text-white"
            >
                <div className="pointer-events-auto cursor-pointer" data-cursor="hover">
                    <MagneticElement strength={0.2}>
                        <div className="font-serif text-2xl font-bold tracking-tighter">Bizco<span className="text-[#3A5A80]">.</span></div>
                    </MagneticElement>
                </div>
                
                <div className="pointer-events-auto">
                    <MagneticElement strength={0.3}>
                        <button onClick={() => setMenuOpen(true)} className="flex items-center gap-3 uppercase font-mono text-[10px] tracking-[0.2em] hover:opacity-70 transition-opacity group">
                            <span className="hidden md:block">System Menu</span>
                            <div className="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center group-hover:bg-white group-hover:text-black transition-colors duration-500">
                                <Menu size={14} />
                            </div>
                        </button>
                    </MagneticElement>
                </div>
            </motion.header>

            <AnimatePresence>
                {menuOpen && (
                    <motion.div
                        initial={{ clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)" }}
                        animate={{ clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)" }}
                        exit={{ clipPath: "polygon(0 100%, 100% 100%, 100% 100%, 0 100%)" }}
                        transition={{ duration: 0.8, ease: EASE }}
                        className="fixed inset-0 bg-[#050B14] text-[#F4F0EA] z-[200] flex flex-col justify-center px-6 md:px-24 overflow-hidden"
                    >
                        <div className="absolute inset-0 z-0 pointer-events-none opacity-20 transition-opacity duration-500">
                            {menuLinks.map((link, i) => (
                                <motion.img
                                    key={i} src={link.img} alt=""
                                    initial={{ opacity: 0, scale: 1.1 }}
                                    animate={{ opacity: hoveredLink === i ? 1 : 0, scale: hoveredLink === i ? 1 : 1.1 }}
                                    transition={{ duration: 0.8, ease: EASE }}
                                    className="absolute inset-0 w-full h-full object-cover"
                                />
                            ))}
                        </div>

                        <button onClick={() => setMenuOpen(false)} className="absolute top-6 right-6 md:top-12 md:right-12 flex items-center gap-3 uppercase font-mono text-[10px] tracking-[0.2em] hover:opacity-70 transition-opacity z-20 group">
                            Close
                            <div className="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center group-hover:bg-white group-hover:text-black transition-colors duration-500">
                                <X size={14} />
                            </div>
                        </button>

                        <div className="flex flex-col md:flex-row justify-between items-start md:items-center w-full gap-12 relative z-10">
                            <ul className="space-y-2 md:space-y-4">
                                {menuLinks.map((item, i) => (
                                    <motion.li
                                        key={item.name}
                                        initial={{ opacity: 0, y: 50, rotateZ: 5 }}
                                        animate={{ opacity: 1, y: 0, rotateZ: 0 }}
                                        exit={{ opacity: 0, y: -20 }}
                                        transition={{ delay: 0.2 + (i * 0.1), duration: 0.8, ease: EASE }}
                                        onMouseEnter={() => setHoveredLink(i)}
                                        onMouseLeave={() => setHoveredLink(null)}
                                    >
                                        <a href={item.link} onClick={() => setMenuOpen(false)} className="font-serif text-5xl md:text-8xl hover:italic transition-all inline-flex items-center gap-6 group text-outline">
                                            <span className="font-mono text-sm opacity-0 group-hover:opacity-100 transition-opacity text-white">0{i+1}</span>
                                            {item.name}
                                        </a>
                                    </motion.li>
                                ))}
                            </ul>
                            
                            <motion.div
                                initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8, duration: 1 }}
                                className="max-w-xs space-y-12 font-mono text-[10px] uppercase tracking-widest"
                            >
                                <div>
                                    <p className="mb-4 font-bold text-[#3A5A80]">Terminal Access</p>
                                    <a href="mailto:hello@bizco.agency" className="block hover:text-[#3A5A80] transition-colors mb-2">hello@bizco.system</a>
                                    <p className="opacity-60">+1 (800) BIZ-CO99</p>
                                </div>
                                <div>
                                    <p className="mb-4 font-bold text-[#3A5A80]">Data Streams</p>
                                    <div className="flex flex-col gap-2 opacity-60">
                                        <a href="#" className="hover:opacity-100 hover:translate-x-2 transition-transform">Instagram</a>
                                        <a href="#" className="hover:opacity-100 hover:translate-x-2 transition-transform">Twitter/X</a>
                                        <a href="#" className="hover:opacity-100 hover:translate-x-2 transition-transform">LinkedIn</a>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
};
<main id="content" class="site-main post-84 page type-page status-publish hentry">

			<div class="page-header">
			<h1 class="entry-title">Contact us</h1>		</div>
	
	<div class="page-content">
		
		
			</div>

	
</main>

	const GlobalFooter = () => {
    const ref = useRef(null);
    const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end end"] });
    const y = useTransform(scrollYProgress, [0, 1], ["-30%", "0%"]);
    const scale = useTransform(scrollYProgress, [0, 1], [0.9, 1]);

    return (
        <section ref={ref} className="relative h-screen bg-[#F4F0EA] text-[#050B14] overflow-hidden" style={{ clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)" }}>
            <motion.div style={{ y, scale }} className="absolute inset-0 flex flex-col justify-between p-6 md:p-12 h-full">
                <div className="w-full flex justify-between items-start pt-12">
                    <div className="flex gap-2">
                        <div className="w-2 h-2 bg-[#050B14] rounded-full animate-ping" />
                        <span className="font-mono text-[10px] uppercase tracking-widest font-bold">Systems Online</span>
                    </div>
                    <div className="text-right">
                        <p className="uppercase tracking-widest text-[10px] font-mono mb-2 opacity-50">HQ Location</p>
                        <p className="font-serif text-xl italic">New York, NY<br/>10012</p>
                    </div>
                </div>

                <div className="text-center relative z-10 w-full flex flex-col items-center justify-center flex-1">
                    <h2 className="font-serif text-[15vw] leading-none tracking-tighter hover:italic transition-all duration-700 cursor-default">
                        INITIATE
                    </h2>
                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full flex justify-center pointer-events-none">
                        <MagneticElement strength={0.6}>
                            <button className="pointer-events-auto relative w-32 h-32 md:w-48 md:h-48 rounded-full bg-[#050B14] text-[#F4F0EA] flex items-center justify-center group overflow-hidden shadow-2xl">
                                <span className="relative z-10 font-mono text-[10px] uppercase tracking-[0.2em] group-hover:scale-110 transition-transform duration-500 flex flex-col items-center gap-2">
                                    <Play size={16} className="ml-1" fill="currentColor"/>
                                    Start
                                </span>
                                <div className="absolute inset-0 bg-[#3A5A80] rounded-full scale-0 group-hover:scale-100 transition-transform duration-700 ease-[0.16,1,0.3,1] origin-center" />
                            </button>
                        </MagneticElement>
                    </div>
                </div>

                <div className="w-full flex flex-col md:flex-row justify-between items-center text-[10px] font-mono uppercase tracking-widest opacity-60 border-t border-black/10 pt-6">
                    <p>© {new Date().getFullYear()} BIZCO SYSTEM</p>
                    <div className="flex gap-8 mt-4 md:mt-0">
                        {['Twitter', 'LinkedIn', 'Instagram'].map(social => (
                            <a key={social} href="#" className="hover:text-[#3A5A80] transition-colors relative after:content-[''] after:absolute after:-bottom-1 after:left-0 after:w-0 after:h-[1px] after:bg-[#3A5A80] hover:after:w-full after:transition-all after:duration-300">{social}</a>
                        ))}
                    </div>
                </div>
            </motion.div>
        </section>
    );
};