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

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

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

    return (
        <header className="navbar-container">
            <div className="navbar-content">
                {/* Logo gaea21 ramenant à l'accueil */}
                <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' : ''}`}>
                    <ul className="nav-links">
                        <li>
                            <Link to="/#parcours" onClick={closeMenu}>
                                Parcours
                            </Link>
                        </li>
                        <li>
                            <Link to="/trajectoire" onClick={closeMenu}>
                                Projet
                            </Link>
                        </li>
                        <li>
                            <Link to="/#ecosysteme" onClick={closeMenu}>
                                Écosystème
                            </Link>
                        </li>
                        <li>
                            <Link to="/#contact" onClick={closeMenu}>
                                Contact
                            </Link>
                        </li>
                    </ul>

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