@php
    $menu = AleshaMenu::where('location', 'primary')->with('items.children')->first();
    $siteName = AleshaSetting::get('site_name', config('app.name'));
    $currentUrl = request()->path();
@endphp

<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-100"
        x-data="{ open: false }">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="flex items-center justify-between h-16">
            {{-- Logo --}}
            <a href="/" class="flex items-center gap-2 font-bold text-xl text-gray-900 hover:text-indigo-600 transition-colors">
                <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center">
                    <span class="text-white text-sm font-black">{{ substr($siteName, 0, 1) }}</span>
                </div>
                {{ $siteName }}
            </a>

            {{-- Desktop Nav --}}
            @if($menu && $menu->items->count())
            <nav class="hidden md:flex items-center gap-1">
                @foreach($menu->items as $item)
                    @if($item->children->count())
                    <div class="relative group">
                        <button class="flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-50 transition-colors">
                            {{ $item->label }}
                            <svg class="w-3.5 h-3.5 text-gray-400 group-hover:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="absolute top-full left-0 mt-1 w-52 bg-white rounded-xl shadow-lg border border-gray-100 py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150">
                            @foreach($item->children as $child)
                            <a href="{{ $child->url }}" target="{{ $child->target }}"
                               class="flex items-center px-4 py-2.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition-colors">
                                {{ $child->label }}
                            </a>
                            @endforeach
                        </div>
                    </div>
                    @else
                    <a href="{{ $item->url }}" target="{{ $item->target }}"
                       class="px-3 py-2 text-sm font-medium rounded-lg transition-colors
                              {{ ('/' . $currentUrl === $item->url || $currentUrl === ltrim($item->url, '/'))
                                 ? 'text-indigo-600 bg-indigo-50'
                                 : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }}">
                        {{ $item->label }}
                    </a>
                    @endif
                @endforeach
            </nav>
            @endif

            {{-- Mobile hamburger --}}
            <button @click="open = !open" class="md:hidden p-2 text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-50 transition-colors">
                <svg x-show="!open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
                <svg x-show="open" x-cloak class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Mobile Nav --}}
        @if($menu && $menu->items->count())
        <div x-show="open" x-cloak @click.outside="open = false"
             x-transition:enter="transition ease-out duration-150"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             class="md:hidden border-t border-gray-100 py-3">
            @foreach($menu->items as $item)
            <a href="{{ $item->url }}" target="{{ $item->target }}"
               class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                {{ $item->label }}
            </a>
            @if($item->children->count())
                @foreach($item->children as $child)
                <a href="{{ $child->url }}" target="{{ $child->target }}"
                   class="flex items-center pl-7 pr-3 py-2 text-sm text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                    → {{ $child->label }}
                </a>
                @endforeach
            @endif
            @endforeach
        </div>
        @endif
    </div>
</header>

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
