@php
    $nav = [
        ['Dashboard', 'admin.dashboard', 'admin.dashboard', 'home'],
        ['Empresas', 'admin.empresas.index', 'admin.empresas.*', 'building'],
        ['Planes', 'admin.planes.index', 'admin.planes.*', 'wallet'],
        ['Suscripciones', 'admin.suscripciones.index', 'admin.suscripciones.*', 'receipt'],
        ['Mantenimiento', 'admin.mantenimiento.index', 'admin.mantenimiento.*', 'settings'],
    ];
@endphp

<aside id="sidebar"
       class="bg-saas text-white w-72 shrink-0 flex flex-col rounded-r-[2.2rem] shadow-xl shadow-ink-900/30
              fixed md:static inset-y-0 left-0 z-40 -translate-x-full md:translate-x-0 transition-transform duration-300">

    <div class="px-6 pt-7 pb-5">
        <div class="flex items-center gap-3">
            <div class="h-11 w-11 rounded-2xl bg-brand-500 flex items-center justify-center font-extrabold">SE</div>
            <div class="min-w-0">
                <p class="font-bold leading-tight truncate">Suite Educativa</p>
                <p class="text-xs text-brand-200 truncate">Plataforma SaaS · Admin</p>
            </div>
        </div>
    </div>

    <nav class="flex-1 overflow-y-auto px-4 pb-6 space-y-1 sidebar-scroll">
        @foreach ($nav as [$label, $ruta, $patron, $icono])
            @php $activo = request()->routeIs($patron); @endphp
            <a href="{{ route($ruta) }}"
               class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition
                      {{ $activo ? 'bg-white text-ink-800 shadow-lg' : 'text-white/80 hover:bg-white/10' }}">
                @include('partials.icon', ['name' => $icono, 'class' => 'h-5 w-5 '.($activo ? 'text-brand-500' : 'text-white/85')])
                <span>{{ $label }}</span>
            </a>
        @endforeach

        <div class="pt-4 mt-4 border-t border-white/10">
            <p class="px-3 mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-white/40">Acceso rápido</p>
            <a href="{{ route('admin.empresas.create') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-white/80 hover:bg-white/10 transition">
                @include('partials.icon', ['name' => 'user-plus', 'class' => 'h-5 w-5 text-white/85'])
                <span>Nueva empresa</span>
            </a>
        </div>
    </nav>

    <div class="px-4 pb-5">
        <div class="flex items-center gap-3 bg-white/10 rounded-2xl p-3">
            <div class="h-9 w-9 rounded-full bg-brand-500 flex items-center justify-center text-sm font-bold">{{ auth()->user()->iniciales() }}</div>
            <div class="min-w-0 flex-1">
                <p class="text-sm font-semibold truncate">{{ auth()->user()->name }}</p>
                <p class="text-xs text-white/60 truncate">Super Admin SaaS</p>
            </div>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" title="Cerrar sesión" class="h-8 w-8 rounded-lg hover:bg-white/20 flex items-center justify-center">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7M13 16v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                </button>
            </form>
        </div>
    </div>
</aside>

<div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/40 z-30 hidden md:hidden" onclick="toggleSidebar()"></div>