const { useState, useEffect } = React;
const { Globe, Menu, X, ChevronRight, Mail } = lucide;

const Header = ({ activePage }) => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [scrolled, setScrolled] = useState(false);

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

    const navLinks = [
        { label: 'Home', page: 'home' },
        { label: 'About', page: 'about' },
        { label: 'Services', page: 'services' },
        { label: 'Products', page: 'products' },
        { label: 'Recruit', page: 'recruit' },
    ];

    const handleNav = (page) => {
        setIsMenuOpen(false);
        window.dispatchEvent(new CustomEvent('navigate', { detail: page }));
    };

    return (
        <nav
            className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 border-b ${scrolled || isMenuOpen
                    ? 'bg-white/90 backdrop-blur-md shadow-sm border-slate-200/50 py-3'
                    : 'bg-transparent border-transparent py-5'
                }`}
        >
            <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">

                {/* Logo */}
                <div
                    className="flex items-center gap-3 cursor-pointer group"
                    onClick={() => handleNav('home')}
                >
                    <div className={`
                        w-10 h-10 rounded-xl flex items-center justify-center shadow-lg transition-all duration-300
                        ${scrolled ? 'bg-brand-primary text-white' : 'bg-white text-brand-primary'}
                    `}>
                        <Globe size={24} className="group-hover:rotate-180 transition-transform duration-700" />
                    </div>
                    <div className="flex flex-col">
                        <span className={`text-xl font-black tracking-tighter leading-none ${scrolled ? 'text-slate-800' : 'text-slate-800 mix-blend-multiply'}`}>
                            mirukuru
                        </span>
                        <span className="text-[10px] tracking-[0.2em] font-bold text-slate-400 uppercase">Geospatial</span>
                    </div>
                </div>

                {/* Desktop Nav */}
                <div className="hidden md:flex items-center gap-1 bg-white/50 backdrop-blur-sm px-2 py-1.5 rounded-full border border-white/50 shadow-sm">
                    {navLinks.map((item) => (
                        <button
                            key={item.page}
                            onClick={() => handleNav(item.page)}
                            className={`
                                relative px-5 py-2 rounded-full text-sm font-bold transition-all duration-300 overflow-hidden group
                                ${activePage === item.page ? 'text-brand-primary bg-white shadow-sm' : 'text-slate-600 hover:text-brand-primary'}
                            `}
                        >
                            <span className="relative z-10">{item.label}</span>
                            {activePage === item.page && (
                                <span className="absolute inset-0 bg-white rounded-full z-0"></span>
                            )}
                        </button>
                    ))}
                </div>

                {/* CTA & Mobile Toggle */}
                <div className="flex items-center gap-4">
                    <button
                        onClick={() => handleNav('contact')}
                        className={`
                            hidden md:flex items-center gap-2 px-6 py-2.5 rounded-full font-bold text-sm transition-all transform hover:-translate-y-0.5 shadow-lg
                            ${scrolled
                                ? 'bg-slate-900 text-white hover:bg-slate-800'
                                : 'bg-brand-primary text-white hover:bg-brand-primary/90'}
                        `}
                    >
                        <Mail size={16} /> Contact
                    </button>

                    <button
                        className="md:hidden w-10 h-10 flex items-center justify-center bg-white rounded-full shadow-md text-slate-800"
                        onClick={() => setIsMenuOpen(!isMenuOpen)}
                    >
                        {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
                    </button>
                </div>
            </div>

            {/* Mobile Menu Overlay */}
            <div className={`md:hidden absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl border-t border-slate-100 shadow-xl transition-all duration-300 origin-top ${isMenuOpen ? 'scale-y-100 opacity-100 visible' : 'scale-y-0 opacity-0 invisible'}`}>
                <div className="p-6 space-y-2">
                    {navLinks.map(item => (
                        <button
                            key={item.page}
                            onClick={() => handleNav(item.page)}
                            className={`
                                w-full text-left py-4 px-4 rounded-xl font-bold flex items-center justify-between group
                                ${activePage === item.page ? 'bg-brand-primary/5 text-brand-primary' : 'text-slate-600 hover:bg-slate-50'}
                            `}
                        >
                            {item.label}
                            <ChevronRight size={16} className={`transition-transform ${activePage === item.page ? 'translate-x-0' : '-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100'}`} />
                        </button>
                    ))}
                    <button
                        onClick={() => handleNav('contact')}
                        className="w-full mt-4 py-4 bg-slate-900 text-white rounded-xl font-bold shadow-lg flex items-center justify-center gap-2"
                    >
                        <Mail size={18} /> Contact Us
                    </button>
                </div>
            </div>
        </nav>
    );
};

window.App.Components.Header = Header;