{{-- Barre de navigation publique (landing) --}}
<header x-data="{ open: false, scrolled: false }"
        @scroll.window="scrolled = (window.pageYOffset > 20)"
        :class="scrolled ? 'border-slate-200/80 bg-white/80 shadow-sm backdrop-blur-lg' : 'border-transparent bg-transparent'"
        class="fixed inset-x-0 top-0 z-50 border-b transition-all duration-300">
    <nav class="mx-auto flex max-w-7xl items-center justify-between gap-6 px-6 py-4 lg:px-8">
        <a href="{{ route('home') }}">
            <x-brand-logo :dark="$dark ?? false" />
        </a>

        <div class="hidden items-center gap-8 lg:flex">
            <a href="{{ route('catalogue.index') }}" class="text-sm font-medium {{ ($dark ?? false) ? 'text-slate-200 hover:text-white' : 'text-slate-600 hover:text-brand-700' }} transition">Catalogue</a>
            <a href="{{ route('home') }}#domaines" class="text-sm font-medium {{ ($dark ?? false) ? 'text-slate-200 hover:text-white' : 'text-slate-600 hover:text-brand-700' }} transition">Domaines</a>
            <a href="{{ route('home') }}#parcours" class="text-sm font-medium {{ ($dark ?? false) ? 'text-slate-200 hover:text-white' : 'text-slate-600 hover:text-brand-700' }} transition">Parcours</a>
        </div>

        <div class="hidden items-center gap-3 lg:flex">
            @auth
                <a href="{{ url('/dashboard') }}" class="rounded-full bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">Mon espace</a>
            @else
                @if (Route::has('login'))
                    <a href="{{ route('login') }}" class="text-sm font-semibold {{ ($dark ?? false) ? 'text-white' : 'text-slate-700 hover:text-brand-700' }} transition">Connexion</a>
                @endif
                @if (Route::has('register'))
                    <a href="{{ route('register') }}" class="rounded-full bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">Créer un compte</a>
                @endif
            @endauth
        </div>

        <button @click="open = !open" class="lg:hidden" aria-label="Menu">
            <svg class="h-6 w-6 {{ ($dark ?? false) ? 'text-white' : 'text-slate-900' }}" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
        </button>
    </nav>

    <div x-show="open" x-cloak x-transition class="border-t border-slate-200 bg-white px-6 py-4 lg:hidden">
        <div class="flex flex-col gap-3">
            <a href="{{ route('catalogue.index') }}" @click="open=false" class="py-1 text-sm font-medium text-slate-700">Catalogue</a>
            <a href="{{ route('home') }}#domaines" @click="open=false" class="py-1 text-sm font-medium text-slate-700">Domaines</a>
            <a href="{{ route('home') }}#parcours" @click="open=false" class="py-1 text-sm font-medium text-slate-700">Parcours</a>
            <div class="mt-2 flex gap-3">
                @auth
                    <a href="{{ url('/dashboard') }}" class="flex-1 rounded-full bg-brand-600 px-5 py-2.5 text-center text-sm font-semibold text-white">Mon espace</a>
                @else
                    @if (Route::has('login'))<a href="{{ route('login') }}" class="flex-1 rounded-full border border-slate-300 px-5 py-2.5 text-center text-sm font-semibold text-slate-700">Connexion</a>@endif
                    @if (Route::has('register'))<a href="{{ route('register') }}" class="flex-1 rounded-full bg-brand-600 px-5 py-2.5 text-center text-sm font-semibold text-white">Créer un compte</a>@endif
                @endauth
            </div>
        </div>
    </div>
</header>