const { useState, useEffect } = React;

const WalletIcon = ({ size }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4Z" /></svg>
);

const MenuIcon = ({ size }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" /></svg>
);

const XIcon = ({ size }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
);

const Navbar = () => {
    const [scrolled, setScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            setScrolled(window.scrollY > 50);
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <>
            <nav
                className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'glass-panel py-3 shadow-lg' : 'bg-transparent py-5'
                    } slide-up-anim`}
                style={{ margin: scrolled ? '10px 20px' : '0' }}
            >
                <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
                    <div className="flex items-center gap-3 cursor-pointer">
                        <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-teal-400 to-emerald-500 flex items-center justify-center shadow-[0_0_15px_rgba(16,185,129,0.5)]">
                            <span className="font-bold text-xl text-white">D</span>
                        </div>
                        <span className="font-bold text-xl tracking-tight hidden sm:block">
                            Doxa<span className="text-muted">Market</span>
                        </span>
                    </div>

                    <div className="hidden md:flex items-center gap-8">
                        <a href="#markets" className="text-sm font-medium hover:text-white text-gray-300 transition-colors">Markets</a>
                        <a href="#how" className="text-sm font-medium hover:text-white text-gray-300 transition-colors">How it Works</a>
                        <a href="#wallet" className="text-sm font-medium hover:text-white text-gray-300 transition-colors">DoxaWallet</a>
                    </div>

                    <div className="flex items-center gap-4">
                        <button className="hidden sm:flex items-center gap-2 px-5 py-2.5 rounded-full bg-white/10 hover:bg-white/20 transition-all border border-white/10 font-medium text-sm">
                            <WalletIcon size={16} />
                            Connect Wallet
                        </button>
                        <button
                            className="md:hidden text-white"
                            onClick={() => setMobileMenuOpen(true)}
                        >
                            <MenuIcon size={24} />
                        </button>
                    </div>
                </div>
            </nav>

            {/* Mobile Menu */}
            {mobileMenuOpen && (
                <div className="fixed inset-0 z-[100] bg-[#0A0A0B] flex flex-col p-6 slide-in-right">
                    <div className="flex justify-between items-center mb-10">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-teal-400 to-emerald-500 flex items-center justify-center">
                                <span className="font-bold text-xl text-white">D</span>
                            </div>
                            <span className="font-bold text-xl">DoxaMarket</span>
                        </div>
                        <button onClick={() => setMobileMenuOpen(false)} className="bg-white/10 p-2 rounded-full">
                            <XIcon size={24} />
                        </button>
                    </div>

                    <div className="flex flex-col gap-6 text-xl font-bold">
                        <a href="#markets" onClick={() => setMobileMenuOpen(false)}>Markets</a>
                        <a href="#how" onClick={() => setMobileMenuOpen(false)}>How it Works</a>
                        <a href="#wallet" onClick={() => setMobileMenuOpen(false)}>DoxaWallet</a>
                    </div>

                    <div className="mt-auto">
                        <button className="w-full py-4 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 font-bold text-white shadow-lg flex items-center justify-center gap-2">
                            <WalletIcon size={20} />
                            Connect DoxaWallet
                        </button>
                    </div>
                </div>
            )}
        </>
    );
};


window.Navbar = Navbar;

window.Navbar = Navbar;