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/80 backdrop-blur-sm z-50 top-0">
            {/* Gradient border bottom */}
            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-20">
                    {/* Logo */}
                    <Link to="/" className="font-light text-2xl tracking-tight relative group">
                        byom
                        <div className="absolute -right-2 -top-2 w-1.5 h-1.5 bg-brand-purple rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
                    </Link>

                    {/* Center menu */}
                    <div className="flex items-center gap-8" ref={dropdownRef}>
                        {/* Contact button */}
                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="text-sm relative group"
                        >
                            {t('nav.contact')}
                            <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-blue group-hover:w-full transition-all duration-300"></div>
                        </button>

                        {/* Dropdown menu */}
                        {isOpen && (
                            <div className="absolute top-full mt-2 left-1/2 -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-lg shadow-lg border border-gray-100 p-4 min-w-[240px]">
                                <div className="text-sm font-medium text-gray-500 mb-3">
                                    {t('nav.getInTouch')}
                                </div>
                                <a
                                    href="mailto:hello@byom.fr"
                                    className="flex items-center gap-2 text-sm hover:text-brand-purple transition-colors"
                                >
                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                    hello@byom.fr
                                </a>
                            </div>
                        )}
                    </div>

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

                        <Link to="/pricing" className="text-sm font-medium text-gray-500 hover:text-black transition-colors">
                            {t('nav.pricing')}
                        </Link>

                        <Link 
                            to="/login" 
                            className="bg-black text-white rounded-full px-5 py-2 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center gap-2"
                        >
                            <span>{t('nav.login')}</span>
                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                        </Link>
                    </div>
                </div>
            </div>
        </nav>
    );
}

export default Navbar;
