<?php
    $profile = \App\Models\VillageProfile::current();
?>

<!-- Backdrop for Mobile Menu -->
<div id="mobile-menu-backdrop" class="fixed inset-0 bg-black/50 z-40 hidden backdrop-blur-sm"></div>

<nav class="bg-primary sticky top-0 z-50" style="border-bottom: 1px solid rgba(255,255,255,0.08);">
    <div class="max-w-7xl mx-auto px-6 lg:px-10">
        <div class="flex items-center justify-between h-18" style="height: 72px;">

            <!-- Logo -->
            <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-3 group flex-shrink-0">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-all group-hover:scale-105 overflow-hidden"
                     style="background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);">
                    <?php if(file_exists(public_path('images/logo.png'))): ?>
                        <img src="<?php echo e(asset('images/logo.png')); ?>" alt="Logo <?php echo e($profile->nama_desa); ?>" class="w-full h-full object-contain p-1">
                    <?php elseif(file_exists(public_path('images/logo.jpg'))): ?>
                        <img src="<?php echo e(asset('images/logo.jpg')); ?>" alt="Logo <?php echo e($profile->nama_desa); ?>" class="w-full h-full object-contain p-1">
                    <?php elseif(file_exists(public_path('images/logo.jpeg'))): ?>
                        <img src="<?php echo e(asset('images/logo.jpeg')); ?>" alt="Logo <?php echo e($profile->nama_desa); ?>" class="w-full h-full object-contain p-1">
                    <?php elseif(file_exists(public_path('images/logo.svg'))): ?>
                        <img src="<?php echo e(asset('images/logo.svg')); ?>" alt="Logo <?php echo e($profile->nama_desa); ?>" class="w-full h-full object-contain p-1">
                    <?php else: ?>
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    <?php endif; ?>
                </div>
                <div>
                    <div class="text-white font-bold text-sm leading-tight tracking-wide"><?php echo e($profile->nama_desa); ?></div>
                    <div class="text-[11px] leading-none mt-0.5 font-medium" style="color: rgba(255,255,255,0.5);">Kec. <?php echo e($profile->kecamatan); ?></div>
                </div>
            </a>

            <!-- Desktop Center Navigation (>= 768px) -->
            <div class="hidden md:flex items-center" style="gap: 2px;">

                <!-- Beranda -->
                <a href="<?php echo e(route('home')); ?>"
                   class="nav-item <?php echo e(request()->routeIs('home') ? 'nav-item-active' : ''); ?>">
                    Beranda
                </a>

                <!-- Profil Dropdown -->
                <div class="relative group">
                    <button class="nav-item flex items-center gap-1.5 <?php echo e(request()->routeIs('profil.*') ? 'nav-item-active' : ''); ?>">
                        Profil Desa
                        <svg class="w-3.5 h-3.5 transition-transform duration-300 group-hover:rotate-180" style="color: rgba(255,255,255,0.5);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <!-- Dropdown Panel -->
                    <div class="dropdown-panel">
                        <a href="<?php echo e(route('profil.tentang')); ?>" class="dropdown-item">
                            <div class="dropdown-icon">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <div>
                                <div class="dropdown-item-title">Tentang Desa</div>
                                <div class="dropdown-item-sub">Sejarah & visi misi desa</div>
                            </div>
                        </a>
                        <a href="<?php echo e(route('profil.geografis')); ?>" class="dropdown-item">
                            <div class="dropdown-icon">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg>
                            </div>
                            <div>
                                <div class="dropdown-item-title">Kondisi Geografis</div>
                                <div class="dropdown-item-sub">Luas & batas wilayah</div>
                            </div>
                        </a>
                        <a href="<?php echo e(route('profil.pemerintahan')); ?>" class="dropdown-item">
                            <div class="dropdown-icon">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <div>
                                <div class="dropdown-item-title">Pemerintahan</div>
                                <div class="dropdown-item-sub">Kepala desa & perangkat</div>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Data Desa -->
                <a href="<?php echo e(route('data-desa')); ?>"
                   class="nav-item <?php echo e(request()->routeIs('data-desa') ? 'nav-item-active' : ''); ?>">
                    Data Desa
                </a>

                <!-- Potensi -->
                <a href="<?php echo e(route('potensi')); ?>"
                   class="nav-item <?php echo e(request()->routeIs('potensi') ? 'nav-item-active' : ''); ?>">
                    Potensi
                </a>

                <!-- Peta -->
                <a href="<?php echo e(route('peta')); ?>"
                   class="nav-item <?php echo e(request()->routeIs('peta') ? 'nav-item-active' : ''); ?>">
                    Peta Desa
                </a>

                <!-- Informasi Dropdown -->
                <div class="relative group">
                    <button class="nav-item flex items-center gap-1.5 <?php echo e(request()->routeIs('berita.*') || request()->routeIs('pengumuman.*') ? 'nav-item-active' : ''); ?>">
                        Informasi
                        <svg class="w-3.5 h-3.5 transition-transform duration-300 group-hover:rotate-180" style="color: rgba(255,255,255,0.5);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <!-- Dropdown Panel -->
                    <div class="dropdown-panel" style="min-width: 220px;">
                        <a href="<?php echo e(route('berita.index')); ?>" class="dropdown-item">
                            <div class="dropdown-icon">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
                            </div>
                            <div>
                                <div class="dropdown-item-title">Berita Desa</div>
                                <div class="dropdown-item-sub">Kabar & artikel terkini</div>
                            </div>
                        </a>
                        <a href="<?php echo e(route('pengumuman.index')); ?>" class="dropdown-item">
                            <div class="dropdown-icon">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                            </div>
                            <div>
                                <div class="dropdown-item-title">Pengumuman</div>
                                <div class="dropdown-item-sub">Informasi & edaran resmi</div>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Kontak -->
                <a href="<?php echo e(route('kontak')); ?>"
                   class="nav-item <?php echo e(request()->routeIs('kontak') ? 'nav-item-active' : ''); ?>">
                    Kontak
                </a>
            </div>

            <!-- Right: Login Button -->
            <div class="hidden md:flex items-center flex-shrink-0">
                <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(route('admin.dashboard')); ?>"
                       class="flex items-center gap-2 text-white text-sm font-semibold px-4 py-2 rounded-xl transition-all hover:-translate-y-0.5"
                       style="background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
                        Dashboard
                    </a>
                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>"
                       class="flex items-center gap-2 text-white text-sm font-bold px-5 py-2 rounded-xl transition-all hover:-translate-y-0.5 hover:shadow-lg"
                       style="background: #2563EB; border: 1px solid rgba(255,255,255,0.15);">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        Admin
                    </a>
                <?php endif; ?>
            </div>

            <!-- Mobile Hamburger -->
            <button id="mobile-menu-btn" class="md:hidden text-white p-2 rounded-xl transition-colors hover:bg-white/10 focus:outline-none" aria-label="Menu">
                <svg id="hamburger-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile Drawer -->
    <div id="mobile-menu" class="hidden md:hidden border-t overflow-y-auto" style="border-color: rgba(255,255,255,0.1); max-height: 85vh;">
        <div class="px-5 py-4 space-y-1">
            <a href="<?php echo e(route('home')); ?>" class="mobile-link <?php echo e(request()->routeIs('home') ? 'mobile-link-active' : ''); ?>">Beranda</a>

            <div>
                <button data-accordion="mob-profil" class="mobile-link w-full flex justify-between items-center text-left">
                    <span>Profil Desa</span>
                    <svg data-chevron class="w-4 h-4 transition-transform duration-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div id="mob-profil" class="hidden pl-4 mt-1 space-y-1 pb-1">
                    <a href="<?php echo e(route('profil.tentang')); ?>" class="mobile-sub-link">Tentang Desa</a>
                    <a href="<?php echo e(route('profil.geografis')); ?>" class="mobile-sub-link">Kondisi Geografis</a>
                    <a href="<?php echo e(route('profil.pemerintahan')); ?>" class="mobile-sub-link">Pemerintahan</a>
                </div>
            </div>

            <a href="<?php echo e(route('data-desa')); ?>" class="mobile-link <?php echo e(request()->routeIs('data-desa') ? 'mobile-link-active' : ''); ?>">Data Desa</a>
            <a href="<?php echo e(route('potensi')); ?>" class="mobile-link <?php echo e(request()->routeIs('potensi') ? 'mobile-link-active' : ''); ?>">Potensi Desa</a>
            <a href="<?php echo e(route('peta')); ?>" class="mobile-link <?php echo e(request()->routeIs('peta') ? 'mobile-link-active' : ''); ?>">Peta Desa</a>

            <div>
                <button data-accordion="mob-info" class="mobile-link w-full flex justify-between items-center text-left">
                    <span>Berita & Informasi</span>
                    <svg data-chevron class="w-4 h-4 transition-transform duration-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div id="mob-info" class="hidden pl-4 mt-1 space-y-1 pb-1">
                    <a href="<?php echo e(route('berita.index')); ?>" class="mobile-sub-link">Berita Desa</a>
                    <a href="<?php echo e(route('pengumuman.index')); ?>" class="mobile-sub-link">Pengumuman</a>
                </div>
            </div>

            <a href="<?php echo e(route('kontak')); ?>" class="mobile-link <?php echo e(request()->routeIs('kontak') ? 'mobile-link-active' : ''); ?>">Kontak</a>

            <div class="pt-3 border-t mt-3" style="border-color: rgba(255,255,255,0.1);">
                <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(route('admin.dashboard')); ?>" class="flex items-center justify-center gap-2 py-3 rounded-xl text-white font-semibold text-sm transition-colors" style="background: rgba(255,255,255,0.1);">
                        Dashboard Admin
                    </a>
                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>" class="flex items-center justify-center gap-2 py-3 rounded-xl text-white font-bold text-sm" style="background: #2563EB;">
                        Login Admin
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</nav>

<style>
/* Nav Item */
.nav-item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0.625rem;
    transition: all 0.18s ease;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.nav-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}
.nav-item-active {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
    font-weight: 700;
}

/* Dropdown Panel */
.dropdown-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    min-width: 240px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-50%) translateY(-6px);
    z-index: 100;
}
.group:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dropdown Item */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}
.dropdown-item:hover {
    background: #F0F7FF;
}
.dropdown-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #EFF6FF;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.dropdown-item:hover .dropdown-icon {
    background: #2563EB;
    color: white;
}
.dropdown-item-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.dropdown-item-sub {
    font-size: 0.6875rem;
    color: #9CA3AF;
    font-weight: 500;
    margin-top: 1px;
}

/* Mobile Links */
.mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: all 0.15s;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
}
.mobile-link:hover { background: rgba(255,255,255,0.1); color: white; }
.mobile-link-active { background: rgba(255,255,255,0.12) !important; color: white !important; }

.mobile-sub-link {
    display: block;
    padding: 0.6rem 1rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.15s;
    text-decoration: none;
}
.mobile-sub-link:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
</style>
<?php /**PATH F:\web Desa Suka Baru\website-desa-suka-baru\resources\views/partials/navbar.blade.php ENDPATH**/ ?>