<header class="border-b border-gray-200 bg-white shadow-sm transition-smooth">
    <div class="container mx-auto px-4 py-6 flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center space-x-4">
            <div class="flex items-center">
                <div class="border-r border-gray-300 pr-4">
                    <p class="text-xs font-bold uppercase leading-tight text-gray-700">Gouvernement</p>
                    <p class="text-[10px] uppercase italic text-gray-600 mt-1">Liberté<br>Égalité<br>Fraternité</p>
                </div>
            </div>
            <h1 class="text-xs font-bold uppercase max-w-[150px] text-gray-800 leading-snug">
                <img 
                    src="{{ asset('img/logo-ministere.png') }}" 
                    alt="Logo du Ministère des Solidarités et de la Santé" 
                    class="h-16 w-auto mr-4"
                >
            </h1>
        </div>

        <div class="hidden md:block flex-grow text-center">
            <span class="text-3xl font-black italic tracking-tighter text-gray-900">
                (RE)SOURCES <span class="text-niagara underline decoration-candlelight decoration-4 underline-offset-2">RELATIONNELLES</span>
            </span>
        </div>

        <nav class="flex items-center gap-2 whitespace-nowrap">
            @auth
                <div class="relative group">
                    <button class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 transition-smooth duration-200">
                        <img 
                            src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->Pseudo) }}&background=06989e&color=fff&size=40"
                            alt="Photo de profil de {{ Auth::user()->Pseudo }}"
                            class="w-10 h-10 rounded-full border-2 border-niagara"
                        >
                        <span class="text-sm text-gray-700 font-semibold hidden sm:inline">{{ Auth::user()->Pseudo }}</span>
                    </button>

                    <!-- Menu déroulant -->
                    <div class="absolute right-0 mt-0 w-48 bg-white rounded-lg shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <a href="{{ route('profile.settings') }}" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b border-gray-200 rounded-t-lg">
                            ⚙️ Paramètres du profil
                        </a>
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full text-left px-4 py-3 text-sm text-red-600 hover:bg-red-50 rounded-b-lg font-semibold">
                                🚪 Déconnexion
                            </button>
                        </form>
                    </div>
                </div>
            @else
                <a href="{{ route('login') }}" class="px-5 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
                    Connexion
                </a>
                <a href="{{ route('register') }}" class="px-5 py-2.5 text-sm font-bold bg-candlelight text-gray-900 rounded-lg shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-smooth duration-200">
                    S'inscrire
                </a>
            @endauth
        </nav>
    </div>
</header>