@php
    $liensNav = [
        ['route' => 'accueil', 'label' => 'Accueil'],
        ['route' => 'quisommesnous', 'label' => 'Qui sommes-nous ?'],
        ['route' => 'services', 'label' => 'Services'],
        ['route' => 'realisations', 'label' => 'Réalisations'],
        ['route' => 'actualites', 'label' => 'Actualités'],
        ['route' => 'contact', 'label' => 'Contact'],
    ];
@endphp

<header class="fixed top-0 left-0 right-0 z-50 bg-bleu-fonce border-b border-white/10">
    <nav class="max-w-6xl mx-auto flex items-center justify-between px-6 md:px-8 py-3">
        <a href="{{ route('accueil') }}" class="bg-white rounded-md px-3 py-1.5 inline-flex shrink-0">
            <img src="{{ asset('images/logo-horse.png') }}" alt="HORSE" class="h-9">
        </a>

        <ul class="hidden md:flex gap-5 lg:gap-6 mx-auto">
            @foreach ($liensNav as $lien)
            <li>
                <a href="{{ route($lien['route']) }}"
                   class="relative py-2 text-sm font-semibold uppercase tracking-wide transition-colors active:scale-95 active:opacity-70
                          {{ request()->routeIs($lien['route']) ? 'text-vert' : 'text-white/80 hover:text-white' }}
                          after:content-[''] after:absolute after:left-0 after:-bottom-0.5 after:h-0.5 after:bg-vert after:transition-all after:duration-300
                          {{ request()->routeIs($lien['route']) ? 'after:w-full after:left-0' : 'after:w-0 hover:after:w-full hover:after:left-0' }}">
                    {{ $lien['label'] }}
                </a>
            </li>
            @endforeach
        </ul>

        <div class="hidden md:block w-[52px] shrink-0"></div>

        <button id="bouton-menu-mobile" class="md:hidden text-white text-3xl leading-none w-8 h-8 relative" aria-label="Menu">
            <span id="icone-ouvrir" class="absolute inset-0 flex items-center justify-center transition-opacity">☰</span>
            <span id="icone-fermer" class="absolute inset-0 flex items-center justify-center transition-opacity opacity-0">×</span>
        </button>
    </nav>

    <div id="menu-mobile" class="md:hidden hidden bg-bleu-fonce-2 border-t border-white/10 px-6 py-4 space-y-3">
        @foreach ($liensNav as $lien)
        <a href="{{ route($lien['route']) }}"
           class="block text-sm font-semibold uppercase py-1 active:scale-95 transition-transform
                  {{ request()->routeIs($lien['route']) ? 'text-vert' : 'text-white/80' }}">
            {{ $lien['label'] }}
        </a>
        @endforeach
    </div>
</header>
<div class="h-[70px]"></div>

<script>
    (function () {
        const bouton = document.getElementById('bouton-menu-mobile');
        const menu = document.getElementById('menu-mobile');
        const iconeOuvrir = document.getElementById('icone-ouvrir');
        const iconeFermer = document.getElementById('icone-fermer');

        bouton.addEventListener('click', () => {
            const estOuvert = !menu.classList.contains('hidden');
            menu.classList.toggle('hidden');
            iconeOuvrir.style.opacity = estOuvert ? '1' : '0';
            iconeFermer.style.opacity = estOuvert ? '0' : '1';
        });
    })();
</script>