@auth
    @php
        $mobileItems = [
            ['dashboard', 'Inicio', 'home'],
        ];

        if (auth()->user()->isAdministrador() || auth()->user()->isCajero()) {
            $mobileItems[] = ['sales.pos', 'Vender', 'shopping-cart'];
            $mobileItems[] = ['cash.index', 'Caja', 'calculator'];
        } else {
            $mobileItems[] = ['products.index', 'Productos', 'archive-box'];
            $mobileItems[] = ['purchases.index', 'Compras', 'shopping-bag'];
        }

        $mobileItems[] = ['price-lookup.index', 'Precios', 'magnifying-glass'];

        if (auth()->user()->isAdministrador()) {
            $mobileItems[] = ['reports.index', 'Reportes', 'chart-bar'];
        } else {
            $mobileItems[] = ['attendance.terminal', 'Marcar', 'clock'];
        }
    @endphp

    <nav aria-label="Navegación móvil" class="safe-area-bottom fixed inset-x-0 bottom-0 z-40 border-t border-zinc-200 bg-white/95 px-2 pt-2 shadow-[0_-8px_30px_rgba(0,0,0,.08)] backdrop-blur-xl lg:hidden dark:border-zinc-800 dark:bg-zinc-950/95">
        <div class="mx-auto grid max-w-lg grid-cols-5">
            @foreach ($mobileItems as [$routeName, $label, $icon])
                <a href="{{ route($routeName) }}" wire:navigate class="flex min-w-0 flex-col items-center gap-1 rounded-xl px-1 py-1.5 text-[10px] font-bold transition {{ request()->routeIs($routeName) ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300' : 'text-zinc-500 dark:text-zinc-400' }}">
                    <flux:icon :name="$icon" class="size-5" />
                    <span class="max-w-full truncate">{{ $label }}</span>
                </a>
            @endforeach
        </div>
    </nav>
@endauth