@php
    $allLogos = [
        ['name' => 'Bnde', 'url' => 'assets/references/bnde.jpeg'],
        ['name' => 'Amsa', 'url' => 'assets/references/amsa.jpeg'],
        ['name' => 'Effage', 'url' => 'assets/references/effage.jpeg'],
        ['name' => 'Maer', 'url' => 'assets/references/maer.jpeg'],
        ['name' => 'Sonatel', 'url' => 'assets/references/ofor.jpeg'],
        ['name' => 'Plan', 'url' => 'assets/references/plan.jpeg'],
        ['name' => 'RDE', 'url' => 'assets/references/rde.jpeg'],
        ['name' => 'SAR', 'url' => 'assets/references/sar.jpeg'],
        ['name' => 'Saudequip', 'url' => 'assets/references/saudequip.jpeg'],
        ['name' => 'Securiport', 'url' => 'assets/references/securiport.jpeg'],
        ['name' => 'Senelec', 'url' => 'assets/references/senelec.jpeg'],
        ['name' => 'Socas', 'url' => 'assets/references/socas.jpeg'],
        ['name' => 'Sunu Assurances', 'url' => 'assets/references/sunu-assurances.jpeg'],
        ['name' => 'Sunu Grup', 'url' => 'assets/references/sunu-grup.jpeg'],
        ['name' => 'TS', 'url' => 'assets/references/ts.jpeg'],
        ['name' => 'UBA', 'url' => 'assets/references/uba.jpeg'],
        ['name' => 'Eramet', 'url' => 'assets/references/eramet.png'],
    ];
@endphp

<section class="py-20 bg-white overflow-hidden">
  <div class="container mx-auto px-4 text-center mb-12">
    <h2 class="text-[#203c89] text-4xl md:text-5xl font-bold mb-2  tracking-tight">Ils nous font confiance</h2>
    <div class="w-20 h-1.5 bg-[#4ab793] mx-auto rounded-full mb-6"></div>
    <p class="text-slate-500">Accompagner la réussite de nos partenaires est notre priorité.</p>
  </div>
  
  <div class="logo-slider-container">
    <div class="logo-track">
      <div class="logo-group">
        @foreach($allLogos as $logo)
        <div class="logo-item">
          <img src="{{ asset($logo['url']) }}" alt="{{ $logo['name'] }}" title="{{ $logo['name'] }}">
        </div>
        @endforeach
      </div>
      <div class="logo-group" aria-hidden="true">
        @foreach($allLogos as $logo)
        <div class="logo-item">
          <img src="{{ asset($logo['url']) }}" alt="{{ $logo['name'] }}" title="{{ $logo['name'] }}">
        </div>
        @endforeach
      </div>
    </div>
  </div>
</section>

<style>
  /* Conteneur principal avec les bandes bleues sur les bords */
  .logo-slider-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  /* Bandes bleues de masquage (exactement comme ton CSS original) */
  .logo-slider-container::before,
  .logo-slider-container::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 150px; /* Largeur de la bande bleue */
    z-index: 2;
  }

  .logo-slider-container::before {
    left: 0;
    background: linear-gradient(to right, #203c89 0%, rgba(255, 255, 255, 0) 100%);
  }

  .logo-slider-container::after {
    right: 0;
    background: linear-gradient(to left, #203c89 0%, rgba(255, 255, 255, 0) 100%);
  }

  /* Rail de défilement */
  .logo-track {
    display: flex;
    width: max-content;
    animation: scrollAnimation 40s linear infinite;
  }

  .logo-track:hover {
    animation-play-state: paused;
  }

  .logo-group {
    display: flex;
    align-items: center;
  }

  .logo-item {
    width: 200px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
  }

  .logo-item img {
    height: 80px;
    width: auto;
    max-width: 90%;
    object-contain;
    /* Retour aux couleurs originales */
    filter: none;
    opacity: 1;
    transition: transform 0.3s ease;
  }

  .logo-item img:hover {
    transform: scale(1.15);
  }

  @keyframes scrollAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
</style>