import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import logo from '../../img/logo_gaea21.png';
import '../../styles/header.css';

export default function Header({ onNavigate }) {
    const [isOpen, setIsOpen] = useState(false);
    const location = useLocation();

    // Active la couleur blanche (nav-light) pour trajectoire, projet et parcours
    const isDark =
        location.pathname === '/trajectoire' ||
        location.pathname === '/projet' ||
        location.pathname === '/parcours';

    const closeMenu = () => {
        setIsOpen(false);
    };

    return (
        <header className="navbar-container">
            <div className="navbar-content">
                {/* Logo gaea21 */}
                <Link
                    to="/"
                    className="navbar-logo"
                    onClick={closeMenu}
                    aria-label="Retour à l'accueil gaea21"
                >
                    <img src={logo} alt="Logo gaea21" />
                </Link>

                {/* Bouton burger mobile */}
                <button
                    type="button"
                    className={`hamburger ${isOpen ? 'active' : ''}`}
                    onClick={() => setIsOpen(!isOpen)}
                    aria-label={isOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
                    aria-expanded={isOpen}
                >
                    <span></span>
                    <span></span>
                    <span></span>
                </button>

                {/* Navigation principale */}
                <nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
                    {/* Applique la classe nav-light si la page a un fond sombre */}
                    <ul className={`nav-links ${isDark ? 'nav-light' : ''}`}>
                        <li>
                            <Link to="/parcours" onClick={closeMenu}>
                                Parcours
                            </Link>
                        </li>
                        <li>
                            <Link
                                to="/trajectoire"
                                onClick={() => {
                                    closeMenu();
                                    if (typeof onNavigate === 'function') {
                                        onNavigate('trajectoire');
                                    }
                                }}
                            >
                                Projet
                            </Link>
                        </li>
                        <li>
                            <Link to="/#ecosysteme" onClick={closeMenu}>
                                Écosystème
                            </Link>
                        </li>
                        <li>
                            <Link to="/#contact" onClick={closeMenu}>
                                Contact
                            </Link>
                        </li>
                    </ul>

                    {/* Bouton Participer */}
                    <div className="navbar-action">
                        <Link
                            to="/#participer"
                            className="btn-participer"
                            onClick={closeMenu}
                        >
                            Participer
                        </Link>
                    </div>
                </nav>
            </div>
        </header>
    );
}