<header x-data="{ mobileMenuOpen: false }" class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-gray-200 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            
            <!-- Logo & Corporate Branding -->
            <a href="{{ route('home') }}" class="flex items-center space-x-3 group">
                <img src="{{ asset('assets/logo.jpeg') }}" alt="Frantyap Homes Logo" class="h-10 w-auto object-contain">
                <div class="flex flex-col">
                    <span class="font-serif-heading font-extrabold text-1.5xl tracking-wider text-black group-hover:text-brand-blue transition-colors">FRANTYAP HOMES</span>
                    <span class="text-[10px] font-bold uppercase tracking-[0.25em] text-brand-blue">Abuja Real Estate</span>
                </div>
            </a>

            <!-- Desktop Navigation Links (All Pages Included) -->
            <nav class="hidden lg:flex items-center space-x-6 text-[11px] font-bold uppercase tracking-wider text-gray-800">
                <a href="{{ route('home') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('home') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Home</a>
                <a href="{{ route('properties.index') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('properties.*') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Properties</a>
                <a href="{{ route('lands.index') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('lands.*') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Bare Lands</a>
                <a href="{{ route('neighborhoods.index') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('neighborhoods.*') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Abuja Districts</a>
                <a href="{{ route('valuation') }}" class="hover:text-brand-blue transition-colors py-2 text-brand-blue {{ request()->routeIs('valuation') ? 'font-extrabold border-b-2 border-brand-blue' : '' }}"><i class="fa-solid fa-calculator text-brand-blue mr-1"></i> Home Valuation</a>
                <a href="{{ route('gallery.index') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('gallery.*') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Gallery</a>
                <a href="{{ route('calculator') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('calculator') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Mortgage</a>
                <a href="{{ route('agents.index') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('agents.*') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Agents</a>
                <a href="{{ route('blog.index') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('blog.*') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Insights</a>
                <a href="{{ route('contact') }}" class="hover:text-brand-blue transition-colors py-2 {{ request()->routeIs('contact') ? 'text-brand-blue font-extrabold border-b-2 border-brand-blue' : '' }}">Contact</a>
            </nav>

            <!-- Action CTAs & Auth Login Link -->
            <div class="hidden lg:flex items-center space-x-3">
                @auth
                    <a href="{{ route('agent.dashboard') }}" class="px-4 py-2 bg-brand-blue text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-darkblue transition-colors">
                        Agent Dashboard
                    </a>
                    <form action="{{ route('logout') }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="text-xs text-gray-500 font-bold hover:text-red-600">Logout</button>
                    </form>
                @endauth

                @guest
                    <a href="{{ route('login') }}" class="px-4 py-2 border border-gray-300 text-xs font-bold uppercase tracking-widest text-black hover:border-black transition-colors">
                        Agent Login
                    </a>
                    <a href="https://wa.me/2349126262525" target="_blank" class="px-4 py-2 bg-brand-blue text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-darkblue shadow-md transition-colors">
                        WhatsApp Advisor
                    </a>
                @endguest
            </div>

            <!-- Mobile Menu Trigger -->
            <div class="lg:hidden flex items-center">
                <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="p-2 text-black hover:text-brand-blue focus:outline-none">
                    <i class="fa-solid" :class="mobileMenuOpen ? 'fa-xmark text-2xl' : 'fa-bars text-2xl'"></i>
                </button>
            </div>

        </div>
    </div>

    <!-- Mobile Drawer Menu -->
    <div x-show="mobileMenuOpen" x-transition class="lg:hidden bg-white border-b border-gray-200 px-6 py-6 space-y-3">
        <a href="{{ route('home') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Home</a>
        <a href="{{ route('properties.index') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Properties</a>
        <a href="{{ route('neighborhoods.index') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Abuja Prime Districts</a>
        <a href="{{ route('valuation') }}" class="block text-xs font-bold uppercase tracking-widest text-brand-blue">Home Valuation Tool</a>
        <a href="{{ route('gallery.index') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Photo and Media Gallery</a>
        <a href="{{ route('calculator') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Mortgage Calculator</a>
        <a href="{{ route('agents.index') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Our Agents</a>
        <a href="{{ route('blog.index') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Insights and Reports</a>
        <a href="{{ route('contact') }}" class="block text-xs font-bold uppercase tracking-widest text-black">Contact Us</a>
        <div class="pt-4 border-t border-gray-100 space-y-2">
            @auth
                <a href="{{ route('agent.dashboard') }}" class="block w-full text-center py-2.5 bg-brand-blue text-white text-xs font-bold uppercase tracking-widest">Dashboard</a>
            @endauth
            @guest
                <a href="{{ route('login') }}" class="block w-full text-center py-2.5 border border-black text-black text-xs font-bold uppercase tracking-widest">Agent Login</a>
            @endguest
        </div>
    </div>
</header>
