{{-- SLMC eServices-style top bar. Guests see one "MySLMC Account" link to eServices; signed-in users see their name + Sign out. --}}
<header class="relative z-40 bg-slmc">
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 lg:px-8">
        <a href="{{ route('home') }}" class="shrink-0">
            <img src="{{ asset('images/slmc/logo-white.png') }}" alt="Sri Lanka Medical Council" class="h-10 w-auto md:h-14">
        </a>

        <div class="flex items-center gap-2 md:gap-4">
            @isset($user)
                <span class="hidden items-center gap-2 rounded-lg bg-white/10 px-3 py-2 text-xs font-medium text-white md:flex md:text-sm">
                    <span class="size-2 rounded-full bg-emerald-400 ring-4 ring-emerald-400/20"></span>
                    {{ $user->name }} · {{ ucfirst($role) }}
                </span>
                <form method="POST" action="{{ route($role.'.logout') }}">
                    @csrf
                    <button type="submit" class="bg-warm-gradient flex items-center gap-2 rounded-lg px-4 py-2 text-xs font-medium text-white shadow-sm hover:brightness-110 md:text-sm">
                        <i class="ri-logout-box-r-line"></i> Sign out
                    </button>
                </form>
            @else
                <a href="https://eservices.slmc.gov.lk/login" target="_blank" rel="noopener" class="bg-warm-gradient flex items-center gap-2 rounded-lg px-4 py-2 text-xs font-medium text-white hover:brightness-110 md:text-sm">
                    <i class="ri-login-box-line"></i> MySLMC Account
                </a>
            @endisset
        </div>
    </div>
</header>