{{--
    ================================================================
    Main Header Component — Unified Public Navbar
    ================================================================
    القواعد الثابتة (Zero Visual Jump):
    • الارتفاع : h-20 (80px) — نفسه في admin header
    • الـ Padding: px-8 — نفسه في admin header
    • الشعار    : x-brand-logo (52px) — نفسه في admin sidebar
    • الأفاتار  : ebda-avatar (40×40) — نفسه في admin
    ================================================================
--}}
<nav class="bg-white/95 backdrop-blur-xl border-b border-gray-100 shadow-sm sticky top-0 z-50 transition-all duration-500 w-full"
     x-data="{ userMenuOpen: false }"
     x-cloak>

    <div class="px-8 w-full">
        <div class="flex h-20 items-center justify-between">

            {{-- ── 1. الشعار (أقصى اليمين) ── --}}
            <div class="flex-1 flex justify-start items-center">
                <x-brand-logo theme="light" />
            </div>

            {{-- ── 2. روابط التنقل (المنتصف) ── --}}
            <div class="hidden md:flex items-center justify-center gap-x-10 w-2/4">
                <a href="{{ route('home') }}"
                   class="text-[14.5px] font-bold transition-all duration-300 {{ request()->routeIs('home') ? 'text-[#1e3a8a] underline decoration-2 underline-offset-8' : 'text-gray-400 hover:text-[#1e3a8a]' }}">
                    الرئيسية
                </a>

                <a href="{{ route('courses.index') }}"
                   class="text-[14.5px] font-bold transition-all duration-300 {{ request()->routeIs('courses.*') ? 'text-[#1e3a8a] underline decoration-2 underline-offset-8' : 'text-gray-400 hover:text-[#1e3a8a]' }}">
                    الكورسات
                </a>


            </div>

            {{-- ── 3. أزرار الدخول / الملف الشخصي (أقصى اليسار) ── --}}
            <div class="flex-1 flex items-center justify-end">
                @guest
                    <a href="{{ route('login') }}" class="btn-ghost text-sm ml-2">دخول</a>
                    <a href="{{ route('register') }}" class="btn-primary !px-6 !py-2.5 !text-xs">انضم إلينا</a>
                @else
                    <div class="flex items-center space-x-4 space-x-reverse">
                        {{-- Notifications (Removed) --}}

                        {{-- Avatar / User Menu Toggle --}}
                        <button @click="userMenuOpen = !userMenuOpen"
                                class="flex items-center space-x-2 space-x-reverse p-1 rounded-2xl transition-all duration-300"
                                :class="userMenuOpen ? 'bg-blue-50 ring-1 ring-blue-100' : 'hover:bg-gray-50'"
                                aria-label="قائمة المستخدم">

                            <svg class="w-4 h-4 text-gray-400 transition-transform duration-300"
                                 :class="userMenuOpen ? 'rotate-180 text-[#1e3a8a]' : ''"
                                 fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                            </svg>

                            <x-user-avatar :user="Auth::user()" size="ebda-avatar" :show-status="true" class="mr-2" />
                        </button>
                    </div>
                @endguest
            </div>
        </div>

        {{-- ── 4. القائمة المنسدلة (Inline Push Menu) ── --}}
        <div x-show="userMenuOpen"
             x-cloak
             @click.away="userMenuOpen = false"
             class="overflow-hidden border-t border-gray-50 bg-white/50 rounded-b-3xl">

            <div class="py-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 animate-fade-in">

                {{-- لوحة التحكم --}}
                <a href="{{ route('dashboard') }}"
                   class="flex items-center p-4 bg-white rounded-2xl border border-gray-100 hover:border-[#1e3a8a] hover:bg-blue-50/50 group transition-all duration-300 shadow-sm">
                    <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center ml-4 text-gray-400 group-hover:text-[#1e3a8a] group-hover:bg-white transition-all">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                            <path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                        </svg>
                    </div>
                    <div class="flex flex-col">
                        <span class="font-black text-sm text-gray-700 group-hover:text-[#1e3a8a]">لوحة التحكم</span>
                        <span class="text-[10px] text-gray-400 font-bold uppercase">مركز العمليات</span>
                    </div>
                </a>

                {{-- الملف الشخصي --}}
                <a href="{{ route('profile.show') }}"
                   class="flex items-center p-4 bg-white rounded-2xl border border-gray-100 hover:border-[#1e3a8a] hover:bg-blue-50/50 group transition-all duration-300 shadow-sm">
                    <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center ml-4 text-gray-400 group-hover:text-[#1e3a8a] group-hover:bg-white transition-all">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                            <path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                    </div>
                    <div class="flex flex-col">
                        <span class="font-black text-sm text-gray-700 group-hover:text-[#1e3a8a]">الملف الشخصي</span>
                        <span class="text-[10px] text-gray-400 font-bold uppercase">إدارة البيانات</span>
                    </div>
                </a>

                {{-- مساري المهني (خاص بالمتدرب) --}}
                @if(Auth::check() && Auth::user()->hasRole('Trainee'))
                <a href="{{ route('trainee.courses.enrolled') }}"
                   class="flex items-center p-4 bg-white rounded-2xl border border-gray-100 hover:border-[#1e3a8a] hover:bg-blue-50/50 group transition-all duration-300 shadow-sm">
                    <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center ml-4 text-gray-400 group-hover:text-[#1e3a8a] group-hover:bg-white transition-all">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                            <path d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 11.751a50.703 50.703 0 017.74-1.604m-15.482 0c1.33.301 2.667.63 4 1" />
                        </svg>
                    </div>
                    <div class="flex flex-col">
                        <span class="font-black text-sm text-gray-700 group-hover:text-[#1e3a8a]">مساري المهني</span>
                        <span class="text-[10px] text-gray-400 font-bold uppercase">إثبات المهارات</span>
                    </div>
                </a>
                @endif

                {{-- تسجيل الخروج --}}
                <form method="POST" action="{{ route('logout') }}" class="w-full">
                    @csrf
                    <button type="submit"
                            class="w-full flex items-center p-4 bg-red-50/20 rounded-2xl border border-transparent hover:border-red-200 hover:bg-red-50 group transition-all duration-300">
                        <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center ml-4 shadow-sm text-red-400 group-hover:bg-red-500 group-hover:text-white transition-all">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                <path d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
                            </svg>
                        </div>
                        <div class="flex flex-col text-right">
                            <span class="font-black text-sm text-red-600">تسجيل الخروج</span>
                            <span class="text-[10px] text-red-300 font-bold uppercase">نراك قريباً</span>
                        </div>
                    </button>
                </form>

            </div>
        </div>
    </div>
</nav>