@php
    // App-style bottom tab bar shown on small screens only. The four primary
    // destinations plus a "More" tab that opens the full slide-in sidebar
    // (which carries every other link, including the super-admin section).
    $tabs = [
        ['route' => 'dashboard',       'pattern' => 'dashboard',   'label' => __('Home'),     'icon' => 'home'],
        ['route' => 'invoices.index',  'pattern' => 'invoices.*',  'label' => __('Invoices'), 'icon' => 'document-currency-dollar'],
        ['route' => 'jobs.index',      'pattern' => 'jobs.*',      'label' => __('Jobs'),     'icon' => 'briefcase'],
        ['route' => 'quotes.index',    'pattern' => 'quotes.*',    'label' => __('Quotes'),   'icon' => 'document-text'],
    ];

    // Household-only workspace: swap the business tabs for household ones.
    if (Auth::user()?->currentTeam?->settings?->household_enabled) {
        $tabs = [
            ['route' => 'household.dashboard',      'pattern' => 'household.dashboard',  'label' => __('Home'),     'icon' => 'home'],
            ['route' => 'household.income.index',   'pattern' => 'household.income.*',   'label' => __('Income'),   'icon' => 'currency-dollar'],
            ['route' => 'household.expenses.index', 'pattern' => 'household.expenses.*', 'label' => __('Expenses'), 'icon' => 'receipt-percent'],
            ['route' => 'household.reports.index',  'pattern' => 'household.reports.*',  'label' => __('Insights'), 'icon' => 'chart-bar'],
        ];
    }
@endphp

{{--
    The dock sits on the same horizontal rhythm as the header bar and every page
    section (px-4 / sm:px-6), so the three read as one column rather than the bar
    running edge-to-edge under content that is inset. max-w-lg keeps it from
    stretching absurdly on a tablet held in portrait.
--}}
<nav
    class="pointer-events-none fixed inset-x-0 bottom-0 z-30 px-4 pb-[calc(env(safe-area-inset-bottom)+0.625rem)] sm:px-6 lg:hidden"
    aria-label="{{ __('Primary') }}"
>
    <div class="pointer-events-auto mx-auto grid max-w-lg grid-cols-5 rounded-2xl border border-slate-200/80 bg-white/85 shadow-[0_8px_30px_-8px_rgba(15,23,42,0.25)] backdrop-blur-xl">
        @foreach ($tabs as $tab)
            @php $active = request()->routeIs($tab['pattern']); @endphp
            <a
                href="{{ route($tab['route']) }}"
                wire:navigate
                @class([
                    'group relative flex min-w-0 flex-col items-center justify-center gap-0.5 rounded-2xl px-1 py-2.5 text-[10px] font-semibold transition',
                    'text-indigo-600' => $active,
                    'text-slate-500 active:bg-slate-50' => ! $active,
                ])
                @if ($active) aria-current="page" @endif
            >
                {{-- The active tab reads as a chip rather than only a colour change,
                     which survives glare and colour-blindness on a phone screen. --}}
                <span @class([
                    'flex h-8 w-full max-w-[3.25rem] items-center justify-center rounded-xl transition',
                    'bg-indigo-50 text-indigo-600' => $active,
                    'text-slate-500' => ! $active,
                ])>
                    <x-icon :name="$tab['icon']" class="h-[22px] w-[22px]" />
                </span>
                <span class="w-full truncate text-center">{{ $tab['label'] }}</span>
            </a>
        @endforeach

        <!-- More: opens the full sidebar drawer -->
        <button
            type="button"
            @click="sidebarOpen = true"
            class="group flex min-w-0 flex-col items-center justify-center gap-0.5 rounded-2xl px-1 py-2.5 text-[10px] font-semibold text-slate-500 transition active:bg-slate-50"
        >
            <span class="flex h-8 w-full max-w-[3.25rem] items-center justify-center rounded-xl text-slate-500">
                <x-icon name="ellipsis-horizontal" class="h-[22px] w-[22px]" />
            </span>
            <span class="w-full truncate text-center">{{ __('More') }}</span>
        </button>
    </div>
</nav>