@php
    // The middle slot is the raised action button; the other four are destinations.
    $items = [
        ['label' => 'خانه', 'route' => 'dashboard', 'icon' => 'home'],
        ['label' => 'مشتریان', 'route' => 'customers.index', 'icon' => 'users'],
        ['quickCreate' => true],
        ['label' => 'فروش‌ها', 'route' => 'deals.index', 'icon' => 'briefcase'],
        ['label' => 'بیشتر', 'route' => null, 'moreMenu' => true, 'icon' => 'menu'],
    ];

    $icons = [
        'home' => 'M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10',
        'users' => 'M17 20h5v-2a3 3 0 00-5.36-1.86M17 20H7m10 0v-2c0-.66-.13-1.3-.36-1.86m0 0A5 5 0 0012 13a5 5 0 00-4.64 3.14M7 20H2v-2a3 3 0 015.36-1.86M7 20v-2c0-.66.13-1.3.36-1.86m5-4a3 3 0 110-6 3 3 0 010 6z',
        'briefcase' => 'M20 7h-3V5a2 2 0 00-2-2H9a2 2 0 00-2 2v2H4a1 1 0 00-1 1v11a1 1 0 001 1h16a1 1 0 001-1V8a1 1 0 00-1-1zM9 5h6v2H9V5z',
        'menu' => 'M4 6h16M4 12h16M4 18h16',
    ];
@endphp

<nav
    class="fixed inset-x-0 bottom-0 z-40 border-t border-[var(--panel-border)] bg-[var(--panel-nav-bg)] pb-[env(safe-area-inset-bottom)] [box-shadow:var(--panel-bottom-shadow)] backdrop-blur md:hidden"
    aria-label="منوی پایین"
>
    <div class="grid grid-cols-5 items-end">
        @foreach ($items as $item)
            @if ($item['quickCreate'] ?? false)
                {{-- Raised circular action. It sits above the bar so it reads as the
                     primary action rather than a fifth tab, which is why the top bar's
                     "ثبت سریع" button is hidden on mobile. --}}
                <div class="relative flex justify-center">
                    <button
                        type="button"
                        dusk="quick-create-fab"
                        @click="$dispatch('open-quick-create')"
                        aria-label="ثبت سریع"
                        class="absolute -top-7 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--panel-accent)] text-[var(--panel-accent-text)] shadow-lg ring-4 ring-[var(--panel-nav-bg)] transition active:scale-95"
                    >
                        <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"/>
                        </svg>
                    </button>

                    {{-- Reserves the column's height so the grid stays aligned. --}}
                    <span class="pointer-events-none block h-[60px]" aria-hidden="true"></span>
                </div>
            @else
                @php
                    $isMore = $item['moreMenu'] ?? false;
                    $enabled = ! $isMore && Route::has($item['route']);
                    $active = $enabled && request()->routeIs($item['route'].'*');
                    $classes = 'flex min-h-[60px] flex-col items-center justify-center gap-1 text-[11px] transition '
                        .($active ? 'font-bold text-[var(--panel-primary)]' : 'text-[var(--panel-muted)]');
                @endphp

                @if ($isMore)
                    {{-- Opens the same off-canvas menu as the top-bar hamburger, bridged
                         with a window event because this component sits outside that
                         Alpine scope. --}}
                    <button type="button" @click="$dispatch('open-mobile-menu')" class="{{ $classes }}">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="{{ $icons[$item['icon']] }}"/>
                        </svg>
                        <span>{{ $item['label'] }}</span>
                    </button>
                @else
                    <a
                        href="{{ $enabled ? route($item['route']) : '#' }}"
                        @if ($enabled) wire:navigate @endif
                        @if ($active) aria-current="page" @endif
                        class="{{ $classes }}"
                    >
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="{{ $icons[$item['icon']] }}"/>
                        </svg>
                        <span>{{ $item['label'] }}</span>
                    </a>
                @endif
            @endif
        @endforeach
    </div>
</nav>