{{-- Mobile Bottom Navigation - Airbnb Style --}}
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 sm:hidden safe-area-bottom">
    <div class="flex justify-around items-center h-16 px-2">
        {{-- Explore/Home --}}
        <a href="{{ route('home') }}"
           class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('home') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('home') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="{{ request()->routeIs('home') ? '0' : '1.5' }}" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
            <span class="text-[10px] mt-1 font-medium">Explore</span>
        </a>

        {{-- Search --}}
        <a href="{{ route('listings.search') }}"
           class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('listings.search') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            <span class="text-[10px] mt-1 font-medium">Rentals</span>
        </a>

        @auth
            {{-- My Bookings --}}
            @php
                $bookingsRoute = auth()->user()->isAdmin() || auth()->user()->isHost()
                    ? (auth()->user()->isAdmin() ? 'admin.bookings' : 'host.bookings')
                    : 'user.bookings';
            @endphp
            <a href="{{ route($bookingsRoute) }}"
               class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('*.bookings') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                <span class="text-[10px] mt-1 font-medium">Bookings</span>
            </a>

            {{-- My Listings (Host/Admin only) --}}
            @if(auth()->user()->isAdmin() || auth()->user()->isHost())
                <a href="{{ route('host.listings') }}"
                   class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('host.listings') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                    <span class="text-[10px] mt-1 font-medium">Listings</span>
                </a>
            @endif

            {{-- Profile --}}
            <a href="{{ route('profile.edit') }}"
               class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('profile.edit') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                <span class="text-[10px] mt-1 font-medium">Profile</span>
            </a>
        @else
            {{-- Login --}}
            <a href="{{ route('login') }}"
               class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('login') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
                </svg>
                <span class="text-[10px] mt-1 font-medium">Login</span>
            </a>

            {{-- Register --}}
            <a href="{{ route('register') }}"
               class="flex flex-col items-center justify-center flex-1 py-2 {{ request()->routeIs('register') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                </svg>
                <span class="text-[10px] mt-1 font-medium">Register</span>
            </a>
        @endauth
    </div>
</nav>

{{-- Safe area padding for iOS --}}
<style>
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
</style>