@php $menu = \App\Services\Cms::menu(); @endphp
<header class="sticky top-0 z-40 border-b border-slate-800 bg-slate-950/95 backdrop-blur">
    <div class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">
        <a href="{{ route('home') }}" class="text-white">@include('partials.brand-logo', ['dark' => true])</a>

        <input type="checkbox" id="nav-toggle" class="peer hidden">
        <label for="nav-toggle" class="ml-auto cursor-pointer rounded-lg border border-slate-700 px-3 py-1.5 text-sm text-slate-200 lg:hidden" aria-label="Menu">Menu ☰</label>

        <div class="absolute inset-x-0 top-full hidden max-h-[80vh] flex-col overflow-y-auto border-b border-slate-800 bg-slate-950 p-4 peer-checked:flex lg:static lg:ml-4 lg:flex lg:max-h-none lg:flex-1 lg:flex-row lg:items-center lg:overflow-visible lg:border-0 lg:bg-transparent lg:p-0">
            <nav class="flex flex-col gap-1 lg:flex-row lg:gap-1" aria-label="Main">
                @foreach($menu as $label => $items)
                    <div class="group relative">
                        <button type="button" class="flex w-full items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800 focus:bg-slate-800" aria-haspopup="true">{{ $label }} <span class="text-xs text-slate-500">▾</span></button>
                        <div class="hidden pl-3 group-focus-within:block group-hover:block lg:absolute lg:left-0 lg:top-full lg:min-w-[19rem] lg:pl-0 lg:pt-2">
                            <div class="rounded-xl border border-slate-800 bg-slate-900 p-2 shadow-2xl">
                                @foreach($items as [$title, $href, $desc])
                                    <a href="{{ \App\Services\Cms::safeUrl($href) ?? '#' }}" class="block rounded-lg px-3 py-2 hover:bg-slate-800"><span class="block text-sm font-semibold text-white">{{ $title }}</span>@if($desc)<span class="block text-xs text-slate-400">{{ $desc }}</span>@endif</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </nav>
            <div class="mt-4 flex items-center gap-2 lg:ml-auto lg:mt-0">
                @auth
                    <a href="{{ route('trade.index') }}" class="rounded-lg bg-brand-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-brand-500">Open platform</a>
                @else
                    <a href="{{ route('login') }}" class="rounded-lg px-3 py-1.5 text-sm text-slate-200 hover:bg-slate-800">Log in</a>
                    <a href="{{ route('register') }}" class="rounded-lg bg-brand-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-brand-500">Open account</a>
                @endauth
            </div>
        </div>
    </div>
</header>