@props(['faculties' => $global_faculties])

<header x-data="{ mobileMenuOpen: false, megaMenuOpen: false }" class="fixed w-full top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100 transition-all duration-300 font-sans">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="flex justify-between items-center h-20">
            <!-- Logo -->
            <div class="flex-shrink-0 flex items-center gap-3">
                <a href="/" class="flex items-center gap-3 group">
                    <div class="w-10 h-10 bg-blue-700 rounded-xl flex items-center justify-center shadow-lg shadow-blue-700/20 group-hover:scale-105 transition-transform">
                        <span class="text-white font-black text-xl leading-none">S</span>
                    </div>
                    <span class="font-black text-2xl text-gray-900 tracking-tight">Sciences Afrique</span>
                </a>
            </div>

            <!-- Desktop Menu -->
            <nav class="hidden lg:flex flex-1 justify-center space-x-8 h-full">
                <!-- Dropdown Trigger -->
                <button 
                    @mouseenter="megaMenuOpen = true" 
                    @click="megaMenuOpen = !megaMenuOpen"
                    class="h-full flex items-center gap-2 text-gray-800 font-bold hover:text-blue-600 transition-colors border-b-2 border-transparent"
                    :class="megaMenuOpen ? '!border-blue-600 text-blue-600' : ''"
                >
                    Nos Formations
                    <svg class="w-4 h-4 transition-transform duration-300" :class="megaMenuOpen ? '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"></path></svg>
                </button>
                
                <a href="#" class="h-full flex items-center gap-2 text-gray-800 font-medium hover:text-blue-600 transition-colors border-b-2 border-transparent">
                    Alternance <span class="bg-indigo-100 text-indigo-700 text-[10px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider">Nouveau</span>
                </a>
                <a href="#" class="h-full flex items-center text-gray-800 font-medium hover:text-blue-600 transition-colors border-b-2 border-transparent">Financement</a>
                
                <!-- Menu L'École -->
                <div x-data="{ openEcole: false }" @mouseleave="openEcole = false" class="relative h-full flex items-center">
                    <button @mouseenter="openEcole = true" class="h-full flex items-center gap-2 text-gray-800 font-medium hover:text-blue-600 transition-colors border-b-2 border-transparent" :class="openEcole ? '!border-blue-600 text-blue-600' : ''">
                        L'École
                        <svg class="w-4 h-4 transition-transform duration-300" :class="openEcole ? '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"></path></svg>
                    </button>
                    <div x-show="openEcole" x-transition.opacity.duration.200ms class="absolute top-full right-0 w-48 bg-white border border-gray-100 shadow-xl rounded-xl py-2 mt-0 z-50" x-cloak>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 font-medium hover:bg-blue-50 hover:text-blue-700 transition-colors">À propos de</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 font-medium hover:bg-blue-50 hover:text-blue-700 transition-colors">Nous contacter</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 font-medium hover:bg-blue-50 hover:text-blue-700 transition-colors">FAQ</a>
                    </div>
                </div>
            </nav>

            <!-- CTA & Login -->
            <div class="hidden lg:flex items-center space-x-5">
                @auth
                    <a href="{{ route('dashboard') }}" class="text-gray-800 font-bold hover:text-blue-600 transition-colors">Mon Espace</a>
                @else
                    <a href="{{ route('login') }}" class="text-gray-800 font-bold hover:text-blue-600 transition-colors">Connexion</a>
                @endauth
                <a href="{{ route('admissions.create') }}" class="bg-yellow-500 text-gray-900 px-6 py-2.5 rounded-full font-black hover:bg-yellow-400 transition-all shadow-lg shadow-yellow-500/30 transform hover:-translate-y-0.5">Demande d'admission</a>
            </div>

            <!-- Mobile menu button -->
            <div class="lg:hidden flex items-center">
                <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-gray-800 p-2 focus:outline-none bg-gray-50 rounded-lg">
                    <svg x-show="!mobileMenuOpen" 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"></path></svg>
                    <svg x-show="mobileMenuOpen" x-cloak 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="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
        </div>
    </div>

    <!-- MEGA MENU DESKTOP -->
    <div 
        x-show="megaMenuOpen" 
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
        @mouseleave="megaMenuOpen = false"
        x-cloak
        class="absolute top-full left-0 w-full bg-white border-b border-gray-200 shadow-2xl overflow-hidden hidden lg:block"
        style="max-height: calc(100vh - 80px); overflow-y: auto;"
    >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div class="grid grid-cols-12 gap-8">
                
                <!-- Colonne 1 : Filières (Faculties) -->
                <div class="col-span-5 pr-8 border-r border-gray-100">
                    <h3 class="text-xs font-black uppercase text-gray-400 tracking-widest mb-6 flex items-center gap-2">
                        Par Filière
                        <span class="w-full h-px bg-gray-100 flex-1"></span>
                    </h3>
                    <ul class="space-y-2">
                        @foreach($faculties as $faculty)
                            <li>
                                <a href="{{ route('faculties.show', $faculty->id) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-blue-50 transition-colors">
                                    <div class="flex items-center gap-4">
                                        <!-- Icône générique basée sur l'ID pour la démo -->
                                        <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center text-gray-500 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                                            <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                        </div>
                                        <div>
                                            <span class="block font-bold text-gray-800 group-hover:text-blue-700 transition-colors">{{ $faculty->name }}</span>
                                            <span class="block text-xs text-gray-500">{{ $faculty->departments->count() }} Départements</span>
                                        </div>
                                    </div>
                                    <svg class="w-5 h-5 text-gray-300 group-hover:text-blue-500 transform group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Colonne 2 : Par Diplôme/Niveau -->
                <div class="col-span-4 px-4">
                    <h3 class="text-xs font-black uppercase text-gray-400 tracking-widest mb-6 flex items-center gap-2">
                        Par Niveau d'études
                        <span class="w-full h-px bg-gray-100 flex-1"></span>
                    </h3>
                    <div class="grid grid-cols-1 gap-4">
                        <a href="#" class="p-4 border border-gray-100 rounded-2xl hover:border-blue-200 hover:shadow-md transition-all group">
                            <h4 class="font-black text-gray-800 group-hover:text-blue-600 mb-1">MBA & Mastères</h4>
                            <p class="text-xs text-gray-500">Bac+5, Titres RNCP Niveau 7</p>
                        </a>
                        <a href="#" class="p-4 border border-gray-100 rounded-2xl hover:border-blue-200 hover:shadow-md transition-all group">
                            <h4 class="font-black text-gray-800 group-hover:text-blue-600 mb-1 flex items-center gap-2">
                                Bachelor & Licences
                                <span class="bg-blue-100 text-blue-700 text-[9px] font-black px-2 py-0.5 rounded uppercase">Populaire</span>
                            </h4>
                            <p class="text-xs text-gray-500">Bac+3, Titres RNCP Niveau 6</p>
                        </a>
                        <a href="#" class="p-4 border border-gray-100 rounded-2xl hover:border-blue-200 hover:shadow-md transition-all group">
                            <h4 class="font-black text-gray-800 group-hover:text-blue-600 mb-1 flex items-center gap-2">
                                Certifications Pro.
                                <span class="bg-green-100 text-green-700 text-[9px] font-black px-2 py-0.5 rounded uppercase">100% en ligne</span>
                            </h4>
                            <p class="text-xs text-gray-500">Formations courtes, Bootcamps</p>
                        </a>
                    </div>
                </div>

                <!-- Colonne 3 : Mise en avant / CTA -->
                <div class="col-span-3">
                    <div class="bg-blue-50 rounded-[2rem] p-6 h-full flex flex-col items-center justify-center text-center relative overflow-hidden border border-blue-100">
                        <!-- Decorative shapes -->
                        <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-200 rounded-full mix-blend-multiply opacity-50 blur-xl"></div>
                        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-indigo-200 rounded-full mix-blend-multiply opacity-50 blur-xl"></div>

                        <div class="relative z-10">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg shadow-blue-500/10 mx-auto mb-4 text-blue-600">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                            </div>
                            <h4 class="font-black text-xl text-gray-900 mb-2">Besoin d'aide pour choisir ?</h4>
                            <p class="text-sm text-gray-600 mb-6">Nos conseillers d'orientation vous guident vers la formation idéale pour votre carrière.</p>
                            <a href="#" class="inline-block bg-blue-600 text-white font-bold px-6 py-3 rounded-xl shadow-lg shadow-blue-600/30 hover:bg-blue-700 transition-colors w-full">
                                Prendre rdv gratuit
                            </a>
                        </div>
                    </div>
                </div>

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

    <!-- MOBILE MENU ACCORDION -->
    <div 
        x-show="mobileMenuOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-4"
        x-cloak
        class="lg:hidden bg-white border-b border-gray-100 shadow-xl overflow-y-auto"
        style="max-height: calc(100vh - 80px);"
    >
        <div class="px-4 py-6 space-y-2">
            
            <!-- Accordion Formations -->
            <div x-data="{ open: false }" class="border border-gray-100 rounded-2xl overflow-hidden bg-gray-50/50">
                <button @click="open = !open" class="flex justify-between items-center w-full p-4 font-bold text-gray-800">
                    Nos Formations
                    <svg class="w-5 h-5 transition-transform duration-300 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"></path></svg>
                </button>
                <div x-show="open" x-collapse x-cloak>
                    <div class="px-4 pb-4 space-y-1 border-t border-gray-100 pt-2">
                        @foreach($faculties as $faculty)
                            <a href="{{ route('faculties.show', $faculty->id) }}" class="block py-3 px-4 text-sm font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-colors">
                                {{ $faculty->name }}
                            </a>
                        @endforeach
                        <div class="mt-4 pt-4 border-t border-gray-100">
                            <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 px-4">Par Niveau</p>
                            <a href="#" class="block py-2 px-4 text-sm font-medium text-gray-600 hover:text-blue-600">MBA & Mastères</a>
                            <a href="#" class="block py-2 px-4 text-sm font-medium text-gray-600 hover:text-blue-600">Bachelor & Licences</a>
                            <a href="#" class="block py-2 px-4 text-sm font-medium text-gray-600 hover:text-blue-600">Certifications Pro.</a>
                        </div>
                    </div>
                </div>
            </div>

            <a href="#" class="block p-4 font-bold text-gray-800 rounded-2xl hover:bg-gray-50 flex items-center justify-between">
                <div>
                    Alternance <span class="bg-indigo-100 text-indigo-700 text-[10px] ml-2 px-2 py-0.5 rounded uppercase">Nouveau</span>
                </div>
            </a>
            <a href="#" class="block p-4 font-bold text-gray-800 rounded-2xl hover:bg-gray-50">Financement</a>
            <a href="#" class="block p-4 font-bold text-gray-800 rounded-2xl hover:bg-gray-50">Aide & Contact</a>
            
            <div class="pt-6 mt-4 border-t border-gray-100 flex flex-col gap-3">
                @auth
                    <a href="{{ route('dashboard') }}" class="w-full text-center py-3 bg-gray-100 text-gray-800 font-bold rounded-xl">Mon Espace</a>
                @else
                    <a href="{{ route('login') }}" class="w-full text-center py-3 bg-gray-100 text-gray-800 font-bold rounded-xl">Connexion</a>
                @endauth
                <a href="{{ route('admissions.create') }}" class="w-full text-center py-3 bg-yellow-500 text-gray-900 font-black rounded-xl shadow-lg shadow-yellow-500/20">Demande d'admission</a>
            </div>
        </div>
    </div>
</header>