@php
    $nav = config('site.nav');
    $isActive = fn (array $item) => isset($item['route'])
        ? request()->routeIs($item['route'])
        : collect($item['children'])->contains(fn ($c) => request()->routeIs($c['route']));
    $link = fn (array $item, string $class) => '<a href="'.route($item['route']).'"'
        .(request()->routeIs($item['route']) ? ' aria-current="page"' : '')
        .' class="'.$class.'">'.e($item['label']).'</a>';
@endphp
<header class="relative z-40 bg-field text-white">
    <div class="mx-auto flex min-h-18 max-w-7xl items-center gap-6 px-4">
        <a href="{{ route('home') }}" class="mr-auto flex shrink-0 items-center gap-3">
            <img src="{{ asset('images/brand/escudo-unamba.jpg') }}" alt="" class="size-11 rounded-full bg-white object-contain p-1">
            <span class="leading-tight">
                <span class="block text-[17px] font-bold [font-stretch:112%]">{{ config('site.name') }}</span>
                <span class="block text-[12.5px] text-white/75">{{ config('site.short_place') }}</span>
            </span>
        </a>
        <nav aria-label="Principal" class="hidden xl:block">
            <ul class="flex items-center gap-1 text-[15px] font-medium whitespace-nowrap">
                @foreach ($nav as $i => $item)
                    @if (isset($item['children']))
                        <li class="group relative" data-dropdown{{ $isActive($item) ? ' data-active' : '' }}>
                            <button type="button" data-dropdown-trigger aria-expanded="false" aria-controls="submenu-{{ $i }}" class="inline-flex items-center gap-1 rounded-full px-3 py-2 hover:bg-white/10 group-data-active:bg-white/15">
                                {{ $item['label'] }}
                                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z"/></svg>
                            </button>
                            <ul id="submenu-{{ $i }}" data-dropdown-panel hidden class="absolute top-full left-0 mt-2 min-w-56 rounded-2xl border border-line bg-bg p-2 text-ink shadow-xl">
                                @foreach ($item['children'] as $child)
                                    <li>{!! $link($child, 'block rounded-xl px-4 py-2.5 hover:bg-surface aria-[current=page]:font-bold aria-[current=page]:text-link') !!}</li>
                                @endforeach
                            </ul>
                        </li>
                    @else
                        <li>{!! $link($item, 'inline-block rounded-full px-3 py-2 hover:bg-white/10 aria-[current=page]:bg-white/15') !!}</li>
                    @endif
                @endforeach
            </ul>
        </nav>
        <x-site.theme-toggle />
        <button type="button" data-menu-toggle aria-expanded="false" aria-controls="site-mobile-menu" class="inline-flex size-10 items-center justify-center rounded-full hover:bg-white/10 xl:hidden">
            <span class="sr-only">Abrir menú</span>
            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
    </div>
    {{-- Menú móvil: grupos siempre desplegados, es más rápido de recorrer con el pulgar --}}
    <nav id="site-mobile-menu" aria-label="Principal (móvil)" hidden class="max-h-[calc(100dvh-4.5rem)] overflow-y-auto border-t border-white/10 bg-field xl:hidden">
        <ul class="mx-auto max-w-7xl space-y-1 px-4 py-4 text-base">
            @foreach ($nav as $item)
                @if (isset($item['children']))
                    <li class="pt-3">
                        <span class="block px-3 pb-1 text-sm text-white/60">{{ $item['label'] }}</span>
                        <ul>
                            @foreach ($item['children'] as $child)
                                <li>{!! $link($child, 'block rounded-xl px-3 py-2.5 hover:bg-white/10 aria-[current=page]:bg-white/15 aria-[current=page]:font-bold') !!}</li>
                            @endforeach
                        </ul>
                    </li>
                @else
                    <li>{!! $link($item, 'block rounded-xl px-3 py-2.5 font-semibold hover:bg-white/10 aria-[current=page]:bg-white/15') !!}</li>
                @endif
            @endforeach
        </ul>
    </nav>
</header>