{{-- Customer reviews slider (approved CMS reviews that have text). Arrows are wired in arome.js. Needs $reviews. --}}
@if (count($reviews))
<section class="fq-testi">
  <div class="container">
    <div class="fq-testi-head rv">
      <h2>Trusted by Thousands of Satisfied Customers.</h2>
      @if (count($reviews) > 3)
      <div class="fq-arrows">
        <button type="button" id="fqPrev" aria-label="Previous reviews"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></button>
        <button type="button" id="fqNext" aria-label="Next reviews"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></button>
      </div>
      @endif
    </div>
    <div class="fq-track rv" id="fqTrack" tabindex="0" aria-label="Customer reviews">
      @foreach ($reviews as $r)
        <figure class="fq-quote">
          <div class="fq-card">
            <blockquote>&ldquo;{{ \Illuminate\Support\Str::limit($r['text'], 200) }}&rdquo;</blockquote>
            <div class="stars" aria-label="{{ $r['rating'] }} out of 5">{!! str_repeat('&#9733;', $r['rating']) . str_repeat('&#9734;', 5 - $r['rating']) !!}</div>
          </div>
          <figcaption>
            <span class="fq-av" aria-hidden="true">{{ mb_strtoupper(mb_substr($r['author'], 0, 1)) }}</span>
            <span><b>{{ $r['author'] }}</b><em><svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg> Verified buyer</em></span>
          </figcaption>
        </figure>
      @endforeach
    </div>
  </div>
</section>
@endif