{{-- Liquid Glass Sticky Navbar — DESIGN.md v2 --}}
<div class="fixed top-0 left-0 right-0 z-50 flex justify-center pt-5 px-4" id="site-header">
    <header
        id="glass-navbar"
        class="w-full max-w-5xl transition-all duration-300"
        style="
            backdrop-filter: blur(50px);
            -webkit-backdrop-filter: blur(50px);
            background: rgba(255,255,255,0.3);
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,0.1);
            box-shadow: inset 0px 4px 4px rgba(255,255,255,0.25), 0 8px 32px rgba(0,132,255,0.08);
            padding: 10px 20px;
        "
    >
        <div class="flex items-center justify-between gap-6">
            <!-- Logo -->
            <a href="{{ route('landing') }}" class="flex items-center gap-2 flex-shrink-0 group">
                <div class="w-8 h-8 bg-primary text-white rounded-lg flex items-center justify-center transition-all duration-200 group-hover:scale-105" style="box-shadow: 0 2px 8px rgba(0,132,255,0.4);">
                    <iconify-icon icon="ph:check-square-fill" width="18" height="18"></iconify-icon>
                </div>
                <span style="font-family:'Fustat',sans-serif; font-weight:800; font-size:18px; color:#0F172A; letter-spacing:-0.3px;">Musyawara</span>
            </a>

            <!-- Desktop Navigation -->
            <nav class="hidden md:flex items-center gap-1">
                <a href="{{ route('landing') }}" class="px-3 py-2 rounded-lg text-sm font-medium text-dark hover:bg-black/[0.05] transition-colors duration-200">Beranda</a>
                <a href="#features"     class="px-3 py-2 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors duration-200">Fitur</a>
                <a href="#how-it-works" class="px-3 py-2 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors duration-200">Cara Kerja</a>
                <a href="#events"       class="px-3 py-2 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors duration-200">Event Aktif</a>
            </nav>

            <!-- CTA / Auth Actions -->
            <div class="hidden md:flex items-center gap-3 flex-shrink-0">
                @auth
                    @if(in_array(auth()->user()->role, ['super_admin','organizer']))
                        <a href="{{ route('admin.dashboard') }}" class="btn-secondary text-sm px-4 py-2 min-h-0 !rounded-lg">Dashboard</a>
                    @endif
                    <form action="{{ route('logout') }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="btn-primary text-sm px-4 py-2 min-h-0 !rounded-lg">Keluar</button>
                    </form>
                @else
                    {{-- <a href="{{ route('login') }}" class="text-sm font-medium text-graytext hover:text-dark transition-colors duration-200">Login Organizer</a> --}}
                    <a href="#events" class="btn-primary text-sm px-5 py-2 min-h-0 !rounded-lg inline-flex items-center gap-1.5">
                        Mulai Sekarang
                        <iconify-icon icon="ph:arrow-right" width="14"></iconify-icon>
                    </a>
                @endauth
            </div>

            <!-- Mobile Menu Button -->
            <button
                class="md:hidden flex items-center justify-center w-9 h-9 rounded-lg hover:bg-black/[0.05] text-dark transition-colors duration-200 focus:outline-none"
                id="mobile-menu-btn"
                aria-label="Buka menu"
            >
                <iconify-icon icon="ph:list" width="22" height="22"></iconify-icon>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="pt-3 pb-2 border-t border-black/[0.06] mt-3 flex flex-col gap-1">
                <a href="{{ route('landing') }}" class="px-3 py-2.5 rounded-lg text-sm font-medium text-dark hover:bg-black/[0.05] transition-colors">Beranda</a>
                <a href="#features"     class="px-3 py-2.5 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors">Fitur</a>
                <a href="#how-it-works" class="px-3 py-2.5 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors">Cara Kerja</a>
                <a href="#events"       class="px-3 py-2.5 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors">Event Aktif</a>
                <div class="h-px bg-black/[0.06] my-1"></div>
                @auth
                    @if(in_array(auth()->user()->role, ['super_admin','organizer']))
                        <a href="{{ route('admin.dashboard') }}" class="btn-secondary w-full text-sm justify-center mt-1">Dashboard</a>
                    @endif
                    <form action="{{ route('logout') }}" method="POST" class="w-full">
                        @csrf
                        <button type="submit" class="btn-primary w-full text-sm mt-1">Keluar</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="px-3 py-2.5 rounded-lg text-sm font-medium text-graytext hover:text-dark hover:bg-black/[0.05] transition-colors">Login Organizer</a>
                    <a href="#events" class="btn-primary w-full text-sm justify-center mt-1">Mulai Sekarang</a>
                @endauth
            </div>
        </div>
    </header>
</div>

<!-- Spacer agar konten tidak tertutup navbar -->
<div class="h-[88px]"></div>

<script>
    document.getElementById('mobile-menu-btn').addEventListener('click', function () {
        const menu = document.getElementById('mobile-menu');
        menu.classList.toggle('hidden');
    });
</script>