<x-app-shell :title="$title ?? 'Súper Admin · AsignaPro'" :pageTitle="$pageTitle ?? null">

    <x-slot name="sidebar">
        {{-- Brand --}}
        <div class="h-16 flex items-center px-6 border-b border-ink-100">
            <a href="{{ route('superadmin.dashboard') }}" class="flex items-center gap-2.5">
                <div class="relative">
                    <img src="{{ asset('assets/brand/favicon.png') }}" class="w-9 h-9 rounded-xl object-cover border border-ink-100 shadow-soft" alt="AsignaPro">
                    <span class="absolute -bottom-1 -right-1 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
                </div>
                <div>
                    <p class="text-sm font-bold text-ink-900 leading-tight font-display">AsignaPro</p>
                    <p class="text-[10px] text-brand-600 font-semibold leading-tight uppercase tracking-wider">Súper Admin</p>
                </div>
            </a>
        </div>

        {{-- Nav --}}
        <nav class="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto scroll-area">
            <p class="nav-section">General</p>
            <x-sidebar-link href="{{ route('superadmin.dashboard') }}"
                :icon="'<svg fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\'/></svg>'"
            >Dashboard</x-sidebar-link>

            <p class="nav-section">SaaS</p>
            <x-sidebar-link href="{{ route('superadmin.companies.index') }}"
                :icon="'<svg fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\'/></svg>'"
            >Empresas</x-sidebar-link>
            <x-sidebar-link href="{{ route('superadmin.plans.index') }}"
                :icon="'<svg fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z\'/></svg>'"
            >Planes</x-sidebar-link>
            <x-sidebar-link href="{{ route('superadmin.subscriptions.index') }}"
                :icon="'<svg fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\'/></svg>'"
            >Suscripciones</x-sidebar-link>
        </nav>

        {{-- Footer card promo --}}
        <div class="m-3 p-4 rounded-xl2 bg-grad-brand text-white relative overflow-hidden">
            <div class="absolute inset-0 bg-grid opacity-20"></div>
            <div class="relative">
                <p class="text-xs font-semibold uppercase tracking-wider opacity-80">Centro de soporte</p>
                <p class="text-sm font-medium mt-1">¿Necesitas ayuda con la plataforma?</p>
                <a href="mailto:soporte@reservapro.test" class="mt-3 inline-flex items-center text-xs font-semibold bg-white/15 hover:bg-white/25 backdrop-blur px-3 py-1.5 rounded-lg transition">
                    Contactar
                    <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </a>
            </div>
        </div>
    </x-slot>

    {{ $slot }}
</x-app-shell>
