@php
    $navLinks = [
        'parcours' => ['route' => 'parcours', 'label' => "L'homme et le parcours"],
        'chronologie' => ['route' => 'chronologie.index', 'label' => 'Chronologie'],
        'galerie' => ['route' => 'galerie.index', 'label' => 'Galerie'],
        'actions' => ['route' => 'actions.index', 'label' => 'Actions'],
        'vision' => ['route' => 'vision', 'label' => 'Vision'],
        'atl' => ['route' => 'atl', 'label' => 'ATL'],
        'videos' => ['route' => 'videos.index', 'label' => 'Vidéos'],
        'presse' => ['route' => 'presse.index', 'label' => 'Presse'],
        'contact' => ['route' => 'contact.index', 'label' => 'Contact'],
    ];
@endphp
<header class="sticky top-0 z-30 border-b border-ink-900/10 bg-paper/90 backdrop-blur">
    <div class="container-page flex h-16 items-center justify-between gap-4">
        <a href="{{ route('home') }}" class="flex items-center gap-3">
            <picture>
                <source srcset="/images/brand/logo-96.webp 1x, /images/brand/logo-160.webp 2x" type="image/webp">
                <img src="/images/brand/logo-96.png" srcset="/images/brand/logo-96.png 1x, /images/brand/logo-160.png 2x" alt="Emblème « On ne lâche rien » de Te Litho Tenge Didier" width="36" height="36" class="h-9 w-9 rounded-full object-cover" loading="eager">
            </picture>
            <span class="hidden flex-col leading-tight sm:flex">
                <span class="h-display text-sm font-semibold text-ink-900">Te Litho Tenge Didier</span>
                <span class="text-[11px] uppercase tracking-[0.18em] text-gold-600">On ne lâche rien !</span>
            </span>
        </a>

        <nav class="hidden items-center gap-6 lg:flex" aria-label="Navigation principale">
            @foreach ($navLinks as $key => $link)
                <a href="{{ route($link['route']) }}"
                   class="text-sm font-medium text-ink-700 transition hover:text-congo-800 {{ request()->routeIs($link['route'].'*') ? 'text-congo-900 font-semibold' : '' }}">
                    {{ $link['label'] }}
                </a>
            @endforeach
        </nav>

        <div class="hidden items-center gap-3 lg:flex">
            <a href="{{ route('mouvement') }}" class="btn-secondary !px-4 !py-2 text-xs">Mouvement</a>
        </div>

        <button id="nav-toggle" type="button" aria-expanded="false" aria-controls="nav-menu"
                class="flex h-10 w-10 items-center justify-center rounded-full border border-ink-900/15 lg:hidden">
            <span class="sr-only">Ouvrir le menu</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M4 12h16M4 17h16"/>
            </svg>
        </button>
    </div>

    <nav id="nav-menu" class="hidden flex-col gap-1 border-t border-ink-900/10 bg-paper px-5 py-3 lg:hidden" aria-label="Navigation mobile">
        @foreach ($navLinks as $key => $link)
            <a href="{{ route($link['route']) }}" class="rounded-lg px-3 py-2.5 text-sm font-medium text-ink-800 hover:bg-ink-900/5">
                {{ $link['label'] }}
            </a>
        @endforeach
        <a href="{{ route('mouvement') }}" class="rounded-lg px-3 py-2.5 text-sm font-medium text-gold-600 hover:bg-ink-900/5">Mouvement — On ne lâche rien</a>
    </nav>
</header>