{{-- Homepage Navbar --}}
<nav class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
    <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">

        {{-- Logo --}}
        <a href="{{ route('homepage.index') }}" class="flex items-center gap-2.5">
            <div class="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center shadow-sm shadow-indigo-200">
                <x-heroicon-o-bolt class="w-4 h-4 text-white"/>
            </div>
            <span class="font-bold text-gray-900 text-lg tracking-tight">aziros</span>
        </a>

        {{-- Links (desktop) --}}
        <div class="hidden md:flex items-center gap-7 text-sm font-medium text-gray-500">
            <a href="{{ route('homepage.index') }}#features" class="hover:text-indigo-600 transition-colors">Features</a>
            <a href="{{ route('homepage.index') }}#how-it-works" class="hover:text-indigo-600 transition-colors">So funktioniert's</a>
            <a href="{{ route('homepage.index') }}#app" class="hover:text-indigo-600 transition-colors">App</a>
            <a href="{{ route('homepage.preise') }}" class="hover:text-indigo-600 transition-colors">Preise</a>
            <a href="{{ route('homepage.ueber-uns') }}" class="hover:text-indigo-600 transition-colors">Über uns</a>
            <a href="{{ route('homepage.kontakt') }}" class="hover:text-indigo-600 transition-colors">Kontakt</a>
        </div>

        {{-- CTA --}}
        <div class="flex items-center gap-3">
            <a href="{{ route('login') }}"
               class="hidden sm:block text-sm font-medium text-gray-600 hover:text-indigo-600 transition-colors">
                Anmelden
            </a>
            <a href="{{ route('register') }}"
               class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-200">
                Kostenlos starten
                <x-heroicon-o-arrow-right class="w-3.5 h-3.5"/>
            </a>
        </div>

    </div>
</nav>
