@auth
    <nav
        class="fixed inset-x-0 bottom-0 z-50 flex justify-center px-3 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))] pt-2 pointer-events-none md:hidden"
        aria-label="Main navigation"
    >
        <div
            class="pointer-events-auto flex w-full max-w-lg items-stretch justify-between gap-0 rounded-[2rem] p-1 border border-white/50 bg-gradient-to-b from-background/[0.72] to-background/[0.48] shadow-[0_14px_44px_-12px_rgba(0,0,0,0.22),inset_0_1px_0_0_rgba(255,255,255,0.65)] backdrop-blur-2xl backdrop-saturate-[1.75] dark:border-white/10 dark:from-background/[0.85] dark:to-background/[0.55] dark:shadow-[0_14px_44px_-12px_rgba(0,0,0,0.5)]"
        >
            <a
                href="{{ url('/') }}"
                wire:navigate
                class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-[1.125rem] px-1 py-2 text-[10px] font-semibold leading-none tracking-tight transition-[color,background,box-shadow] duration-200 ease-out sm:text-[11px] {{ request()->is('/') ? 'bg-foreground/[0.09] text-foreground shadow-[inset_0_1px_0_0_rgba(255,255,255,0.55)]' : 'text-muted-foreground' }}"
            >
                <svg class="h-[1.15rem] w-[1.15rem] shrink-0 opacity-90 sm:h-5 sm:w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                <span class="truncate max-w-full px-0.5">{{ __('Home') }}</span>
            </a>
            <a
                href="{{ route('collabs.board') }}"
                class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-[1.125rem] px-1 py-2 text-[10px] font-semibold leading-none tracking-tight transition-[color,background,box-shadow] duration-200 ease-out sm:text-[11px] {{ request()->routeIs('collabs.board') ? 'bg-foreground/[0.09] text-foreground shadow-[inset_0_1px_0_0_rgba(255,255,255,0.55)]' : 'text-muted-foreground' }}"
            >
                <svg class="h-[1.15rem] w-[1.15rem] shrink-0 opacity-90 sm:h-5 sm:w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
                <span class="truncate max-w-full px-0.5">{{ __('Board') }}</span>
            </a>
            <a
                href="{{ route('collabs.settings') }}"
                class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-[1.125rem] px-1 py-2 text-[10px] font-semibold leading-none tracking-tight transition-[color,background,box-shadow] duration-200 ease-out sm:text-[11px] {{ request()->routeIs('collabs.settings') ? 'bg-foreground/[0.09] text-foreground shadow-[inset_0_1px_0_0_rgba(255,255,255,0.55)]' : 'text-muted-foreground' }}"
            >
                <svg class="h-[1.15rem] w-[1.15rem] shrink-0 opacity-90 sm:h-5 sm:w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                <span class="truncate max-w-full px-0.5">{{ __('Settings') }}</span>
            </a>
            <a
                href="{{ route('profile') }}"
                wire:navigate
                class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-[1.125rem] px-1 py-2 text-[10px] font-semibold leading-none tracking-tight transition-[color,background,box-shadow] duration-200 ease-out sm:text-[11px] {{ request()->routeIs('profile') ? 'bg-foreground/[0.09] text-foreground shadow-[inset_0_1px_0_0_rgba(255,255,255,0.55)]' : 'text-muted-foreground' }}"
            >
                <svg class="h-[1.15rem] w-[1.15rem] shrink-0 opacity-90 sm:h-5 sm:w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                <span class="truncate max-w-full px-0.5">{{ __('Profile') }}</span>
            </a>
        </div>
    </nav>
@endauth
