<header class="bg-white border-b border-gray-200 flex items-center gap-3 px-5 h-14 shrink-0">
    <div class="flex items-center gap-2 bg-gray-100 rounded-lg px-3 py-1.5 flex-1 max-w-xs">
        <svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
        <input
            type="text"
            placeholder="Type in to Search"
            class="bg-transparent text-sm text-gray-600 placeholder-gray-400 focus:outline-none w-full"
            disabled
            aria-label="Search (coming soon)"
        >
    </div>

    <div class="ml-auto flex items-center gap-3">
        <a href="{{ route('profile.edit') }}" class="flex items-center gap-2.5 group">
            <div class="text-right hidden sm:block">
                <div class="text-sm font-semibold text-gray-800 leading-tight group-hover:text-brass transition-colors">
                    {{ Auth::user()->name }}
                </div>
                <div class="text-xs text-gray-400">Admin</div>
            </div>
            <div class="w-9 h-9 rounded-full bg-ink-3 flex items-center justify-center text-white text-sm font-bold ring-2 ring-brass">
                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
            </div>
        </a>
    </div>
</header>
