@php
    $nav = config('site.nav');
@endphp

<header class="sticky top-0 z-50 border-b border-black/5 bg-white shadow-sm">
    {{-- Bandeau supérieur --}}
    <div class="hidden bg-ink-dark text-white lg:block">
        <div class="container-site flex h-9 items-center justify-between text-xs">
            <p class="tracking-wide">{{ config('site.baseline') }} à {{ config('site.centre.city') }}</p>
            <div class="flex items-center gap-6">
                <a href="mailto:{{ config('site.email') }}" class="flex items-center gap-2 hover:text-brand-light">
                    <x-icon name="mail" class="h-4 w-4" />{{ config('site.email') }}
                </a>
            </div>
        </div>
    </div>

    <div class="container-site flex h-20 items-center justify-between gap-6">
        <x-site.logo variant="dark" img-class="h-[78px] w-auto rounded-[5px] pt-[0.5px]" />

        {{-- Navigation bureau --}}
        <nav class="hidden items-center gap-5 xl:flex 2xl:gap-7" aria-label="Navigation principale">
            @foreach ($nav as $item)
                <a href="{{ $item['url'] }}"
                   class="relative py-2 text-[13px] font-bold tracking-wider text-ink-dark uppercase transition-colors hover:text-brand-dark
                          after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-brand after:transition-all hover:after:w-full">
                    {{ $item['label'] }}
                </a>
            @endforeach
        </nav>

        <div class="flex items-center gap-3">
            {{-- Bouton menu mobile --}}
            <button type="button"
                    class="flex h-11 w-11 items-center justify-center border border-black/10 text-ink-dark xl:hidden"
                    aria-controls="menu-mobile" aria-expanded="false"
                    onclick="const m=document.getElementById('menu-mobile');const o=m.hasAttribute('hidden');o?m.removeAttribute('hidden'):m.setAttribute('hidden','');this.setAttribute('aria-expanded',o)">
                <span class="sr-only">Ouvrir le menu</span>
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                    <path d="M4 7h16M4 12h16M4 17h16" />
                </svg>
            </button>
        </div>
    </div>

    {{-- Navigation mobile --}}
    <nav id="menu-mobile" hidden class="border-t border-black/5 bg-white xl:hidden" aria-label="Navigation mobile">
        <div class="container-site flex flex-col py-3">
            @foreach ($nav as $item)
                <a href="{{ $item['url'] }}"
                   class="border-b border-black/5 py-3.5 text-sm font-bold tracking-wider text-ink-dark uppercase last:border-0">
                    {{ $item['label'] }}
                </a>
            @endforeach
        </div>
    </nav>
</header>