<template>
    <nav class="fixed top-0 w-full z-50 bg-zinc-50/90 backdrop-blur-sm border-b border-zinc-300 px-6 py-4 md:px-12">
        <div class="max-w-7xl mx-auto flex items-center justify-between gap-6">
            <RouterLink class="flex items-center gap-3 shrink-0" to="/">
                <div class="w-9 h-9 md:w-10 md:h-10 rounded-lg bg-accent flex items-center justify-center shadow-md">
                    <iconify-icon class="text-white text-xl" icon="lucide:fuel"></iconify-icon>
                </div>
                <span class="text-xl md:text-2xl font-black font-display tracking-tighter text-accent">FuelAlert</span>
            </RouterLink>

            <div class="hidden lg:flex items-center gap-8 font-mono text-[11px] uppercase tracking-widest text-zinc-600">
                <a class="hover:text-accent transition-colors" href="#how-it-works">How it works</a>
                <a class="hover:text-accent transition-colors" href="#features">Why it works</a>
                <RouterLink class="hover:text-accent transition-colors" to="/pricing">Pricing</RouterLink>
            </div>

            <div class="flex items-center gap-3 md:gap-5">
                <template v-if="isAuthenticated">
                    <RouterLink
                        class="bg-accent text-white px-5 py-2 rounded-full text-sm font-bold shadow-md hover:bg-primary-dark transition-all"
                        to="/dashboard"
                    >
                        Dashboard
                    </RouterLink>
                </template>
                <template v-else>
                    <a class="text-sm font-semibold text-zinc-600 hover:text-zinc-900 transition-colors" href="/login">Login</a>
                    <a
                        class="hidden sm:inline-flex bg-accent text-white px-5 py-2 rounded-full text-sm font-bold shadow-md hover:bg-primary-dark transition-all"
                        href="/register"
                    >
                        Get started
                    </a>
                </template>
            </div>
        </div>
    </nav>
</template>

<script setup>
import { RouterLink } from 'vue-router'
import { useAuth } from '../../composables/useAuth.js'

const { isAuthenticated } = useAuth()
</script>
