@php
  $domaines = [
    ['id' => 1, 'nom' => 'Ressources Humaines', 'slug' => 'ressources-humaines', 'icon' => '👥', 'description' => 'Optimisez la gestion de votre capital humain avec nos méthodes innovantes.', 'topics' => ['GPEC & Recrutement', 'Audit Social', 'Droit du Travail']],
    ['id' => 2, 'nom' => 'Management & Leadership', 'slug' => 'management-leadership', 'icon' => '🚀', 'description' => 'Développez votre posture de leader et fédérez vos équipes vers le succès.', 'topics' => ['Management d’équipe', 'Conduite du changement', 'Agilité','Entreprenariat']],
    ['id' => 3, 'nom' => 'Efficacité Professionnelle', 'slug' => 'efficacite-professionnelle', 'icon' => '💡', 'description' => 'Maîtrisez les soft-skills indispensables pour booster votre productivité.', 'topics' => ['Gestion du temps', 'Prise de parole', 'Gestion du stress']],
    ['id' => 4, 'nom' => 'Finance & Comptabilité', 'slug' => 'finance-comptabilite', 'icon' => '📊', 'description' => 'Sécurisez vos décisions stratégiques par une maîtrise parfaite des chiffres.', 'topics' => ['Analyse financière', 'Comptabilité OHADA', 'Gestion de trésorerie']],
    ['id' => 5, 'nom' => 'Marketing & Communication', 'slug' => 'marketing-communication', 'icon' => '🤝', 'description' => 'Développez votre présence sur les marchés avec nos stratégies de communication efficaces.', 'topics' => ['Techniques de vente', 'Négociation', 'Expérience client','Communication oral']],
    ['id' => 6, 'nom' => 'Digital & Informatique', 'slug' => 'digital-informatique', 'icon' => '💻', 'description' => 'Réussissez votre transformation numérique avec les outils de demain.', 'topics' => ['Marketing Digital', 'Cybersécurité', 'Data Analytics']],
    ['id' => 7, 'nom' => 'Logistique & Supply Chain', 'slug' => 'logistique-supply-chain', 'icon' => '🚚', 'description' => 'Optimisez votre chaîne d’approvisionnement pour une efficacité maximale.', 'topics' => ['Gestion de la chaîne d’approvisionnement', 'Optimisation des processus', 'Supply Chain Management']],
    ['id' => 8, 'nom' => 'QHSE', 'slug' => 'qhse', 'icon' => '🛡️', 'description' => 'Garantissez la sécurité et la qualité de vos opérations avec nos formations spécialisées.', 'topics' => ['Qualité', 'Hygiène', 'Sécurité', 'Environnement','Rse']],
    ['id' => 9, 'nom' => 'Assurance & Droit Juridique', 'slug' => 'assurance-droit-juridique', 'icon' => '📜', 'description' => 'Naviguez en toute sécurité dans le paysage juridique avec nos experts.', 'topics' => ['Droit des affaires', 'Droit du travail', 'Droit fiscal','Droit des assurances']],
  ];
@endphp

<section class="py-24  bg-[#f8fafc] relative overflow-hidden font-sans">
  <div class="absolute top-0 left-0 w-96 h-96 bg-[#203c89]/5 rounded-full -translate-x-1/2 -translate-y-1/2 blur-3xl"></div>
  <div class="absolute bottom-0 right-0 w-96 h-96 bg-[#4ab793]/5 rounded-full translate-x-1/2 translate-y-1/2 blur-3xl"></div>
  
  <div class="container mx-auto px-5 relative z-10 max-w-[1400px]">
    <div class="text-center mb-20">
      <span class="text-[#4ab793] font-bold tracking-[0.2em] uppercase text-sm mb-4 block">Expertise Thera RH</span>
      <h2 class="text-[#203c89] text-4xl md:text-5xl font-black mb-6 tracking-tighter ">
        Nos Domaines d'Expertise
      </h2>
        <div class="w-20 h-1.5 bg-[#4ab793] mx-auto rounded-full mb-6"></div>
      <p class="text-slate-500 text-lg max-w-2xl mx-auto leading-relaxed">
        Des programmes de formation conçus par des experts pour répondre aux défis réels du marché africain.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      @foreach ($domaines as $domaine)
        <div class="group relative bg-white p-10 rounded-[3rem] shadow-[0_10px_40px_-15px_rgba(0,0,0,0.05)] hover:shadow-[0_30px_60px_-20px_rgba(32,60,137,0.2)] transition-all duration-700 border border-slate-100 flex flex-col h-full hover:-translate-y-4 overflow-hidden">
          
          <div class="absolute inset-0 bg-gradient-to-br from-[#4ab793]/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>

          <div class="relative w-20 h-20 mb-10">
            <div class="absolute inset-0 bg-[#203c89]/5 rounded-[2rem] rotate-12 group-hover:rotate-0 transition-transform duration-500"></div>
            <div class="absolute inset-0 bg-white shadow-sm rounded-2xl flex items-center justify-center text-4xl group-hover:bg-[#203c89] group-hover:text-white transition-all duration-500 transform group-hover:scale-110">
              {{ $domaine['icon'] }}
            </div>
          </div>

          <h3 class="text-[#203c89] text-2xl font-bold mb-4 relative">
            {{ $domaine['nom'] }}
          </h3>
          
          <p class="text-slate-500 leading-relaxed mb-8 flex-grow relative text-sm">
            {{ $domaine['description'] }}
          </p>

          <div class="flex flex-wrap gap-2 mb-10 relative">
            @foreach ($domaine['topics'] as $topic)
              <span class="bg-slate-100 text-slate-600 text-[10px] font-bold uppercase px-3 py-1.5 rounded-full group-hover:bg-white group-hover:text-[#203c89] transition-all">
                {{ $topic }}
              </span>
            @endforeach
          </div>

          <a href="/domaines/{{ $domaine['slug'] }}" class="inline-flex items-center gap-4 text-[#203c89] font-black text-xs uppercase tracking-[0.15em] relative group/btn">
            Explorer le pôle 
            <div class="w-10 h-10 rounded-full bg-[#203c89] text-white flex items-center justify-center group-hover/btn:bg-[#4ab793] transition-colors duration-300">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="transform group-hover/btn:translate-x-1 transition-transform">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </div>
          </a>
        </div>
      @endforeach
    </div>
  </div>
</section>