import { Link } from 'react-router-dom';
import { useState, useRef, useEffect } from 'react';
import { useLanguage } from '../context/LanguageContext';

function Navbar() {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef(null);
    const { language, setLanguage, t } = useLanguage();

    const menuItems = [
        { id: 'aiTrends', icon: 'ai', pattern: 'pattern-ai' },
        { id: 'imageGen', icon: 'image', pattern: 'pattern-image' },
        { id: 'analytics', icon: 'analytics', pattern: 'pattern-analytics' },
        { id: 'brandGrowth', icon: 'growth', pattern: 'pattern-growth' }
    ];

    // Close dropdown when clicking outside
    useEffect(() => {
        function handleClickOutside(event) {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                setIsOpen(false);
            }
        }

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);

    return (
        <nav className="fixed w-full bg-white z-50 top-0">
            {/* Technical grid background */}
            <div className="absolute inset-0 technical-grid opacity-30 pointer-events-none"></div>
            
            {/* Border bottom */}
            <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-black"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16">
                <div className="flex justify-between items-center h-24">
                    {/* Logo */}
                    <Link to="/" className="monospace text-2xl font-black uppercase tracking-tighter relative group">
                        byom
                        <div className="absolute -right-3 -top-3 w-2 h-2 bg-black geometric-shape diamond opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </Link>

                    {/* Center menu */}
                    <div className="flex items-center gap-12" ref={dropdownRef}>
                        {/* Contact button */}
                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="brutalist-button !py-2 !px-4 text-sm relative"
                        >
                            {t('nav.contact')}
                        </button>

                        {/* Dropdown menu */}
                        {isOpen && (
                            <div className="absolute top-full mt-4 left-1/2 -translate-x-1/2 brutalist-dropdown">
                                <div className="p-6">
                                    <div className="monospace text-sm font-bold uppercase mb-4">
                                        {t('nav.getInTouch')}
                                    </div>
                                    <a
                                        href="mailto:hello@byom.fr"
                                        className="flex items-center gap-3 text-base monospace hover:translate-x-2 transition-transform"
                                    >
                                        <div className="w-2 h-2 bg-black geometric-shape diamond"></div>
                                        hello@byom.fr
                                    </a>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* Right menu */}
                    <div className="flex items-center gap-12">
                        {/* Language switcher */}
                        <button
                            onClick={() => setLanguage(language === 'en' ? 'fr' : 'en')}
                            className="monospace text-sm font-bold hover:translate-x-1 transition-transform"
                        >
                            {language.toUpperCase()}
                        </button>

                        <Link to="/pricing" className="monospace text-sm font-bold hover:translate-x-1 transition-transform">
                            {t('nav.pricing')}
                        </Link>

                        <Link to="/login" className="brutalist-button !py-2 !px-4 text-sm">
                            {t('nav.login')} →
                        </Link>
                    </div>
                </div>
            </div>
        </nav>
    );
}

export default Navbar; 