@php($nav = config('navigation.primary'))
@php($brand = config('navigation.brand'))

<header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-20">
        <a href="/" class="flex items-center gap-3">
            <img src="{{ $brand['logo'] }}" alt="{{ $brand['name'] }}" class="h-14 w-auto">
            <span class="font-display text-xl font-bold text-[var(--color-brand)] hidden sm:block">JavaPax</span>
        </a>

        {{-- Menu desktop --}}
        <nav class="hidden lg:flex items-center gap-1" aria-label="Menu principal">
            @foreach($nav as $item)
                <div class="relative group">
                    <a href="{{ $item['url'] }}"
                       class="px-3 py-2 text-sm font-semibold text-gray-700 hover:text-[var(--color-brand)] flex items-center gap-1">
                        {{ $item['label'] }}
                        @if(!empty($item['children']))
                            <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M5 7l5 5 5-5z"/></svg>
                        @endif
                    </a>
                    @if(!empty($item['children']))
                        <div class="absolute left-0 top-full hidden group-hover:block bg-white shadow-xl border border-gray-100 rounded-xl py-2 min-w-[300px] z-50">
                            @foreach($item['children'] as $child)
                                <div class="relative group/sub">
                                    <a href="{{ $child['url'] }}"
                                       class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[var(--color-brand)] flex items-center justify-between gap-2">
                                        <span>{{ $child['label'] }}</span>
                                        @if(!empty($child['children']))
                                            <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5z"/></svg>
                                        @endif
                                    </a>
                                    @if(!empty($child['children']))
                                        <div class="absolute left-full top-0 hidden group-hover/sub:block bg-white shadow-xl border border-gray-100 rounded-xl py-2 w-[280px] max-h-[70vh] overflow-y-auto z-50">
                                            @foreach($child['children'] as $g)
                                                <a href="{{ $g['url'] }}" class="block px-4 py-1.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-[var(--color-brand)]">{{ $g['label'] }}</a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </nav>

        {{-- Hamburger mobile --}}
        <button data-menu-toggle class="lg:hidden p-2 text-gray-700" aria-label="Ouvrir le menu">
            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
    </div>

    {{-- Menu mobile déroulant --}}
    <div id="mobile-menu" class="hidden lg:hidden border-t border-gray-100 bg-white max-h-[80vh] overflow-y-auto">
        @foreach($nav as $item)
            <a href="{{ $item['url'] }}" class="block px-5 py-3 font-semibold text-gray-800 border-b border-gray-50">{{ $item['label'] }}</a>
            @foreach($item['children'] ?? [] as $child)
                <a href="{{ $child['url'] }}" class="block pl-8 pr-5 py-2 text-sm text-gray-600 border-b border-gray-50">{{ $child['label'] }}</a>
                @foreach($child['children'] ?? [] as $g)
                    <a href="{{ $g['url'] }}" class="block pl-12 pr-5 py-1.5 text-xs text-gray-500 border-b border-gray-50">{{ $g['label'] }}</a>
                @endforeach
            @endforeach
        @endforeach
    </div>
</header>