@props([
  'quote',
  'initials',
  'name',
  'meta',
  'rating' => 5,
])

{{-- Card de review: ícono de Google + estrellas dinámicas (rating) arriba, quote
     en el medio, avatar + nombre/meta abajo. Un slide del carrusel de reviews. --}}
<figure class="flex h-full flex-col justify-between rounded-lg bg-surface-2 p-7">
  <div class="flex items-center gap-2">
    <picture class="bg-white rounded-full p-1">
      <img src="{{ Vite::asset('resources/images/home/icons/google_favicon.svg') }}" alt="Google" class="size-5" />
    </picture>
    <div class="flex items-center gap-1 text-brand-light">
      @for ($i = 0; $i < $rating; $i++)
        <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.3l-5.8 3.05 1.1-6.46-4.69-4.58 6.49-.94L12 2.5z" />
        </svg>
      @endfor
    </div>
  </div>

  <div>
    <blockquote class="mt-4 text-[13px] leading-relaxed text-fg/80">
      "{{ $quote }}"
    </blockquote>
  </div>

  <figcaption class="mt-6 flex items-center gap-3">
    <span class="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-brand text-[12px] font-semibold text-fg">
      {{ $initials }}
    </span>
    <div>
      <div class="text-[12px] font-semibold text-fg">{{ $name }}</div>
      <div class="text-[10px] text-muted-2">{{ $meta }}</div>
    </div>
  </figcaption>
</figure>