<?php
$current_page = basename($_SERVER['PHP_SELF']);
?>
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-xl border-t border-slate-200 dark:border-slate-800 pb-safe">
    <div class="flex justify-around items-center responsive-container px-2 xs:px-6" style="height: var(--nav-height);">
        <a href="index.php" class="flex flex-col items-center justify-center <?= ($current_page == 'index.php' || $current_page == 'index.html') ? 'text-primary' : 'text-slate-400 dark:text-slate-500' ?> group transition-all duration-300">
            <span class="material-symbols-outlined <?= ($current_page == 'index.php' || $current_page == 'index.html') ? 'fill-1' : '' ?>" style="font-size: var(--icon-size-base);">home</span>
            <span class="text-[7px] xs:text-clamp-xs mt-0.5 xs:mt-1 font-bold hidden xxs:block uppercase tracking-tighter xs:normal-case xs:tracking-normal">Home</span>
        </a>
        <a href="browse_cars.php" class="flex flex-col items-center justify-center <?= ($current_page == 'browse_cars.php') ? 'text-primary' : 'text-slate-400 dark:text-slate-500' ?> group transition-all duration-300">
            <span class="material-symbols-outlined <?= ($current_page == 'browse_cars.php') ? 'fill-1' : '' ?>" style="font-size: var(--icon-size-base);">explore</span>
            <span class="text-[7px] xs:text-clamp-xs mt-0.5 xs:mt-1 font-bold hidden xxs:block uppercase tracking-tighter xs:normal-case xs:tracking-normal">Browse</span>
        </a>
        <a href="my_bookings.php" class="flex flex-col items-center justify-center <?= ($current_page == 'my_bookings.php') ? 'text-primary' : 'text-slate-400 dark:text-slate-500' ?> group transition-all duration-300">
            <span class="material-symbols-outlined <?= ($current_page == 'my_bookings.php') ? 'fill-1' : '' ?>" style="font-size: var(--icon-size-base);">calendar_today</span>
            <span class="text-[7px] xs:text-clamp-xs mt-0.5 xs:mt-1 font-bold hidden xxs:block uppercase tracking-tighter xs:normal-case xs:tracking-normal">Bookings</span>
        </a>
        <a href="profile.php" class="flex flex-col items-center justify-center <?= ($current_page == 'profile.php') ? 'text-primary' : 'text-slate-400 dark:text-slate-500' ?> group transition-all duration-300">
            <span class="material-symbols-outlined <?= ($current_page == 'profile.php') ? 'fill-1' : '' ?>" style="font-size: var(--icon-size-base);">person</span>
            <span class="text-[7px] xs:text-clamp-xs mt-0.5 xs:mt-1 font-bold hidden xxs:block uppercase tracking-tighter xs:normal-case xs:tracking-normal">Profile</span>
        </a>
    </div>
</nav>
