@php
    $locale = $currentLocale ?? app()->getLocale();
@endphp

<div id="mobile-nav-panel" data-mobile-nav-panel
     class="fixed inset-y-0 right-0 z-50 w-72 max-w-[85vw] translate-x-full transform bg-forest text-cream shadow-xl transition-transform duration-300 ease-in-out lg:hidden">
    <div class="flex items-center justify-between border-b border-cream/10 px-4 py-4">
        <span class="font-display text-lg font-semibold">{{ __('messages.site_name') }}</span>
        <button type="button" data-mobile-nav-toggle aria-label="{{ __('messages.close_menu') }}" class="h-9 w-9 rounded-md border border-cream/20">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <nav class="flex flex-col gap-1 p-4 text-sm font-medium" aria-label="Mobile">
        <a href="{{ route('home', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_home') }}</a>
        <a href="{{ route('races.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_races') }}</a>
        <a href="{{ route('horses.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_horses') }}</a>
        <a href="{{ route('jockeys.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_jockeys') }}</a>
        <a href="{{ route('clubs.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_clubs') }}</a>
        <a href="{{ route('marketplace.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_marketplace') }}</a>
        <a href="{{ route('news.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_news') }}</a>
        <a href="{{ route('pricing.index', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_pricing') }}</a>

        <div class="my-2 h-px bg-cream/10"></div>

        @auth
            <a href="{{ route('dashboard.index', ['locale' => $locale]) }}" class="rounded-md bg-gold px-3 py-3 text-center font-semibold text-ink">{{ __('messages.nav_dashboard') }}</a>
            <form action="{{ route('logout', ['locale' => $locale]) }}" method="POST">
                @csrf
                <button type="submit" class="w-full rounded-md px-3 py-3 text-left hover:bg-forest-light">{{ __('messages.nav_logout') }}</button>
            </form>
        @else
            <a href="{{ route('login', ['locale' => $locale]) }}" class="rounded-md px-3 py-3 hover:bg-forest-light">{{ __('messages.nav_login') }}</a>
            <a href="{{ route('register', ['locale' => $locale]) }}" class="rounded-md bg-gold px-3 py-3 text-center font-semibold text-ink">{{ __('messages.nav_register') }}</a>
        @endauth

        <div class="my-2 h-px bg-cream/10"></div>

        <div class="flex gap-2 px-3">
            @php
                $mobileRouteName = \Illuminate\Support\Facades\Route::currentRouteName() ?? 'home';
                $mobileRouteParams = \Illuminate\Support\Facades\Route::current()?->parameters() ?? [];
            @endphp
            @foreach (($availableLocales ?? config('locales')) as $code => $meta)
                <a href="{{ route($mobileRouteName, array_merge($mobileRouteParams, ['locale' => $code])) }}"
                   class="rounded px-3 py-1.5 text-xs {{ $locale === $code ? 'bg-gold text-ink font-semibold' : 'border border-cream/20' }}">{{ $meta['short'] }}</a>
            @endforeach
        </div>
    </nav>
</div>