@props([
  'background' => 'bg-brand-deep',
  'stats' => [],
  'quote',
  'name',
  'meta',
])

{{-- v2: migración fiel del SocialProof.astro genérico (to-migrate/SocialProof.astro).
     Desktop/tablet: grilla estática. Móvil: swiper (1 slide, autoplay 3s, loop),
     port de StatsCarousel.tsx con el mismo patrón que reviews-carousel.js. --}}
<section class="{{ $background }}">
  {{-- Título sr-only: la banda no lleva encabezado visible (los números y la cita
       hablan solos), pero sin heading la sección queda sin título en el outline y
       —lo que importa de verdad— quien navega saltando de encabezado en encabezado
       con un lector de pantalla se saltea el bloque entero: no tiene dónde
       aterrizar. Invisible en pantalla, presente para AT y crawlers. <h2> porque
       cuelga del <h1> de la página que monte el componente. --}}
  <h2 class="sr-only">Proven Results</h2>

  <div class="flex container flex-col gap-6 md:gap-8 py-12 lg:py-10 xl:flex-row xl:items-center font-inter">
    {{-- Desktop / tablet: grilla estática --}}
    <dl class="hidden grid-cols-4 gap-x-4 md:gap-x-6 gap-y-6 md:grid xl:flex-none">
      @foreach ($stats as $stat)
        <div>
          <dt class="text-[30px] leading-none text-fg md:text-[36px] font-bold flex items-center justify-center whitespace-nowrap">
            {{ $stat['n'] }}
          </dt>
          <dd class="mt-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg/55 text-center">
            {{ $stat['l'] }}
          </dd>
        </div>
      @endforeach
    </dl>

    {{-- Móvil: swiper --}}
    <div class="md:hidden">
      <div class="swiper" data-stats-swiper>
        <div class="swiper-wrapper">
          @php
            // Swiper desactiva el loop si hay < 6 slides: duplicamos para que
            // el período sea suficiente y nunca se vea una stat repetida a la vez.
            $slides = count($stats) >= 6 ? $stats : array_merge($stats, $stats);
          @endphp
          @foreach ($slides as $stat)
            <div class="swiper-slide">
              <div class="text-[40px] leading-none font-bold text-fg text-center">{{ $stat['n'] }}</div>
              <div class="mt-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg/55 text-center">
                {{ $stat['l'] }}
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </div>

    <div class="xl:border-l xl:border-white/15 xl:pl-10 text-center">
      <p class="max-w-xl md:max-w-2xl text-[16px] font-semibold leading-snug text-fg-2 mx-auto">
        "{{ $quote }}"
      </p>
      <p class="mt-2 text-[11px] text-fg/50">— {{ $name }}, {{ $meta }}</p>
    </div>
  </div>
</section>