@include('layout.mobile-navbar')

<!-- Desktop Navbar -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-[200] bg-navy/[0.92] backdrop-blur-md border-b border-gold/[0.15] px-8 flex items-center justify-between h-16 transition-all duration-300">
    <a href="{{ route('home') }}" class="font-serif text-[1.55rem] font-semibold tracking-[.12em] text-white no-underline z-10">
        <img src="{{ asset('assets/img/logo-azrago-sm.png') }}" class="h-5" alt="" />
    </a>
    <ul class="hidden md:flex gap-8 list-none">
        <li>
            <a href="{{ route('home') }}" class="nav-link relative {{ request()->routeIs('home') ? 'text-gold-light' : 'text-white/80' }} text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">Home</a>
        </li>
        <li class="nav-item has-dropdown">
            <a href="#" class="nav-link relative {{ request()->routeIs('packages.experiences') ? 'text-gold-light' : 'text-white/80' }} text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">Experiences</a>
            <div class="nav-dropdown">
                <a href="{{ route('packages.experiences', ['location' => 'Yogyakarta']) }}">Yogyakarta Experiences</a>
                <a href="{{ route('packages.experiences', ['location' => 'Bali']) }}">Bali Experiences</a>
            </div>
        </li>
        <li class="nav-item has-dropdown">
            <a href="#" class="nav-link relative {{ request()->routeIs('packages.destinations') ? 'text-gold-light' : 'text-white/80' }} text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">Destinations</a>
            <div class="nav-dropdown">
                <a href="{{ route('packages.destinations', ['location' => 'Yogyakarta']) }}">Yogyakarta</a>
                <a href="{{ route('packages.destinations', ['location' => 'Bali']) }}">Bali</a>
            </div>
        </li>
        <li class="nav-item has-dropdown">
            <a href="#" class="nav-link relative text-white/80 text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">Corporate & Educational</a>
            <div class="nav-dropdown">
                <a href="#">Study Tours</a>
                <a href="#">Corporate Retreat</a>
                <a href="#">Summer Camp</a>
            </div>
        </li>
        <li class="nav-item has-dropdown">
            <a href="#" class="nav-link relative text-white/80 text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">Services</a>
            <div class="nav-dropdown">
                <a href="#">DMC Services</a>
                <a href="#">Plan Your Trip</a>
            </div>
        </li>
        <li class="nav-item has-dropdown">
            <a href="#" class="nav-link relative text-white/80 text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">Resources</a>
            <div class="nav-dropdown">
                <a href="#">Top 10 Itineraries</a>
                <a href="#">Download Catalogue</a>
            </div>
        </li>
        <li>
            <a href="{{ route('articles.index') }}" class="nav-link relative {{ request()->routeIs('articles.*') ? 'text-gold-light' : 'text-white/80' }} text-[.82rem] tracking-[.06em] no-underline hover:text-gold-light transition-colors">
                Indonesia Travel Advice
            </a>
        </li>
    </ul>
    <a href="{{ route('contact') }}" class="hidden md:inline-block border border-gold text-gold px-5 py-2 text-[.8rem] tracking-[.08em] rounded-sm hover:bg-gold hover:text-navy transition-all no-underline">Contact</a>
    <button id="hamburger" aria-label="Toggle menu" class="md:hidden flex flex-col gap-[5px] cursor-pointer p-2 z-[201] bg-transparent border-none">
        <span class="block w-[22px] h-[1.5px] bg-white transition-all duration-300 origin-center"></span>
        <span class="block w-[22px] h-[1.5px] bg-white transition-all duration-300 origin-center"></span>
        <span class="block w-[22px] h-[1.5px] bg-white transition-all duration-300 origin-center"></span>
    </button>
</nav>