@php
    $appName = \App\Models\Setting::get('app_name', 'Ujian Online');
    $logoPath = \App\Models\Setting::get('logo_path');
@endphp
<nav class="bg-white/90 backdrop-blur-md border-b border-gray-200 px-4 md:px-6 py-3 flex justify-between items-center sticky top-0 z-50">
    <div class="flex items-center gap-3">
        {{-- Mobile menu toggle --}}
        <button id="mobileMenuToggle" class="md:hidden p-2 -ml-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition">
            <i class="fas fa-bars text-lg"></i>
        </button>

        @if($logoPath)
            <img src="{{ asset('storage/' . $logoPath) }}" alt="Logo" class="h-8 w-auto object-contain">
        @else
            <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">U</div>
        @endif
        <span class="font-semibold text-base md:text-lg text-gray-800 truncate max-w-[140px] md:max-w-none">{{ $appName }}</span>
    </div>

    <div class="flex items-center gap-2 md:gap-4">
        <div class="hidden sm:flex flex-col items-end mr-2">
            <span class="text-sm font-medium text-gray-700">{{ auth()->user()->name }}</span>
            <span class="text-xs text-gray-500 capitalize">{{ auth()->user()->role }}</span>
        </div>
        <span class="sm:hidden px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-700 capitalize">{{ auth()->user()->role }}</span>
        <form action="{{ route('logout') }}" method="POST">
            @csrf
            <button type="submit" class="text-sm text-red-500 hover:text-red-700 hover:bg-red-50 px-3 py-2 rounded-lg transition">
                <i class="fas fa-sign-out-alt md:mr-1"></i>
                <span class="hidden md:inline">Logout</span>
            </button>
        </form>
    </div>
</nav>