<nav x-data="{ open: false, dropdown1: false, dropdown2: false }" class="bg-[#0A0A78] shadow-md fixed w-full top-0 z-50">
  <div class="container mx-auto flex justify-between items-center px-4 md:px-6 py-5">
    
    
    <div class="flex items-center">
      <img src="<?php echo e(asset('logo-ampj-navbar.png')); ?>" 
           alt="Logo AMPJ" 
           class="w-52 md:w-40 lg:w-44">
    </div>

    
    <div class="hidden md:flex items-center space-x-6 text-sm">
      
      <a href="https://ampj.ac.id" class="text-white hover:text-yellow-300 transition">Website Utama</a>

      
      <div class="relative group">
        <button class="text-white hover:text-yellow-300 flex items-center gap-1">
          Tentang Kami ▾
        </button>
        <div class="absolute hidden group-hover:block bg-white text-[#0A0A78] shadow-lg rounded-md mt-2 w-48">
          <a href="https://ampj.ac.id/tentang/" class="block px-4 py-2 hover:bg-yellow-100">Profil Kampus</a>
          <a href="https://ampj.ac.id/pimpinan/" class="block px-4 py-2 hover:bg-yellow-100">Pimpinan</a>
          <a href="https://ampj.ac.id/prodi/" class="block px-4 py-2 hover:bg-yellow-100">Program Studi</a>
          <a href="https://ampj.ac.id/kontak/" class="block px-4 py-2 hover:bg-yellow-100">Kontak</a>
        </div>
      </div>

      
      <div class="relative group">
        <button class="text-white hover:text-yellow-300 flex items-center gap-1">
          Platform ▾
        </button>
        <div class="absolute hidden group-hover:block bg-white text-[#0A0A78] shadow-lg rounded-md mt-2 w-48">
          <a href="https://elearning.ampj.ac.id" target="_blank" class="block px-4 py-2 hover:bg-yellow-100">E-Learning</a>
          <a href="https://ampj.ac.id/perpustakaan/" class="block px-4 py-2 hover:bg-yellow-100">E-Library</a>
          <a href="https://ampj.ac.id/pmb/" class="block px-4 py-2 hover:bg-yellow-100">PMB</a>
          <a href="https://ampj.ac.id/blog/" class="block px-4 py-2 hover:bg-yellow-100">Blog</a>
          <a href="https://ampj.ac.id/spmi/" class="block px-4 py-2 hover:bg-yellow-100">SPMI</a>
        </div>
      </div>

      
      <div class="flex items-center space-x-4 ml-6">
        <a href="https://instagram.com/ampj.yk/" target="_blank" class="text-white hover:text-yellow-300">IG</a>
        <a href="https://facebook.com/ampjyogyakarta" target="_blank" class="text-white hover:text-yellow-300">FB</a>
      </div>
    </div>

    
    <button @click="open = true" aria-label="Open menu" class="md:hidden text-white text-2xl">
      ☰
    </button>
  </div>

  
  <div x-show="open" 
       x-transition:enter="transition ease-out duration-300 transform"
       x-transition:enter-start="translate-x-full opacity-0"
       x-transition:enter-end="translate-x-0 opacity-100"
       x-transition:leave="transition ease-in duration-200 transform"
       x-transition:leave-start="translate-x-0 opacity-100"
       x-transition:leave-end="translate-x-full opacity-0"
       class="fixed top-0 right-0 h-full w-64 bg-[#0A0A78] shadow-2xl z-50 md:hidden">

    
    <div class="flex justify-between items-center px-6 py-4 border-b border-white/20">
      <span class="text-white font-semibold">AMPJ.AC.ID</span>
      <button @click="open = false" class="text-white text-2xl">X</button>
    </div>

    
    <div class="flex flex-col px-6 py-4 space-y-4 text-white">
      <a href="https://ampj.ac.id" class="hover:text-yellow-300" @click="open=false">Website Utama</a>

      
      <div>
        <button @click="dropdown1 = !dropdown1" class="w-full flex justify-between items-center hover:text-yellow-300">
          Tentang Kami <span x-text="dropdown1 ? '▴' : '▾'"></span>
        </button>
        <div x-show="dropdown1" x-transition class="ml-4 mt-2 space-y-2 text-sm">
          <a href="/tentang" class="block hover:text-yellow-300">Profil Kampus</a>
          <a href="/pimpinan" class="block hover:text-yellow-300">Pimpinan</a>
          <a href="/prodi" class="block hover:text-yellow-300">Program Studi</a>
          <a href="/kontak" class="block hover:text-yellow-300">Kontak</a>
        </div>
      </div>

      
      <div>
        <button @click="dropdown2 = !dropdown2" class="w-full flex justify-between items-center hover:text-yellow-300">
          Platform <span x-text="dropdown2 ? '▴' : '▾'"></span>
        </button>
        <div x-show="dropdown2" x-transition class="ml-4 mt-2 space-y-2 text-sm">
          <a href="https://elearning.ampj.ac.id" target="_blank" class="block hover:text-yellow-300">E-Learning</a>
          <a href="/perpustakaan" class="block hover:text-yellow-300">E-Library</a>
          <a href="/pmb" class="block hover:text-yellow-300">PMB</a>
          <a href="/blog" class="block hover:text-yellow-300">Blog</a>
          <a href="/spmi" class="block hover:text-yellow-300">SPMI</a>
        </div>
      </div>
    </div>
  </div>
</nav>
<?php /**PATH D:\ampj\laravel\ampj-web\resources\views/sections/navbar.blade.php ENDPATH**/ ?>