const Navbar = () => {
    const [scrolled, setScrolled] = React.useState(false);
    const [menuOpen, setMenuOpen] = React.useState(false);
    
    const t = (key, fallback) => {
        return (window.VILLA_TRANSLATIONS && window.VILLA_TRANSLATIONS[key]) ? window.VILLA_TRANSLATIONS[key] : fallback;
    };
    
    const currentLang = window.VILLA_LANG || 'en';

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

    const navLinks = [
        { name: t('nav_home', 'HOME'), href: 'index.php' },
        { name: t('nav_experience', 'THE EXPERIENCE'), href: 'experience.php' },
        { name: t('nav_amenities', 'AMENITIES'), href: 'amenities.php' },
        { name: t('nav_gallery', 'GALLERY'), href: 'gallery.php' },
        { name: t('nav_book', 'BOOK NOW'), href: 'book-now.php' }
    ];

    const toggleLanguage = () => {
        const newLang = currentLang === 'en' ? 'el' : 'en';
        window.location.href = `?lang=${newLang}`;
    };

    // 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">
                <div className="flex items-center gap-2">
                    <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>
                    <button 
                        onClick={toggleLanguage}
                        className="bg-black/90 text-white w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center border border-white/10 shadow-lg hover:bg-white hover:text-black transition-all duration-300 cursor-pointer z-20"
                        title={currentLang === 'en' ? 'Switch to Greek' : 'Switch to English'}
                    >
                        <i className="fas fa-globe text-sm md:text-base"></i>
                        <span className="absolute -bottom-1 -right-1 bg-villa-gold text-[8px] px-1 rounded-sm font-bold uppercase">{currentLang}</span>
                    </button>
                </div>

                <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 px-2">
                        {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' : ''}
                                    `}
                                >
                                    <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>

            <div className="md:hidden absolute top-4 left-1/2 -translate-x-1/2 w-full px-6 flex justify-center items-center gap-2 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>
                <button
                    onClick={toggleLanguage}
                    className={`bg-black/90 text-white w-12 h-12 rounded-full flex items-center justify-center border border-white/10 shadow-lg pointer-events-auto transition-all duration-300
                        ${menuOpen ? 'opacity-0 pointer-events-none' : 'opacity-100'}
                    `}
                >
                    <i className="fas fa-globe text-base"></i>
                    <span className="absolute -bottom-1 -right-1 bg-villa-gold text-[8px] px-1 rounded-sm font-bold uppercase">{currentLang}</span>
                </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>
                            );
                        })}
                        <button 
                            onClick={toggleLanguage}
                            className="w-full text-center py-4 text-[10px] font-bold tracking-[0.2em] uppercase transition-all duration-300 flex flex-col items-center gap-1 text-villa-gold hover:text-white group"
                        >
                            <i className="fas fa-globe text-lg mb-1 group-hover:scale-110 transition-transform"></i>
                            {currentLang === 'en' ? 'ΕΛΛΗΝΙΚΑ (EL)' : 'ENGLISH (EN)'}
                        </button>
                    </div>
                </div>
            </div>
        </nav>
    );
};

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