@php
    $onHome = request()->routeIs('home');
    $home = fn($hash = null) => $onHome ? '#' . ($hash ?? 'accueil') : route('home') . ($hash ? "#{$hash}" : '');
    $navLinkClass = fn($active) => 'transition hover:text-cardinal-500' . ($active ? ' text-cardinal-500' : '');
@endphp

<header class="sticky top-0 z-50 border-b border-sage-200/60 bg-cream-100/85 backdrop-blur-md">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-2.5 lg:px-8" style="
    height: 100px;
">
        <a href="{{ route('home') }}" class="flex items-center gap-3">
            @include('partials.logo-mark', ['class' => 'h-28 w-28 shrink-0'])
        </a>

        <nav class="hidden items-center gap-8 text-sm font-medium text-sage-700 lg:flex">
            <a href="{{ $home() }}" class="{{ $navLinkClass($onHome) }}">Accueil</a>
            <a href="{{ route('histoire') }}" class="{{ $navLinkClass(request()->routeIs('histoire')) }}">Notre histoire</a>
            <a href="{{ $home('actions') }}" class="{{ $navLinkClass(false) }}">Nos actions</a>
            <a href="{{ $home('temoignages') }}" class="{{ $navLinkClass(false) }}">Témoignages</a>
            <a href="{{ route('contact') }}" class="{{ $navLinkClass(request()->routeIs('contact')) }}">Contact</a>
        </nav>

        <a href="{{ route('don') }}" class="hidden shrink-0 items-center gap-2 rounded-full bg-cardinal-500 px-5 py-2.5 text-sm font-semibold text-cream-50 shadow-sm shadow-cardinal-900/10 transition hover:bg-cardinal-600 sm:inline-flex">
            Faire un don
            <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 15C6 15 3 12.8 3 9.4C3 7.1 4.8 5.5 6.8 5.5C8.1 5.5 8.9 6.4 10 7.8C11.1 6.4 11.9 5.5 13.2 5.5C15.2 5.5 17 7.1 17 9.4C17 12.8 14 15 14 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </a>

        <button type="button" onclick="document.getElementById('mobile-nav').classList.toggle('hidden')" class="inline-flex h-10 w-10 items-center justify-center rounded-full text-sage-700 lg:hidden" aria-label="Menu">
            <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
        </button>
    </div>

    <nav id="mobile-nav" class="hidden flex-col gap-1 border-t border-sage-200/60 bg-cream-100 px-6 py-4 text-sm font-medium text-sage-700 lg:hidden">
        <a href="{{ $home() }}" class="rounded-lg px-3 py-2.5 hover:bg-sage-100">Accueil</a>
        <a href="{{ route('histoire') }}" class="rounded-lg px-3 py-2.5 hover:bg-sage-100 {{ request()->routeIs('histoire') ? 'text-cardinal-500' : '' }}">Notre histoire</a>
        <a href="{{ $home('actions') }}" class="rounded-lg px-3 py-2.5 hover:bg-sage-100">Nos actions</a>
        <a href="{{ $home('temoignages') }}" class="rounded-lg px-3 py-2.5 hover:bg-sage-100">Témoignages</a>
        <a href="{{ route('contact') }}" class="rounded-lg px-3 py-2.5 hover:bg-sage-100 {{ request()->routeIs('contact') ? 'text-cardinal-500' : '' }}">Contact</a>
        <a href="{{ route('don') }}" class="mt-2 rounded-full bg-cardinal-500 px-4 py-2.5 text-center font-semibold text-cream-50">Faire un don</a>
    </nav>
</header>