<nav id="mainNav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent py-5">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center">
            <a href="{{ url('/') }}" class="flex items-center gap-2 group">
                <div class="bg-teal-deep text-white p-1.5 rounded-lg group-hover:bg-amber-gold transition-colors duration-300">
                    <i data-lucide="credit-card" class="h-6 w-6"></i>
                </div>
                <span class="text-2xl font-bold font-heading text-teal-deep">SaveSmart<span class="text-amber-gold">.lk</span></span>
            </a>

            <div class="hidden md:flex items-center space-x-8">
                <a href="{{ url('/') }}" class="text-teal-deep/80 hover:text-amber-gold font-medium transition-colors text-sm tracking-wide">Home</a>
                <a href="{{ url('/map') }}" class="text-teal-deep/80 hover:text-amber-gold font-medium transition-colors text-sm tracking-wide">Map</a>
                <a href="{{ url('/about') }}" class="text-teal-deep/80 hover:text-amber-gold font-medium transition-colors text-sm tracking-wide">About</a>
                <a href="{{ url('/contact') }}" class="text-teal-deep/80 hover:text-amber-gold font-medium transition-colors text-sm tracking-wide">Contact</a>
                @auth
                    <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : (auth()->user()->role === 'partner' ? route('partner.dashboard') : route('member.dashboard')) }}" class="text-teal-deep/80 hover:text-amber-gold font-medium transition-colors text-sm tracking-wide">Dashboard</a>
                    <form action="{{ route('logout') }}" method="post" class="inline">
                        @csrf
                        <button type="submit" class="bg-amber-gold hover:bg-amber-dark text-white px-6 py-2.5 rounded-full font-semibold transition-all duration-300 shadow-lg hover:shadow-amber-gold/30 transform hover:-translate-y-0.5">Logout</button>
                    </form>
                @else
                    <a href="{{ route('register') }}" class="text-teal-deep/80 hover:text-amber-gold font-medium transition-colors text-sm tracking-wide">Register</a>
                    <a href="{{ route('login') }}" class="bg-amber-gold hover:bg-amber-dark text-white px-6 py-2.5 rounded-full font-semibold transition-all duration-300 shadow-lg hover:shadow-amber-gold/30 transform hover:-translate-y-0.5">Login</a>
                @endauth
            </div>

            <button id="mobileMenuBtn" class="md:hidden text-teal-deep p-2" type="button">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
        </div>
    </div>

    <div id="mobileMenu" class="md:hidden bg-cream border-t border-teal-deep/10 overflow-hidden hidden">
        <div class="px-4 pt-4 pb-8 space-y-4">
            <a href="{{ url('/') }}" class="block text-teal-deep font-medium text-lg py-2 border-b border-teal-deep/5">Home</a>
            <a href="{{ url('/map') }}" class="block text-teal-deep font-medium text-lg py-2 border-b border-teal-deep/5">Map</a>
            <a href="{{ url('/about') }}" class="block text-teal-deep font-medium text-lg py-2 border-b border-teal-deep/5">About</a>
            <a href="{{ url('/contact') }}" class="block text-teal-deep font-medium text-lg py-2 border-b border-teal-deep/5">Contact</a>
            @auth
                <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : (auth()->user()->role === 'partner' ? route('partner.dashboard') : route('member.dashboard')) }}" class="block text-teal-deep font-medium text-lg py-2 border-b border-teal-deep/5">Dashboard</a>
                <form action="{{ route('logout') }}" method="post" class="mt-4">
                    @csrf
                    <button type="submit" class="block w-full bg-amber-gold text-white py-3 rounded-lg font-bold text-center">Logout</button>
                </form>
            @else
                <a href="{{ route('register') }}" class="block text-teal-deep font-medium text-lg py-2 border-b border-teal-deep/5">Register</a>
                <a href="{{ route('login') }}" class="block w-full mt-4 bg-amber-gold text-white py-3 rounded-lg font-bold text-center">Login</a>
            @endauth
        </div>
    </div>
</nav>
