@php
    $items = [
        ['key' => 'dashboard', 'label' => 'Dashboard', 'icon' => 'layout-dashboard', 'route' => route('super-admin.dashboard')],
        ['key' => 'businesses', 'label' => 'Businesses', 'icon' => 'briefcase', 'route' => route('super-admin.businesses.index')],
        ['key' => 'plans', 'label' => 'Plans', 'icon' => 'badge-dollar-sign', 'route' => route('super-admin.plans.index')],
        ['key' => 'subscriptions', 'label' => 'Subscriptions', 'icon' => 'calendar-check', 'route' => route('super-admin.subscriptions.index')],
        ['key' => 'payments', 'label' => 'Payments', 'icon' => 'credit-card', 'route' => route('super-admin.payments.index')],
        ['key' => 'users', 'label' => 'Users', 'icon' => 'users', 'route' => route('super-admin.users.index')],
        ['key' => 'support', 'label' => 'Support Tickets', 'icon' => 'ticket', 'route' => route('super-admin.support.index')],
        ['key' => 'system', 'label' => 'System Settings', 'icon' => 'settings', 'route' => route('super-admin.settings.system')],
        ['key' => 'landing', 'label' => 'Landing Page', 'icon' => 'book-open', 'route' => route('super-admin.settings.landing')],
        ['key' => 'email', 'label' => 'Email Settings', 'icon' => 'mail', 'route' => route('super-admin.settings.email')],
        ['key' => 'whatsapp', 'label' => 'WhatsApp Settings', 'icon' => 'message-circle', 'route' => route('super-admin.settings.whatsapp')],
        ['key' => 'activity', 'label' => 'Activity Logs', 'icon' => 'activity', 'route' => route('super-admin.activity.index')],
    ];
@endphp

<aside class="fixed inset-y-0 left-0 z-40 hidden w-[292px] overflow-hidden border-r border-booklio-border bg-white lg:block">
    <div class="flex h-full min-h-0 flex-col">
        <div class="flex h-[92px] shrink-0 items-center gap-3 px-7">
            <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-booklio-primary text-2xl font-extrabold text-white shadow-card shadow-blue-500/20">B</div>
            <div>
                <span class="block text-[24px] font-extrabold leading-none tracking-tight">Booklio</span>
                <span class="mt-1 block text-xs font-bold uppercase tracking-wide text-booklio-primary">Super Admin</span>
            </div>
        </div>
        <nav class="min-h-0 flex-1 space-y-1 overflow-y-auto px-5 pb-4 booklio-scrollbar">
            @foreach ($items as $item)
                <a href="{{ $item['route'] }}" class="group flex h-11 items-center gap-3 rounded-lg px-3 text-[14px] font-bold transition {{ ($active ?? 'dashboard') === $item['key'] ? 'bg-booklio-primary text-white shadow-card shadow-blue-500/20' : 'text-slate-700 hover:bg-slate-50' }}">
                    <x-ui.icon :name="$item['icon']" class="h-5 w-5 {{ ($active ?? 'dashboard') === $item['key'] ? 'text-white' : 'text-slate-500 group-hover:text-booklio-primary' }}" />
                    <span class="truncate">{{ $item['label'] }}</span>
                </a>
            @endforeach
        </nav>
        <div class="m-5 shrink-0 rounded-lg border border-blue-100 bg-blue-50 p-4">
            <p class="text-sm font-extrabold text-booklio-primary">Platform health</p>
            <p class="mt-1 text-xs leading-5 text-slate-600">99.98% uptime - all queues operational.</p>
        </div>
    </div>
</aside>

<div data-super-mobile-sidebar class="fixed inset-0 z-50 hidden lg:hidden">
    <div data-close-super-sidebar class="absolute inset-0 bg-slate-950/40"></div>
    <aside class="relative flex h-full w-[292px] max-w-[86vw] flex-col border-r border-booklio-border bg-white shadow-modal">
        <div class="flex h-[82px] items-center justify-between gap-3 px-5">
            <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-booklio-primary text-xl font-extrabold text-white">B</div>
                <div>
                    <span class="block text-xl font-extrabold leading-none">Booklio</span>
                    <span class="mt-1 block text-xs font-bold uppercase tracking-wide text-booklio-primary">Super Admin</span>
                </div>
            </div>
            <button type="button" data-close-super-sidebar class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100">
                <x-ui.icon name="x" class="h-5 w-5" />
            </button>
        </div>
        <nav class="flex-1 space-y-1 overflow-y-auto px-4 pb-6 booklio-scrollbar">
            @foreach ($items as $item)
                <a href="{{ $item['route'] }}" data-close-super-sidebar class="flex h-11 items-center gap-3 rounded-lg px-3 text-[14px] font-bold {{ ($active ?? 'dashboard') === $item['key'] ? 'bg-booklio-primary text-white' : 'text-slate-700 hover:bg-slate-50' }}">
                    <x-ui.icon :name="$item['icon']" class="h-5 w-5" />
                    <span>{{ $item['label'] }}</span>
                </a>
            @endforeach
        </nav>
    </aside>
</div>