<header class="bg-gray-800 text-white shadow-lg">
    <div class="flex justify-between items-center pl-16 lg:pl-4 pr-2 py-2">
        <h1 class="text-sm md:text-md lg:xl font-medium lg:font-bold uppercase"> <span class="text-[#ffc930]">{{ \App\Models\SiteSetting::getSiteName() }}</span></h1>
        
        <!-- User Dropdown -->
        <div class="relative" x-data="{ open: false }">
            <button @click="open = !open" class="flex items-center space-x-2 hover:bg-gray-700 px-3 py-2 rounded-lg transition-colors">
                <div class="w-7 h-7 bg-teal-500 rounded-full flex items-center justify-center">
                    <img src="{{ asset('assets/images/user.webp') }}" alt="usr-avatar">
                </div>
                <span class="hidden md:block">{{ Auth::user()->name }}</span>
                <i class="fas fa-chevron-down text-sm"></i>
            </button>
            
            <!-- Dropdown Menu -->
            <div x-show="open" @click.away="open = false" 
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0 transform scale-95"
                    x-transition:enter-end="opacity-100 transform scale-100"
                    x-transition:leave="transition ease-in duration-150"
                    x-transition:leave-start="opacity-100 transform scale-100"
                    x-transition:leave-end="opacity-0 transform scale-95"
                    class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-2 z-50">
                <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors">
                    <i class="fas fa-user mr-2"></i>View Profile
                </a>
                <a href="{{ route('logout') }}" class="block px-4 py-2 text-red-600 hover:bg-red-50 transition-colors">
                    <i class="fas fa-power-off mr-2"></i>Logout
                </a>
            </div>
        </div>
    </div>
</header>