@php
    $homeActive = request()->routeIs('home');
@endphp

<nav class="fixed inset-x-0 bottom-0 z-40 border-t border-line bg-bg-deep" aria-label="মূল নেভিগেশন">
    <div class="relative mx-auto grid w-full max-w-lg grid-cols-5 px-2 pt-1 pb-[max(env(safe-area-inset-bottom),0.5rem)]">
        <a href="{{ route('tasks.index') }}" class="flex min-h-[52px] flex-col items-center justify-center gap-0.5 rounded-xl py-1 {{ request()->routeIs('tasks.*') ? 'text-gold' : 'text-ink-muted' }}" aria-current="{{ request()->routeIs('tasks.*') ? 'page' : 'false' }}">
            <x-icon name="tasks" class="h-6 w-6"/>
            <span class="text-[11px] font-semibold">কাজ</span>
        </a>

        <a href="{{ route('team.index') }}" class="flex min-h-[52px] flex-col items-center justify-center gap-0.5 rounded-xl py-1 {{ request()->routeIs('team.*') ? 'text-gold' : 'text-ink-muted' }}" aria-current="{{ request()->routeIs('team.*') ? 'page' : 'false' }}">
            <x-icon name="team" class="h-6 w-6"/>
            <span class="text-[11px] font-semibold">টিম</span>
        </a>

        <a href="{{ route('home') }}" class="relative flex min-h-[52px] flex-col items-center justify-end pb-1 {{ $homeActive ? 'text-gold' : 'text-ink-muted' }}" aria-current="{{ $homeActive ? 'page' : 'false' }}">
            <span class="absolute -top-6 flex h-14 w-14 items-center justify-center rounded-full border shadow-lg {{ $homeActive ? 'border-gold-deep bg-gold text-bg' : 'border-line bg-surface-raised text-ink-muted' }}">
                <x-icon name="home" class="h-7 w-7"/>
            </span>
            <span class="mt-8 text-[11px] font-semibold">হোম</span>
        </a>

        <a href="{{ route('packages.index') }}" class="flex min-h-[52px] flex-col items-center justify-center gap-0.5 rounded-xl py-1 {{ request()->routeIs('packages.*') ? 'text-gold' : 'text-ink-muted' }}" aria-current="{{ request()->routeIs('packages.*') ? 'page' : 'false' }}">
            <x-icon name="package" class="h-6 w-6"/>
            <span class="text-[11px] font-semibold">প্যাকেজ</span>
        </a>

        <a href="{{ route('account.index') }}" class="flex min-h-[52px] flex-col items-center justify-center gap-0.5 rounded-xl py-1 {{ request()->routeIs('account.*') ? 'text-gold' : 'text-ink-muted' }}" aria-current="{{ request()->routeIs('account.*') ? 'page' : 'false' }}">
            <x-icon name="account" class="h-6 w-6"/>
            <span class="text-[11px] font-semibold">অ্যাকাউন্ট</span>
        </a>
    </div>
</nav>