@php
    $groups = [
        'nav.section_overview' => [
            ['key' => 'dashboard',   'icon' => 'dashboard',  'route' => 'dashboard', 'lock' => false],
            ['key' => 'panel',       'icon' => 'bolt',       'route' => 'panel',     'lock' => false],
            ['key' => 'rooms',       'icon' => 'rooms',      'route' => 'rooms.index', 'active' => 'rooms.*', 'lock' => false],
            ['key' => 'devices',     'icon' => 'devices',    'route' => 'devices.index', 'active' => 'devices.*', 'lock' => false],
        ],
        'nav.section_persons' => [
            ['key' => 'persons',     'icon' => 'persons',    'route' => 'persons.index', 'active' => 'persons.*', 'lock' => false],
        ],
        'nav.section_security' => [
            ['key' => 'windows',     'icon' => 'window',     'route' => 'windows',   'lock' => false],
            ['key' => 'access',      'icon' => 'shield',     'route' => 'access',    'lock' => true],
        ],
        'nav.section_system' => [
            ['key' => 'network',     'icon' => 'network',    'route' => 'network',   'lock' => false],
            ['key' => 'automations', 'icon' => 'automation', 'route' => 'automations.index', 'active' => 'automations.*', 'lock' => false],
            ['key' => 'host',        'icon' => 'activity',   'route' => 'host',      'lock' => false],
            ['key' => 'settings',    'icon' => 'settings',   'route' => 'settings',  'lock' => false],
        ],
    ];
@endphp

<div class="flex flex-col gap-6 h-full">
    {{-- brand --}}
    <a href="{{ route('dashboard') }}" class="flex items-center gap-2.5 px-2 py-0.5" wire:navigate>
        <span class="logo-mark grid place-items-center w-8 h-8 rounded-[9px] text-accent">
            <x-icon name="dashboard" :size="17" />
        </span>
        <span class="leading-tight">
            <span class="block font-extrabold text-[15px] tracking-[0.02em] text-ink">{{ __('common.app_name') }}</span>
            <span class="block text-[10px] font-semibold uppercase tracking-[0.14em] text-ink-3">{{ __('common.app_tagline') }}</span>
        </span>
    </a>

    {{-- nav --}}
    <nav class="flex flex-col gap-5">
        @foreach ($groups as $label => $items)
            <div class="flex flex-col gap-0.5" aria-label="{{ __($label) }}">
                <div class="px-2.5 mb-1.5 text-[10px] font-bold uppercase tracking-[0.14em] text-ink-3">{{ __($label) }}</div>
                @foreach ($items as $item)
                    @php $active = $item['route'] && request()->routeIs($item['active'] ?? $item['route']); @endphp
                    @if ($item['route'])
                        <a href="{{ route($item['route']) }}" wire:navigate
                           @class([
                               'flex items-center gap-2.5 w-full px-2.5 py-2 rounded-lg text-[13px] font-semibold transition-colors',
                               'bg-accent/10 text-accent' => $active,
                               'text-ink-2 hover:bg-raised hover:text-ink' => ! $active,
                           ])
                           @if ($active) aria-current="page" @endif>
                            <x-icon :name="$item['icon']" :size="16" />
                            <span>{{ __('nav.'.$item['key']) }}</span>
                        </a>
                    @else
                        <span title="{{ __('nav.soon') }}"
                              class="flex items-center gap-2.5 w-full px-2.5 py-2 rounded-lg text-[13px] font-medium text-ink-3 cursor-default select-none">
                            <x-icon :name="$item['icon']" :size="16" class="opacity-80" />
                            <span class="leading-tight">{{ __('nav.'.$item['key']) }}</span>
                            @if ($item['lock'])
                                <span class="ml-auto shrink-0"><x-icon name="lock" :size="13" /></span>
                            @endif
                        </span>
                    @endif
                @endforeach
            </div>
        @endforeach
    </nav>

    {{-- system status --}}
    <div class="mt-auto border border-line-soft rounded-card bg-surface p-3 flex flex-col gap-2">
        <h4 class="text-[10px] font-semibold uppercase tracking-[0.14em] text-ink-3">{{ __('common.status_online') }}</h4>
        <div class="flex items-center gap-2 text-[12px] text-ink-2">
            <x-status-dot state="online" :pulse="true" />
            <span>{{ __('common.system_ok') }}</span>
        </div>
    </div>
</div>