---
// src/components/Nav.astro
---
<!-- Navigation -->
<nav class="fixed w-full z-50 transition-all duration-300 border-b border-white/5 bg-stone-950/80 backdrop-blur-md">
    <div class="max-w-7xl mx-auto px-6 lg:px-8 h-20 flex items-center justify-between">
        <a href="#" @click.prevent="currentPage = 'main'" class="flex items-center gap-3 group">
            <div class="w-10 h-10 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-lg border border-amber-500/20 group-hover:border-amber-500/50 transition-all shadow-glow">
                <i class="fa-solid fa-compass-drafting"></i>
            </div>
            <div class="flex flex-col">
                <span class="text-lg font-luxury font-bold tracking-wider text-white">Gebrüder Brabetz</span>
                <span class="text-[9px] font-bold text-amber-500 uppercase tracking-[0.3em] -mt-0.5">Garten- & Landschaftsbau</span>
            </div>
        </a>
        
        <div class="hidden lg:flex items-center gap-10 text-xs font-semibold uppercase tracking-widest text-stone-400">
            <a href="#standards" class="hover:text-amber-400 transition-colors">Regelwerk</a>
            <a href="#projects" class="hover:text-amber-400 transition-colors">Projekte</a>
            <a href="#competencies" class="hover:text-amber-400 transition-colors">Leistungen</a>
            <a href="#biodiversity" class="hover:text-amber-400 transition-colors">Natur</a>
            <a href="#faq" class="hover:text-amber-400 transition-colors">FAQ</a>
            <button @click="currentPage = 'page-contact'" class="bg-emerald-800 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg transition-all shadow-lg text-xs uppercase tracking-wider font-bold border border-emerald-700 hover:border-emerald-600">
                Projekt starten
            </button>
        </div>
    </div>
</nav>