{{-- Navbar Component --}}
<header
    x-data="{
        mob: false,
        profileOpen: false,
        serviceOpen: false,
        pubOpen: false
    }"
    class="sticky top-0 z-50"
    style="background: transparent;"
>
    <div class="max-w-screen-xl mx-auto px-6 py-3 flex items-center gap-4">

        {{-- ── Logo Pill (frosted glass / blur) ── --}}
        <a href="{{ route('home') }}" class="logo-pill rounded-full flex items-center gap-3 px-4 py-8 flex-shrink-0 no-underline">
            <div class="w-11 h-11 rounded-full border-2 flex items-center justify-center bg-white relative flex-shrink-0 shadow-md"
                 style="border-color:#1a6e3c;">
                <i class="fa fa-mosque text-xl" style="color:#1a6e3c;"></i>
                <div class="absolute inset-0 rounded-full border opacity-50"
                     style="border-color:#b8972a;transform:scale(1.12);"></div>
            </div>
            <div class="w-px h-9 bg-white opacity-30 hidden sm:block"></div>
            <div class="hidden sm:block leading-tight select-none">
                <div class="font-black leading-none" style="color:#b8972a;letter-spacing:.05em;font-size:1.25rem;">LPH</div>
                <div class="text-white opacity-60 font-semibold" style="font-size:8px;letter-spacing:.12em;">SALMAN ITB</div>
            </div>
        </a>

        {{-- Spacer --}}
        <div class="flex-1"></div>

        {{-- ── Menu Pill (opaque, desktop) ── --}}
        <nav class="menu-pill rounded-full hidden md:flex items-center px-2 py-1.5 gap-0.5">

            {{-- HOME --}}
            <a href="{{ route('home') }}#home"
               class="nav-item text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full {{ request()->routeIs('home') ? 'nav-active' : '' }}">
                HOME
            </a>

            {{-- PROFILE dropdown --}}
            <div class="relative" @mouseenter="profileOpen=true" @mouseleave="profileOpen=false">
                <button class="nav-item text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full flex items-center gap-1 {{ request()->routeIs('profile.*') ? 'nav-active' : '' }}">
                    PROFILE
                    <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="profileOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 translate-y-1"
                     class="pill-dropdown">
                    <a href="{{ route('profile.page.sejarah') }}"
                       class="dropdown-item {{ request()->routeIs('profile.page.sejarah') ? 'active' : '' }}">Sejarah</a>
                    <a href="{{ route('profile.page.tentang') }}"
                       class="dropdown-item {{ request()->routeIs('profile.page.tentang') ? 'active' : '' }}">Tentang</a>
                    <a href="{{ route('profile.page.struktur') }}"
                       class="dropdown-item {{ request()->routeIs('profile.page.struktur') ? 'active' : '' }}">Struktur Organisasi</a>
                    <a href="{{ route('profile.page.visi-misi') }}"
                       class="dropdown-item {{ request()->routeIs('profile.page.visi-misi') ? 'active' : '' }}">Visi &amp; Misi</a>
                </div>
            </div>

            {{-- SERVICE dropdown --}}
            <div class="relative" @mouseenter="serviceOpen=true" @mouseleave="serviceOpen=false">
                <button class="nav-item text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full flex items-center gap-1 {{ request()->routeIs('service.*') ? 'nav-active' : '' }}">
                    SERVICE
                    <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="serviceOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 translate-y-1"
                     class="pill-dropdown">
                    <a href="{{ route('service.layanan') }}"
                       class="dropdown-item {{ request()->routeIs('service.layanan') ? 'active' : '' }}">Layanan Pemeriksaan Halal</a>
                    <a href="{{ route('service.tarif') }}"
                       class="dropdown-item {{ request()->routeIs('service.tarif') ? 'active' : '' }}">Tarif Layanan</a>
                    <a href="{{ route('service.laboratorium') }}"
                       class="dropdown-item {{ request()->routeIs('service.laboratorium') ? 'active' : '' }}">Pengujian Laboratorium</a>
                </div>
            </div>

            {{-- PUBLICATION dropdown --}}
            <div class="relative" @mouseenter="pubOpen=true" @mouseleave="pubOpen=false">
                <button class="nav-item text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full flex items-center gap-1 {{ request()->routeIs('publikasi.*') ? 'nav-active' : '' }}">
                    PUBLICATION
                    <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="pubOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 translate-y-1"
                     class="pill-dropdown">
                    <a href="{{ route('publikasi.index', ['category' => 'artikel']) }}"
                       class="dropdown-item {{ request()->routeIs('publikasi.index') && request()->query('category') === 'artikel' ? 'active' : '' }}">Artikel</a>
                    <a href="{{ route('publikasi.index', ['category' => 'aktivitas']) }}"
                       class="dropdown-item {{ request()->routeIs('publikasi.index') && request()->query('category') === 'aktivitas' ? 'active' : '' }}">Aktivitas</a>
                    <a href="{{ route('publikasi.index', ['category' => 'regulasi']) }}"
                       class="dropdown-item {{ request()->routeIs('publikasi.index') && request()->query('category') === 'regulasi' ? 'active' : '' }}">Regulasi</a>
                </div>
            </div>

            {{-- CONTACT --}}
            <a href="{{ route('home') }}#contact"
               class="nav-item text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full">
                CONTACT
            </a>

            {{-- Divider --}}
            <div class="w-px h-5 mx-1" style="background:rgba(255,255,255,0.12);"></div>

            {{-- Language icon --}}
            <button class="icon-btn rounded-full w-8 h-8 flex items-center justify-center">
                <i class="fa fa-language text-white text-base"></i>
            </button>

            {{-- Login / Dashboard --}}
            @auth
                <a href="{{ route('dashboard') }}"
                   class="ml-1 text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full border transition-all"
                   style="border-color:rgba(26,110,60,0.7);color:#6ee7a0;"
                   onmouseover="this.style.background='rgba(26,110,60,0.3)'"
                   onmouseout="this.style.background=''">
                    <i class="fa fa-user text-xs mr-1"></i> Dashboard
                </a>
            @else
                <a href="{{ route('login') }}"
                   class="ml-1 text-xs font-bold uppercase tracking-widest px-4 py-2 rounded-full border transition-all"
                   style="border-color:rgba(26,110,60,0.7);color:#6ee7a0;"
                   onmouseover="this.style.background='rgba(26,110,60,0.3)'"
                   onmouseout="this.style.background=''">
                    <i class="fa fa-sign-in-alt text-xs mr-1"></i> Login
                </a>
            @endauth

        </nav>

        {{-- ── Hamburger Pill (mobile only) ── --}}
        <div class="menu-pill rounded-full flex md:hidden items-center px-3 py-2">
            <button @click="mob=!mob" class="text-white focus:outline-none">
                <i :class="mob ? 'fa fa-times' : 'fa fa-bars'" class="text-base w-5 text-center"></i>
            </button>
        </div>

    </div>

    {{-- ── Mobile dropdown (UNCHANGED) ── --}}
    <div x-show="mob" x-cloak x-transition
         class="md:hidden bg-white border-t px-6 py-4 space-y-1 text-sm font-bold uppercase tracking-wider text-[#1a6e3c]">
        <a href="{{ route('home') }}#home"
           class="block py-2 {{ request()->routeIs('home') ? 'text-[#b8972a]' : '' }}">Home</a>
        <div class="border-t border-gray-100 pt-2 mt-1">
            <div class="text-[10px] text-gray-400 mb-1">PROFILE</div>
            <a href="{{ route('profile.page.sejarah') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('profile.page.sejarah') ? 'text-[#b8972a]' : '' }}">Sejarah</a>
            <a href="{{ route('profile.page.tentang') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('profile.page.tentang') ? 'text-[#b8972a]' : '' }}">Tentang</a>
            <a href="{{ route('profile.page.struktur') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('profile.page.struktur') ? 'text-[#b8972a]' : '' }}">Struktur Organisasi</a>
            <a href="{{ route('profile.page.visi-misi') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('profile.page.visi-misi') ? 'text-[#b8972a]' : '' }}">Visi &amp; Misi</a>
        </div>
        <div class="border-t border-gray-100 pt-2 mt-1">
            <div class="text-[10px] text-gray-400 mb-1">SERVICE</div>
            <a href="{{ route('service.layanan') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('service.layanan') ? 'text-[#b8972a]' : '' }}">Layanan Pemeriksaan Halal</a>
            <a href="{{ route('service.tarif') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('service.tarif') ? 'text-[#b8972a]' : '' }}">Tarif Layanan</a>
            <a href="{{ route('service.laboratorium') }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('service.laboratorium') ? 'text-[#b8972a]' : '' }}">Pengujian Laboratorium</a>
        </div>
        <div class="border-t border-gray-100 pt-2 mt-1">
            <div class="text-[10px] text-gray-400 mb-1">PUBLICATION</div>
            <a href="{{ route('publikasi.index', ['category' => 'artikel']) }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('publikasi.index') && request()->query('category') === 'artikel' ? 'text-[#b8972a]' : '' }}">Artikel</a>
            <a href="{{ route('publikasi.index', ['category' => 'aktivitas']) }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('publikasi.index') && request()->query('category') === 'aktivitas' ? 'text-[#b8972a]' : '' }}">Aktivitas</a>
            <a href="{{ route('publikasi.index', ['category' => 'regulasi']) }}"
               class="block py-1.5 pl-3 text-xs {{ request()->routeIs('publikasi.index') && request()->query('category') === 'regulasi' ? 'text-[#b8972a]' : '' }}">Regulasi</a>
        </div>
        <div class="border-t border-gray-100 pt-2 mt-1">
            <a href="{{ route('home') }}#contact" class="block py-2">Contact</a>
        </div>
        @auth
            <a href="{{ route('dashboard') }}" class="block py-2 border-t border-gray-100 pt-2 mt-1">Dashboard</a>
        @else
            <a href="{{ route('login') }}" class="block py-2 border-t border-gray-100 pt-2 mt-1">Login</a>
        @endauth
    </div>

</header>

{{-- ── Required CSS (tambahkan ke app.css atau layout <style>) ── --}}
<style>
    /* Logo pill – frosted glass */
    .logo-pill {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px) saturate(200%);
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.4);
        text-decoration: none;
    }

    /* Menu pill – solid opaque */
    .menu-pill {
        background: rgb(20, 85, 48);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 8px 40px rgba(5,18,55,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    /* Nav item base */
    .nav-item {
        position: relative;
        color: rgba(255,255,255,0.72);
        transition: color 0.2s, background 0.2s;
        letter-spacing: 0.08em;
        cursor: pointer;
        background: transparent;
        border: none;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    .nav-item:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.10);
    }
    .nav-item.nav-active,
    .nav-item:focus-visible {
        color: #ffffff;
        background: rgba(255,255,255,0.14);
    }

    /* Active indicator dot under nav-active */
    .nav-item.nav-active::after {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #b8972a;
    }

    /* Icon button */
    .icon-btn {
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.18);
        transition: background 0.2s;
        cursor: pointer;
    }
    .icon-btn:hover { background: rgba(255,255,255,0.22); }

    /* Dropdown panel */
    .pill-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 220px;
        background: rgb(26, 110, 60);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 14px;
        padding: 6px;
        box-shadow: 0 16px 48px rgba(0,0,0,0.35);
        z-index: 100;
    }
    /* Arrow pointer */
    .pill-dropdown::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: rgb(26, 110, 60);
        border-left: 1px solid rgba(255,255,255,0.10);
        border-top: 1px solid rgba(255,255,255,0.10);
    }

    /* Dropdown item */
    .dropdown-item {
        display: block;
        padding: 9px 14px;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.70);
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
        white-space: nowrap;
    }
    .dropdown-item:hover {
        background: rgba(255,255,255,0.10);
        color: #ffffff;
    }

    /* Dropdown item aktif */
    .dropdown-item.active {
        background: rgba(255,255,255,0.14);
        color: #ffffff;
        position: relative;
        padding-left: 22px;
    }
    .dropdown-item.active::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #b8972a;
    }

    [x-cloak] { display: none !important; }
</style>