<header x-data="{ open: false, openAdmin: false }" class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-20">

            <div class="flex-shrink-0">
    <a href="{{ route('beranda') }}" class="flex items-center gap-3 group">

        <!-- LOGO -->
        <img src="{{ asset('img/LogoBBKN.png') }}" alt="Logo BKKBN"
            class="h-10 sm:h-11 md:h-12 lg:h-14 object-contain transition-transform duration-300 group-hover:scale-105" />

        <!-- TEXT -->
        <div class="leading-tight">
            <h1 class="text-gray-800 font-bold text-sm sm:text-base md:text-lg lg:text-xl tracking-tight">
                KEMENDUKBANGGA
            </h1>
            <p class="text-[11px] sm:text-xs md:text-sm text-blue-600 font-semibold">
                Kecamatan Kanigoro
            </p>
        </div>

    </a>
</div>

            <nav class="hidden md:flex items-center">
                <ul class="flex items-center space-x-1 h-20 text-sm lg:text-base font-semibold text-gray-700">

                    <!-- Beranda -->
                    <li>
                        <a href="{{ route('beranda') }}"
                            class="h-full flex items-center px-3 lg:px-4 py-2 rounded-md transition-all duration-200
                {{ request()->routeIs('beranda') && !request()->getQueryString()
                    ? 'bg-blue-50 text-blue-600 shadow-sm'
                    : 'hover:bg-gray-50 hover:text-blue-600' }}">
                            Beranda
                        </a>
                    </li>

                    <!-- Layanan Program -->
                    <li>
                        <a href="{{ url('/#program') }}"
                            class="h-full flex items-center px-3 lg:px-4 py-2 rounded-md transition-all duration-200
                {{ request()->is('/') && request()->getRequestUri() === '/#program'
                    ? 'bg-blue-50 text-blue-600 shadow-sm'
                    : 'hover:bg-gray-50 hover:text-blue-600' }}">
                            Layanan Program
                        </a>
                    </li>

                    <!-- Konsultasi Mandiri -->
                    <li>
                        <a href="{{ route('konsultasi.mandiri') }}"
                            class="h-full flex items-center px-3 lg:px-4 py-2 rounded-md transition-all duration-200
                {{ request()->routeIs('konsultasi.mandiri')
                    ? 'bg-blue-50 text-blue-600 shadow-sm'
                    : 'hover:bg-gray-50 hover:text-blue-600' }}">
                            Ruang Edukasi & Informasi
                        </a>
                    </li>

                    <!-- Artikel -->
                    <li>
                        <a href="{{ route('articles.index') }}"
                            class="h-full flex items-center px-3 lg:px-4 py-2 rounded-md transition-all duration-200
                {{ request()->is('artikel*') || request()->routeIs('articles.*')
                    ? 'bg-blue-50 text-blue-600 shadow-sm'
                    : 'hover:bg-gray-50 hover:text-blue-600' }}">
                            Artikel
                        </a>
                    </li>

                    <!-- Produk Binaan -->
                    <li>
                        <a href="{{ route('produk.binaan') }}"
                            class="h-full flex items-center px-3 lg:px-4 py-2 rounded-md transition-all duration-200
                {{ request()->routeIs('produk.binaan')
                    ? 'bg-blue-50 text-blue-600 shadow-sm'
                    : 'hover:bg-gray-50 hover:text-blue-600' }}">
                            Produk Binaan
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('kontak.index') }}"
                            class="h-full flex items-center px-3 lg:px-4 py-2 rounded-md transition-all duration-200
        {{ request()->routeIs('kontak.index')
            ? 'bg-blue-50 text-blue-600 shadow-sm'
            : 'hover:bg-gray-50 hover:text-blue-600' }}">
                            Kontak
                        </a>
                    </li>

                </ul>

                @auth
                    <div class="relative ml-4 pl-6 border-l border-gray-200">
                        <button @click="openAdmin = !openAdmin" @click.away="openAdmin = false"
                            class="flex items-center gap-2 text-sm font-bold text-gray-600 hover:text-blue-600 focus:outline-none transition-colors">
                            <i class="fas fa-user-circle text-xl"></i>
                            <i class="fas fa-chevron-down text-[10px] transition-transform"
                                :class="openAdmin ? 'rotate-180' : ''"></i>
                        </button>

                        <div x-show="openAdmin" x-transition
                            class="absolute right-0 mt-3 w-48 bg-white rounded-xl shadow-xl border border-gray-100 py-2 z-50">
                            <a href="{{ route('admin.dashboard') }}"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold">
                                Dashboard
                            </a>
                            <hr class="my-1 border-gray-100">
                            <form action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 font-bold">
                                    Logout
                                </button>
                            </form>
                        </div>
                    </div>
                @endauth
            </nav>

            <div class="md:hidden">
                <button @click="open = !open"
                    class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg focus:outline-none transition-colors">
                    <svg x-show="!open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <svg x-show="open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div x-show="open" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
        @click.away="open = false" class="md:hidden bg-white border-t border-gray-100 shadow-xl absolute w-full z-50">

        <ul class="px-4 pt-4 pb-2 space-y-1 text-sm font-bold text-gray-700">
            <li>
                <a href="{{ route('beranda') }}"
                    class="block px-4 py-3 rounded-lg {{ request()->routeIs('beranda') && !request()->getQueryString() ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50' }}">
                    Beranda
                </a>
            </li>
            
            <li>
                <a href="{{ url('/#program') }}" 
                    class="block px-4 py-3 rounded-lg hover:bg-gray-50">
                    Layanan Program
                </a>
            </li>

            <li>
                <a href="{{ route('konsultasi.mandiri') }}"
                    class="block px-4 py-3 rounded-lg {{ request()->routeIs('konsultasi.mandiri') ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50' }}">
                    Ruang Edukasi & Informasi
                </a>
            </li>

            <li>
                <a href="{{ route('articles.index') }}"
                    class="block px-4 py-3 rounded-lg {{ request()->is('artikel*') || request()->routeIs('articles.*') ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50' }}">
                    Artikel
                </a>
            </li>

            <li>
                <a href="{{ route('produk.binaan') }}" 
                    class="block px-4 py-3 rounded-lg {{ request()->routeIs('produk.binaan') ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50' }}">
                    Produk Binaan
                </a>
            </li>

            <li>
                <a href="{{ route('kontak.index') }}" 
                    class="block px-4 py-3 rounded-lg {{ request()->routeIs('kontak.index') ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50' }}">
                    Kontak
                </a>
            </li>
        </ul>

        @auth
            <div class="mt-2 border-t border-gray-100 bg-gray-50 p-4">
                <div class="flex flex-col gap-2">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-4 mb-1">Menu Administrator
                    </p>
                    <a href="{{ route('admin.dashboard') }}"
                        class="flex items-center gap-3 px-4 py-3 text-gray-700 bg-white border border-gray-200 rounded-lg shadow-sm font-bold">
                        <i class="fas fa-th-large text-blue-600"></i> Dashboard
                    </a>
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit"
                            class="w-full flex items-center gap-3 px-4 py-3 text-red-600 bg-white border border-red-100 rounded-lg shadow-sm font-bold">
                            <i class="fas fa-power-off"></i> Logout
                        </button>
                    </form>
                </div>
            </div>
        @endauth
    </div>
</header>
