@extends('layouts.site')

@section('title', 'Nos Facultés - Sciences Afrique')

@section('content')
 <section class="relative pt-28 pb-20 overflow-hidden">
     <div class="absolute inset-0 z-0">
         <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-blue-100/50 blur-3xl"></div>
         <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-orange-100/50 blur-3xl"></div>
     </div>

     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="max-w-3xl mb-16">
             <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-sm font-bold mb-6">
                 <span class="w-2 h-2 rounded-full bg-blue-600 animate-pulse"></span>
                 Nos filières
             </div>
             <h1 class="text-4xl md:text-5xl font-black text-brand-dark mb-6 leading-tight">
                 Découvrez nos <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-indigo-600">Facultés d'Excellence</span>
             </h1>
             <p class="text-xl text-slate-500 leading-relaxed">
                 Explorez un large éventail de disciplines académiques conçues pour préparer les leaders de demain.
             </p>
         </div>

         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             @forelse($faculties as $faculty)
                 <x-faculty-card :faculty="$faculty" />
             @empty
                 <div class="col-span-full py-20 text-center">
                     <p class="text-slate-400 italic">Aucune faculté disponible pour le moment.</p>
                 </div>
             @endforelse
         </div>
     </div>
 </section>
@endsection