@php
    $locale = $currentLocale ?? app()->getLocale();
    $routeName = \Illuminate\Support\Facades\Route::currentRouteName() ?? 'home';
    $routeParams = \Illuminate\Support\Facades\Route::current()?->parameters() ?? [];
@endphp

<header class="sticky top-0 z-40 border-b border-ink/10 bg-forest text-cream">
    <div class="mx-auto flex h-16 max-w-6xl items-center justify-between gap-3 px-4">
        <a href="{{ route('home', ['locale' => $locale]) }}" class="flex shrink-0 items-center gap-2 font-display text-lg font-semibold tracking-wide whitespace-nowrap">
            <span aria-hidden="true" class="text-xl">🐎</span>
            <span class="hidden sm:inline">{{ __('messages.site_name') }}</span>
        </a>

        <nav class="hidden shrink-0 items-center gap-5 text-sm font-medium whitespace-nowrap lg:flex" aria-label="Main">
            <a href="{{ route('races.index', ['locale' => $locale]) }}" class="transition hover:text-gold">{{ __('messages.nav_races') }}</a>
            <a href="{{ route('horses.index', ['locale' => $locale]) }}" class="transition hover:text-gold">{{ __('messages.nav_horses') }}</a>
            <a href="{{ route('jockeys.index', ['locale' => $locale]) }}" class="transition hover:text-gold">{{ __('messages.nav_jockeys') }}</a>
            <a href="{{ route('marketplace.index', ['locale' => $locale]) }}" class="transition hover:text-gold">{{ __('messages.nav_marketplace') }}</a>

            <div class="group relative">
                <button type="button" class="flex items-center gap-1 transition hover:text-gold">
                    {{ __('messages.nav_more') }}
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-3.5 w-3.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <div class="invisible absolute left-0 top-full z-50 w-44 rounded-md border border-ink/10 bg-forest py-1 opacity-0 shadow-lg transition group-hover:visible group-hover:opacity-100">
                    <a href="{{ route('clubs.index', ['locale' => $locale]) }}" class="block px-4 py-2 text-sm hover:bg-forest-light hover:text-gold">{{ __('messages.nav_clubs') }}</a>
                    <a href="{{ route('news.index', ['locale' => $locale]) }}" class="block px-4 py-2 text-sm hover:bg-forest-light hover:text-gold">{{ __('messages.nav_news') }}</a>
                    <a href="{{ route('pricing.index', ['locale' => $locale]) }}" class="block px-4 py-2 text-sm hover:bg-forest-light hover:text-gold">{{ __('messages.nav_pricing') }}</a>
                </div>
            </div>
        </nav>

        <div class="ml-auto hidden shrink-0 items-center gap-3 lg:flex">
            <a href="{{ route('search.index', ['locale' => $locale]) }}" aria-label="{{ __('messages.search_placeholder') }}"
               class="flex h-9 w-9 items-center justify-center rounded-md border border-cream/20 transition hover:border-gold hover:text-gold">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
                    <circle cx="11" cy="11" r="7" />
                    <path stroke-linecap="round" d="m20 20-3-3" />
                </svg>
            </a>

            <div class="flex items-center gap-0.5 rounded-md border border-cream/20 p-0.5 text-xs">
                @foreach (($availableLocales ?? config('locales')) as $code => $meta)
                    <a data-locale-link href="{{ route($routeName, array_merge($routeParams, ['locale' => $code])) }}"
                       class="rounded px-1.5 py-1 {{ $locale === $code ? 'bg-gold font-semibold text-ink' : 'text-cream/70 hover:text-cream' }}">
                        {{ $meta['short'] }}
                    </a>
                @endforeach
            </div>

            @auth
                <a href="{{ route('dashboard.index', ['locale' => $locale]) }}" class="btn-primary !px-4 !py-2 text-sm whitespace-nowrap">{{ __('messages.nav_dashboard') }}</a>
                <form action="{{ route('logout', ['locale' => $locale]) }}" method="POST">
                    @csrf
                    <button type="submit" class="text-sm font-medium whitespace-nowrap hover:text-gold">{{ __('messages.nav_logout') }}</button>
                </form>
            @else
                <a href="{{ route('login', ['locale' => $locale]) }}" class="text-sm font-medium whitespace-nowrap hover:text-gold">{{ __('messages.nav_login') }}</a>
                <a href="{{ route('register', ['locale' => $locale]) }}" class="btn-primary !px-4 !py-2 text-sm whitespace-nowrap">{{ __('messages.nav_register') }}</a>
            @endauth
        </div>

        <button type="button" data-mobile-nav-toggle aria-expanded="false" aria-controls="mobile-nav-panel"
                class="ml-auto flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-cream/20 lg:hidden" aria-label="{{ __('messages.open_menu') }}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </div>
</header>