const Navbar = () => {
    const [scrolled, setScrolled] = React.useState(false);
    const [menuOpen, setMenuOpen] = React.useState(false);

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

    const navLinks = [
        { name: 'HOME', href: 'index.php' },
        { name: 'THE EXPERIENCE', href: 'experience.php' },
        { name: 'AMENITIES', href: 'amenities.php' },
        { name: 'GALLERY', href: 'gallery.php' },
        { name: 'BOOK NOW', href: 'book-now.php' }
    ];

    // Simulating active path, in a real single-page app this would use a router hook.
    // For now we will just make "HOME" active by default or base it on pathname.
    const currentPath = window.location.pathname.split('/').pop() || 'index.php';

    return (
        <nav className={`w-full fixed top-0 left-0 z-50 flex justify-center transition-all duration-500 pt-6`}>

            {/* Desktop Floating Island Menu */}
            <div className="hidden md:flex flex-col items-center group relative pt-2">
                {/* Logo Top Pill (Always visible) */}
                <a href="index.php" className="bg-black text-white px-8 py-2 rounded-full font-serif text-xl md:text-2xl font-bold tracking-wider z-20 shadow-lg border border-white/10 cursor-pointer hover:text-gray-300 transition-colors">
                    Villa Nevas
                </a>

                {/* Main Nav Pill (Expands on container hover) */}
                <div className="bg-[#111] text-gray-400 rounded-full px-2 py-2 shadow-2xl border border-white/10 backdrop-blur-md relative z-10 transition-all duration-500 origin-top flex items-center
                                h-0 opacity-0 overflow-hidden transform -translate-y-8
                                group-hover:h-auto group-hover:opacity-100 group-hover:transform-none group-hover:overflow-visible group-hover:block group-hover:mt-2
                                focus-within:h-auto focus-within:opacity-100 focus-within:transform-none focus-within:overflow-visible focus-within:block focus-within:mt-2
                                mt-0
                                ">
                    <div className="flex items-center">
                        {navLinks.map((link) => {
                            const isActive = currentPath === link.href || (currentPath === '' && link.href === 'index.php');
                            return (
                                <a
                                    key={link.name}
                                    href={link.href}
                                    className={`
                                        relative px-6 py-2 rounded-full text-[10px] md:text-xs font-bold tracking-[0.2em] uppercase transition-all duration-300
                                        overflow-hidden flex flex-col items-center gap-1 group/link hover:text-white
                                        ${isActive ? 'bg-[#E6E4E0] text-black shadow-md' : ''}
                                    `}
                                >
                                    {/* Small dot indicator above text */}
                                    <span className={`w-1 h-1 rounded-full transition-colors duration-300 ${isActive ? 'bg-black' : 'bg-gray-500 group-hover/link:bg-white'}`}></span>
                                    <span>{link.name}</span>
                                </a>
                            );
                        })}
                    </div>
                </div>
            </div>

            {/* Mobile Nav Button */}
            <div className="md:hidden absolute top-4 left-1/2 -translate-x-1/2 w-full px-6 flex justify-center items-center z-[45] pointer-events-none">
                <button
                    onClick={() => setMenuOpen(!menuOpen)}
                    className={`bg-black text-white px-8 py-3 rounded-full font-serif text-xl font-bold tracking-wider shadow-lg border border-white/10 transition-all duration-300 pointer-events-auto
                        ${menuOpen ? 'border-b-0 opacity-0 pointer-events-none' : 'opacity-100'}
                    `}
                >
                    Villa Nevas
                </button>
            </div>

            {/* Mobile Menu Overlay */}
            <div className={`fixed inset-0 bg-black/95 backdrop-blur-sm z-50 flex flex-col items-center justify-start pt-4 space-y-6 transition-transform duration-500 ease-in-out ${menuOpen ? 'translate-y-0' : '-translate-y-full'} md:hidden`}>

                {/* Mobile Open Header */}
                <div className="w-full relative flex justify-center">
                    <a href="index.php" className="bg-black px-8 py-3 rounded-full font-serif text-xl font-bold tracking-wider text-white border border-white/10 hover:text-gray-300 transition-colors cursor-pointer">
                        Villa Nevas
                    </a>
                    <button onClick={() => setMenuOpen(false)} className="absolute right-6 top-2 text-white/50 hover:text-white text-3xl">
                        <i className={`fas fa-times`}></i>
                    </button>
                </div>

                {/* Mobile Links */}
                <div className="w-full flex justify-center py-4 bg-[#111] border-y border-white/10">
                    <div className="flex flex-col space-y-2 items-center w-full max-w-sm">
                        {navLinks.map((link) => {
                            const isActive = currentPath === link.href || (currentPath === '' && link.href === 'index.php');
                            return (
                                <a
                                    key={link.name}
                                    href={link.href}
                                    className={`
                                        w-full text-center py-4 text-xs font-bold tracking-[0.2em] uppercase transition-all duration-300 flex flex-col items-center gap-1
                                        ${isActive ? 'bg-[#E6E4E0] text-black rounded-lg w-11/12' : 'text-gray-400 hover:text-white hover:bg-white/5 rounded-lg w-11/12'}
                                    `}
                                >
                                    <span className={`w-1 h-1 rounded-full mb-1 ${isActive ? 'bg-black' : 'bg-gray-500'}`}></span>
                                    {link.name}
                                </a>
                            );
                        })}
                    </div>
                </div>
            </div>
        </nav>
    );
};

const root = ReactDOM.createRoot(document.getElementById('nav-root'));
root.render(<Navbar />);
