@props([
  'reviews' => [],
  // Sin URL NO se pinta el link (ver el @if de abajo). El default era '#', y como el
  // layout invoca el componente sin pasar la prop, el botón quedaba apuntando a la
  // propia página en las ~241 páginas del sitio: link muerto para el usuario y un
  // self-link nofollow por página para el crawler. Un default vacío hace que el
  // olvido se note (no hay botón) en vez de fallar en silencio.
  'googleReviewsUrl' => null,
])

@php
  // Swiper deshabilita el loop si no hay suficientes slides para el slidesPerView
  // máximo (3 en desktop). Duplicamos el set para que el período de repetición
  // quede > 3 y nunca se vea una reseña repetida dentro de la misma ventana visible.
  $slides = count($reviews) >= 6 ? $reviews : array_merge($reviews, $reviews);
@endphp

{{-- Migración fiel de Reviews.astro + ReviewsCarousel.tsx: slot para el heading,
     carrusel Swiper (swipe + autoplay + pausa offscreen vía reviews-carousel.js)
     con cards que muestran ícono de Google + estrellas dinámicas por rating.
     El botón a Google no está en el .astro/.tsx de referencia, pero se mantiene
     aquí como link-out marcado nofollow para no gastar crawl budget del bot. --}}
<section class="bg-surface py-12 lg:py-20">
  <div class="container">
    {{ $slot }}

    <div class="mt-12">
      <div class="swiper" data-reviews-swiper>
        <div class="swiper-wrapper">
          @foreach ($slides as $review)
            <div class="swiper-slide h-auto">
              <x-home.review-card
                :quote="$review['quote']"
                :initials="$review['initials']"
                :name="$review['name']"
                :meta="$review['meta']"
                :rating="$review['rating'] ?? 5"
              />
            </div>
          @endforeach
        </div>
      </div>
    </div>

    @if ($googleReviewsUrl)
      <div class="mt-8 md:mt-10 lg:mt-12 flex justify-center">
        <a
          href="{{ $googleReviewsUrl }}"
          target="_blank"
          rel="nofollow noopener noreferrer"
          class="text-fg inline-flex items-center gap-2 normal-case hover:underline underline-offset-4"
        >
          Check Out Our Reviews On Google
          <x-lucide-external-link class="size-4" />
        </a>
      </div>
    @endif
  </div>
</section>