<!-- Navigation -->
<nav class="fixed w-full top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-blue-500/30">

    <div class="container mx-auto px-4 py-2">
        <div class="flex justify-between items-center">

            <div class="flex items-center justify-center text-2xl text-blue-400 glow-text top-title">
                <div class="w-16 glow rounded-full p-px bg-gradient-to-br from-blue-700 to-blue-900">
                    <a hreflang="{{ $currentLocale }}" href="{{ droute('home', ['locale' => $currentLocale]) }}"
                       title="{{ fcms__('global.navigation.home') }}">
                        <img src="{{ asset('vendor/filament-cms/img/Techno-Artisan__top-logo.png') }}"
                             alt="Techno Artisan Logo Brand" class="rounded-full">
                    </a>
                </div>
                <a href="{{ droute('home', ['locale' => $currentLocale]) }}"
                   title="{{ fcms__('global.navigation.home') }}" class="ml-10 font-brand light">
                    {{ fcms__('global.top_navigation_title') }}
                </a>
            </div>

            <div class="hidden md:flex space-x-6">
                <a href="{{ droute('home', ['locale' => $currentLocale]) }}"
                   class="hover:text-blue-400 transition {{ $pageKey === 'home' ? 'border-b-2 border-b-blue-700' : '' }}">{{ fcms__('global.navigation.home') }}</a>
                <a href="{{ droute('bio', ['locale' => $currentLocale]) }}"
                   class="hover:text-blue-400 transition {{ str_starts_with($pageKey, 'bio') ? 'border-b-2 border-b-blue-700' : '' }}">{{ fcms__('global.navigation.bio') }}</a>
                <a href="{{ droute('portfolio', ['locale' => $currentLocale]) }}"
                   class="hover:text-blue-400 transition {{ $pageKey === 'portfolio' ? 'border-b-2 border-b-blue-700' : '' }}">{{ fcms__('global.navigation.portfolio') }}</a>
                <a href="{{ droute('tour-dates', ['locale' => $currentLocale]) }}"
                   class="hover:text-blue-400 transition {{ $pageKey === 'tour-dates' ? 'border-b-2 border-b-blue-700' : '' }}">{{ fcms__('global.navigation.tour-dates') }}</a>
                <a href="{{ droute('contact', ['locale' => $currentLocale]) }}"
                   class="hover:text-blue-400 transition {{ $pageKey === 'contact' ? 'border-b-2 border-b-blue-700' : '' }}">{{ fcms__('global.navigation.contact') }}</a>
            </div>

            @include(FilamentCms::getViewPrefix() . '.partials.language-selector', ['error' => $error ?? null])

            <button class="md:hidden text-blue-400 ml-2" id="mobile-menu-btn">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

    </div>

</nav>

<div id="mobile-menu" class="hidden md:hidden md:flex fixed top-25 z-51 space-x-8 right-1 border p-4 bg-gray-900 text-3xl rounded-md">
    <ul class="space-y-2">
        <li>
            <a href="{{ droute('home', ['locale' => $currentLocale]) }}"
               class="hover:text-blue-400 transition {{ $pageKey === 'home' ? 'border-b-2 border-b-blue-700' : '' }}">
                {{ fcms__('global.navigation.home') }}
            </a>
        </li>
        <li>
            <a href="{{ droute('bio', ['locale' => $currentLocale]) }}"
               class="hover:text-blue-400 transition {{ $pageKey === 'bio' ? 'border-b-2 border-b-blue-700' : '' }}">
                {{ fcms__('global.navigation.bio') }}
            </a>
        </li>
        <li>
            <a href="{{ droute('portfolio', ['locale' => $currentLocale]) }}"
               class="hover:text-blue-400 transition {{ $pageKey === 'portfolio' ? 'border-b-2 border-b-blue-700' : '' }}">
                {{ fcms__('global.navigation.portfolio') }}
            </a>
        </li>
        <li>
            <a href="{{ droute('tour-dates', ['locale' => $currentLocale]) }}"
               class="hover:text-blue-400 transition {{ $pageKey === 'tour-dates' ? 'border-b-2 border-b-blue-700' : '' }}">
                {{ fcms__('global.navigation.tour-dates') }}
            </a>
        </li>
        <li>
            <a href="{{ droute('contact', ['locale' => $currentLocale]) }}"
               class="hover:text-blue-400 transition {{ $pageKey === 'contact' ? 'border-b-2 border-b-blue-700' : '' }}">
                {{ fcms__('global.navigation.contact') }}
            </a>
        </li>
    </ul>
</div>
