@props(['testimonial'])

<div class="testimonial-slide">
  <div class="testimonial-content">
    <div class="testimonial-stars" aria-label="{{ $testimonial->rating }} out of 5 stars">
      @for($i = 1; $i <= 5; $i++)
        <i class="fas fa-star{{ $i <= $testimonial->rating ? '' : '-o' }}"></i>
      @endfor
    </div>
    <p class="testimonial-quote">"{{ $testimonial->content }}"</p>
    <div class="testimonial-author">
      <div class="author-avatar" style="width: 52px; height: 52px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;">
        {{ strtoupper(substr($testimonial->client_name, 0, 1)) }}
      </div>
      <div>
        <h4 class="author-name">{{ $testimonial->client_name }}</h4>
        <p class="author-title">{{ $testimonial->role }}, {{ $testimonial->company }}</p>
      </div>
    </div>
  </div>
</div>