<header class="sticky top-0 z-30 bg-white border-b border-gray-200 safe-top" data-topbar>
    <div class="flex items-center justify-between h-14 sm:h-16 px-3 sm:px-6 lg:px-8">
        <!-- Mobile menu button -->
        <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 -ms-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>

        <!-- Academy name -->
        <div class="flex items-center gap-2 min-w-0">
            <h2 class="text-sm sm:text-lg font-semibold text-gray-800 truncate">
                {{ app()->bound('current_academy') ? app('current_academy')->name_ar : 'الكابتن' }}
            </h2>
        </div>

        <!-- Center: Global Search (hidden on mobile) -->
        <div class="hidden md:block flex-1 max-w-md mx-4">
            @livewire('global-search')
        </div>

        <!-- Right side: Desktop actions -->
        <div class="flex items-center gap-2 sm:gap-4">
            <!-- Branch Switcher (always visible — compact on mobile) -->
            <div class="hidden sm:block">
                @livewire('branch-switcher')
            </div>

            <!-- Notifications (icon only on mobile) -->
            <a href="{{ route('notifications.center') }}" class="relative p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
                <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            </a>

            <!-- Desktop-only: Language + Dark Mode -->
            <div class="hidden lg:flex items-center gap-2">
                @livewire('components.language-switcher')
                @livewire('components.dark-mode-toggle')
            </div>

            <!-- User Menu -->
            <div x-data="{ open: false }" class="relative">
                <button @click="open = !open" class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background-color: var(--brand-primary, #2563eb);">
                        <span class="text-xs font-medium text-white">{{ mb_substr(auth()->user()->name_ar ?? auth()->user()->name, 0, 1) }}</span>
                    </div>
                    <span class="hidden sm:inline text-sm text-gray-700 max-w-[100px] truncate">{{ auth()->user()->name_ar ?? auth()->user()->name }}</span>
                    <svg class="w-4 h-4 text-gray-400 hidden sm:block transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div x-show="open" @click.outside="open = false" x-transition
                     class="absolute end-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 z-50 py-2">
                    <!-- Close button (touch-friendly) -->
                    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 mb-1">
                        <span class="text-xs font-medium text-gray-500">{{ __('القائمة') }}</span>
                        <button @click="open = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="{{ __('إغلاق') }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                    <!-- Mobile-only items inside menu -->
                    <div class="sm:hidden px-4 py-2 border-b border-gray-100 mb-1">
                        @livewire('branch-switcher')
                    </div>
                    <div class="lg:hidden px-4 py-2 border-b border-gray-100 mb-1 flex items-center gap-3">
                        @livewire('components.language-switcher')
                        @livewire('components.dark-mode-toggle')
                    </div>
                    <a href="{{ route('profile') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        {{ __('الملف الشخصي') }}
                    </a>
                    <a href="{{ route('profile.notifications') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                        {{ __('تفضيلات الإشعارات') }}
                    </a>
                    <div class="border-t border-gray-100 mt-1 pt-1">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 active:bg-red-100 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                                {{ __('تسجيل الخروج') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
