@php
    $active = $active ?? '';
    // Menu volontairement court : tout ce qui concerne UN site se lit dans son
    // encadré sur la page Sites (incidents, disponibilité, sauvegarde +
    // historique, rapport mensuel, git, note d'audit). Plus besoin d'aller
    // chercher l'information ailleurs.
    //
    // Retirés le 15/07 : Articles (le contenu se gère sur chaque site, pas ici),
    // Supervision (Alertes/Sauvegardes/Rapports sont dans les encadrés) et
    // Prospects. Les pages restent accessibles par leur URL : /articles,
    // /prospects, /alertes, /sauvegardes, /reports, /journal, /evolution.
    $groups = [
        ['label' => 'Sites', 'route' => 'dashboard', 'id' => 'dashboard'],
        ['label' => 'Référencement', 'route' => 'referencement', 'children' => [
            ['Vue par site (3 axes)', 'referencement'], ['SEO', 'seo'], ['GEO·IA', 'geo'], ['Backlink/Liens', 'liens'],
        ]],
        ['label' => 'Analyse', 'route' => 'analytics', 'id' => 'analytics'],
    ];
    $isActive = function ($g) use ($active) {
        if (isset($g['id'])) return $g['id'] === $active;
        foreach ($g['children'] ?? [] as $c) if ($c[1] === $active) return true;
        return false;
    };
@endphp
<nav class="flex gap-1 text-sm items-center">
    @foreach($groups as $g)
        @php $act = $isActive($g); @endphp
        @if(! isset($g['children']))
            <a href="{{ route($g['route']) }}" class="px-2.5 py-1.5 rounded-lg {{ $act ? 'text-slate-100 font-medium bg-slate-800/60' : 'text-slate-400 hover:text-slate-200' }}">{{ $g['label'] }}</a>
        @else
            <div class="relative group">
                @php $tcls = 'px-2.5 py-1.5 rounded-lg flex items-center gap-1 '.($act ? 'text-slate-100 font-medium bg-slate-800/60' : 'text-slate-400 hover:text-slate-200'); @endphp
                @if(isset($g['route']))
                    <a href="{{ route($g['route']) }}" class="{{ $tcls }}">{{ $g['label'] }}
                        @if(! empty($g['badge']))<span id="alert-badge" class="hidden text-[10px] font-bold bg-red-500 text-white rounded-full px-1.5">0</span>@endif
                        <svg class="w-3 h-3 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg></a>
                @else
                    <button class="{{ $tcls }}">{{ $g['label'] }}
                        @if(! empty($g['badge']))<span id="alert-badge" class="hidden text-[10px] font-bold bg-red-500 text-white rounded-full px-1.5">0</span>@endif
                        <svg class="w-3 h-3 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg></button>
                @endif
                <div class="absolute left-0 top-full pt-1 hidden group-hover:block z-50 min-w-[180px]">
                    <div class="rounded-xl border border-slate-700 bg-slate-800 shadow-2xl p-1">
                        @foreach($g['children'] as $c)
                            <a href="{{ route($c[1]) }}" class="block px-3 py-2 rounded-lg text-[13px] {{ $c[1] === $active ? 'text-indigo-300 bg-slate-700/60' : 'text-slate-300 hover:bg-slate-700/60' }}">{{ $c[0] }}</a>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    @endforeach
</nav>
<script>
    fetch('{{ route('alerts.count') }}', { headers: { Accept: 'application/json' } })
        .then(r => r.json())
        .then(d => { const b = document.getElementById('alert-badge'); if (b && d.count > 0) { b.textContent = d.count; b.classList.remove('hidden'); } })
        .catch(() => {});
</script>