<nav id="siteHeader" class="bg-white border-b border-gray-200 sticky top-0 z-50">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between gap-4">

        <!-- LEFT -->
        <div class="flex items-center gap-6 min-w-0">

            <a href="<?= base_url() ?>" data-link class="flex items-center gap-3 shrink-0">
                <img src="<?= base_url() ?>/assets/img/general/<?= htmlspecialchars(setting('site_logo', 'logo.png')) ?>"
                    alt="Driftly"
                    class="h-12 sm:h-14 lg:h-16 w-auto">
            </a>

            <div class="hidden md:flex items-center gap-6">
                <a href="<?= base_url('/') ?>" data-link
                    class="text-sm lg:text-base font-semibold text-gray-600 hover:text-black transition">
                    Find a ride
                </a>

                <a href="/driftly/public/" data-link
                    class="text-sm lg:text-base font-semibold text-gray-600 hover:text-black transition">
                    Offer a ride
                </a>
            </div>

        </div>

        <!-- RIGHT -->
        <div class="flex items-center gap-2 sm:gap-4 shrink-0">

            <?php if (isLoggedIn()): ?>

                <?php $user = auth(); ?>

                <a href="<?= base_url('/') ?>/account"
                    class="hidden sm:inline-flex text-sm font-semibold text-[#0F172A] hover:text-[#06B6D4] transition">
                    Hello, <?= htmlspecialchars($user['name']) ?>
                </a>

                <a href="/driftly/public/logout"
                    class="h-10 sm:h-11 px-4 sm:px-5 rounded-2xl bg-[#0F172A] text-white text-sm font-semibold flex items-center justify-center hover:opacity-90 transition">
                    Logout
                </a>

            <?php else: ?>

                <a href="/driftly/public/login"
                    class="h-10 sm:h-11 px-3 sm:px-4 rounded-2xl text-sm font-semibold text-[#0F172A] hover:text-[#06B6D4] transition flex items-center justify-center">
                    Login
                </a>

                <a href="/driftly/public/register"
                    class="h-10 sm:h-11 px-4 sm:px-5 rounded-2xl bg-[#0F172A] text-white text-sm font-semibold flex items-center justify-center hover:opacity-90 transition">
                    Register
                </a>

            <?php endif; ?>

        </div>

    </div>

</nav>