{{-- Barre de navigation publique réutilisable --}}
<header x-data="{ open: false }" class="sticky top-0 z-50 border-b border-slate-200/80 bg-white/80 shadow-sm backdrop-blur-lg">
    <nav class="mx-auto flex max-w-7xl items-center justify-between gap-6 px-6 py-4 lg:px-8">
        <a href="{{ url('/') }}">
            <x-brand-logo />
        </a>

        <div class="hidden items-center gap-8 lg:flex">
            <a href="{{ route('catalogue.index') }}" class="text-sm font-medium text-slate-600 transition hover:text-brand-700">Catalogue</a>
            <a href="{{ url('/#domaines') }}" class="text-sm font-medium text-slate-600 transition hover:text-brand-700">Domaines</a>
            <a href="{{ url('/#parcours') }}" class="text-sm font-medium text-slate-600 transition hover:text-brand-700">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 text-slate-700 transition hover:text-brand-700">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 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') }}" class="py-1 text-sm font-medium text-slate-700">Catalogue</a>
            <a href="{{ url('/#domaines') }}" class="py-1 text-sm font-medium text-slate-700">Domaines</a>
            <a href="{{ url('/#parcours') }}" 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>