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();

    // 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 py-6">
            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center">
                    <Link to="/" className="text-xl font-medium">
                        byom
                    </Link>

                    {/* Contact dropdown */}
                    <div className="absolute left-1/2 -translate-x-1/2" ref={dropdownRef}>
                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="bg-black text-white rounded-full w-auto h-6 text-xs flex items-center justify-center px-4 hover:bg-brand-purple transition-colors"
                        >
                            {t('nav.contact')}
                        </button>

                        {/* Dropdown menu */}
                        {isOpen && (
                            <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-white rounded-2xl shadow-lg ring-1 ring-black/5 p-4 transform opacity-100 scale-100 transition-all">
                                <div className="space-y-3">
                                    <div className="text-xs text-gray-500 uppercase">
                                        {t('nav.getInTouch')}
                                    </div>
                                    <a
                                        href="mailto:hello@byom.fr"
                                        className="flex items-center gap-2 text-sm text-gray-900 hover:text-brand-purple transition-colors"
                                    >
                                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                        hello@byom.fr
                                    </a>
                                </div>
                            </div>
                        )}
                    </div>

                    <div className="flex items-center gap-6">
                        {/* Language switcher */}
                        <button
                            onClick={() => setLanguage(language === 'en' ? 'fr' : 'en')}
                            className="text-sm text-gray-500 hover:text-brand-purple transition-colors"
                        >
                            {language.toUpperCase()}
                        </button>

                        <Link to="/pricing" className="text-sm">
                            {t('nav.pricing')}
                        </Link>
                        <Link to="/login" className="bg-black text-white rounded-full px-6 py-2 text-sm flex items-center gap-2">
                            <span>{t('nav.login')}</span>
                            <span>→</span>
                        </Link>
                    </div>
                </div>
            </div>
        </nav>
    );
}

export default Navbar;