{{-- resources/views/layouts/navbar.blade.php --}}
@php
    $profilNav = \App\Models\ProfilSekolah::first();
@endphp
<nav class="navbar-custom" style="background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.08); padding: 0.9rem 0; position: sticky; top:0; z-index:1050;">
  <div class="container" style="display:flex; align-items:center; justify-content:space-between; gap:1rem;">
    
    <a href="{{ url('/') }}#home" class="navbar-brand" style="font-family:'Cairo',sans-serif; font-size:1.4rem; font-weight:900; background:linear-gradient(135deg,#0B2C5E 0%,#1565C0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:flex; align-items:center; gap:10px; text-decoration:none; white-space:nowrap;">
      <img src="{{ $profilNav && $profilNav->logo_path ? asset('storage/'.$profilNav->logo_path) : 'https://dummyimage.com/40x40/1565C0/fff.png&text=MA' }}"
           alt="Logo"
           style="width:34px; height:34px; object-fit:contain; border-radius:6px; background:white; padding:2px; box-shadow:0 2px 6px rgba(0,0,0,0.1);">
      
      <span>{{ $profilNav->nama_madrasah ?? 'MA Al Idrus Lengkong' }}</span>
    </a>

    <div class="nav-menu-desktop" style="display:flex; align-items:center; gap:1.5rem; flex-wrap:nowrap;">
      <a href="{{ url('/') }}#home" class="nav-link" style="font-weight:500; color:#1F2937; text-decoration:none;">Beranda</a>
      
      <div class="dropdown custom-dropdown">
        <a href="#" class="nav-link dropdown-toggle" id="dropdownTentang" data-bs-toggle="dropdown" aria-expanded="false" style="font-weight:500; color:#1F2937; text-decoration:none;">
            Tentang
        </a>
        <ul class="dropdown-menu shadow-sm border-0 mt-2" aria-labelledby="dropdownTentang" style="border-radius: 12px; padding: 0.5rem;">
          <li><a class="dropdown-item py-2 rounded-2" href="{{ url('/') }}#about">Profil Madrasah</a></li>
          <li><a class="dropdown-item py-2 rounded-2" href="{{ route('public.guru') }}">Direktori Guru & Staff</a></li>
          <li><a class="dropdown-item py-2 rounded-2" href="{{ route('public.siswa') }}">Direktori Santri/Siswa</a></li>
        </ul>
      </div>

      <div class="dropdown custom-dropdown">
        <a href="#" class="nav-link dropdown-toggle" id="dropdownProgram" data-bs-toggle="dropdown" aria-expanded="false" style="font-weight:500; color:#1F2937; text-decoration:none;">
            Program
        </a>
        <ul class="dropdown-menu shadow-sm border-0 mt-2" aria-labelledby="dropdownProgram" style="border-radius: 12px; padding: 0.5rem;">
          <li><a class="dropdown-item py-2 rounded-2" href="{{ url('/') }}#programs">Program Unggulan</a></li>
          <li><a class="dropdown-item py-2 rounded-2" href="{{ route('public.ekskul') }}">Ekstrakurikuler</a></li>
        </ul>
      </div>

      <a href="{{ url('/') }}#gallery" class="nav-link" style="font-weight:500; color:#1F2937; text-decoration:none;">Galeri</a>
      <a href="{{ url('/') }}#news" class="nav-link" style="font-weight:500; color:#1F2937; text-decoration:none;">Berita</a>
      <a href="{{ url('/') }}#ppdb" class="nav-link" style="font-weight:500; color:#1F2937; text-decoration:none;">PPDB</a>
      <a href="{{ url('/') }}#contact" class="nav-link" style="font-weight:500; color:#1F2937; text-decoration:none;">Kontak</a>
      
      <a href="{{ route('login') }}" class="btn-login ms-2" style="background:linear-gradient(135deg,#1565C0 0%,#1E88E5 100%); color:white; padding:0.55rem 1.3rem; border-radius:50px; font-weight:600; text-decoration:none; box-shadow:0 4px 15px rgba(30,136,229,0.3); white-space:nowrap;">
        <i class="bi bi-box-arrow-in-right me-1"></i> Login
      </a>
    </div>

    <button class="navbar-toggler-mobile" onclick="document.getElementById('mobileMenu').classList.toggle('show')" style="display:none; background:none; border:1px solid #1565C0; border-radius:6px; padding:6px 10px; color:#1565C0; font-size:1.4rem;">
        <i class="bi bi-list"></i>
    </button>
  </div>
  
  <div id="mobileMenu" style="display:none; background:white; border-top:1px solid #eee; padding:1.5rem 1rem;">
    <a href="{{ url('/') }}#home" style="display:block; padding:0.5rem 0; color:#1F2937; text-decoration:none; font-weight: 500;">Beranda</a>
    <div style="font-weight:700; padding:0.5rem 0; color:#1565C0; border-bottom: 1px dashed #eee; margin-top: 0.5rem;">Tentang Kami</div>
    <div class="ps-3 mb-2 mt-2">
        <a href="{{ url('/') }}#about" style="display:block; padding:0.4rem 0; color:#6B7280; text-decoration:none;"><i class="bi bi-dash text-muted me-1"></i> Profil Madrasah</a>
        <a href="{{ route('public.guru') }}" style="display:block; padding:0.4rem 0; color:#6B7280; text-decoration:none;"><i class="bi bi-dash text-muted me-1"></i> Direktori Guru & Staff</a>
        <a href="{{ route('public.siswa') }}" style="display:block; padding:0.4rem 0; color:#6B7280; text-decoration:none;"><i class="bi bi-dash text-muted me-1"></i> Direktori Santri/Siswa</a>
    </div>

    <div style="font-weight:700; padding:0.5rem 0; color:#1565C0; border-bottom: 1px dashed #eee; margin-top: 0.5rem;">Program & Akademik</div>
    <div class="ps-3 mb-2 mt-2">
        <a href="{{ url('/') }}#programs" style="display:block; padding:0.4rem 0; color:#6B7280; text-decoration:none;"><i class="bi bi-dash text-muted me-1"></i> Program Unggulan</a>
        <a href="{{ route('public.ekskul') }}" style="display:block; padding:0.4rem 0; color:#6B7280; text-decoration:none;"><i class="bi bi-dash text-muted me-1"></i> Ekstrakurikuler</a>
    </div>

    <a href="{{ url('/') }}#gallery" style="display:block; padding:0.5rem 0; color:#1F2937; text-decoration:none; font-weight: 500; margin-top: 0.5rem;">Galeri</a>
    <a href="{{ url('/') }}#news" style="display:block; padding:0.5rem 0; color:#1F2937; text-decoration:none; font-weight: 500;">Berita</a>
    <a href="{{ url('/') }}#ppdb" style="display:block; padding:0.5rem 0; color:#1F2937; text-decoration:none; font-weight: 500;">PPDB</a>
    <a href="{{ url('/') }}#contact" style="display:block; padding:0.5rem 0; color:#1F2937; text-decoration:none; font-weight: 500;">Kontak</a>
    
    <a href="{{ route('login') }}" style="display:block; text-align:center; padding:0.7rem 0; margin-top:1.5rem; background:linear-gradient(135deg,#1565C0 0%,#1E88E5 100%); color:white; font-weight:600; text-decoration:none; border-radius: 50px;">
      <i class="bi bi-box-arrow-in-right me-1"></i> Login System
    </a>
  </div>
</nav>

<style>
@media (max-width: 991px) {
  .nav-menu-desktop { display:none !important; }
  .navbar-toggler-mobile { display:block !important; }
  #mobileMenu.show { display:block !important; }
}
@media (min-width: 992px) {
  #mobileMenu { display:none !important; }
  
  .custom-dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
      animation: fadeIn 0.2s ease-in-out;
  }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu .dropdown-item {
    font-size: 0.95rem;
    color: #4B5563;
    transition: all 0.2s;
}
.dropdown-menu .dropdown-item:hover {
    background-color: rgba(21, 101, 192, 0.08);
    color: #1565C0;
    font-weight: 600;
}

.nav-link:hover { color: var(--secondary-green) !important; }

.bi { color: var(--secondary-green); }
.navbar-brand .bi { color: var(--primary-emerald); }
.hero-buttons .btn-primary-hero { color: #0B2C5E; font-weight: 700; }

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30,136,229,0.4) !important;
}
</style>