@if(!empty($testimonials['items']))
    <section class="testimonials section" id="stories" aria-labelledby="stories-title" @sectionTone($testimonials['style'] ?? [])>
        <div class="container">
            <div class="section-head section-head--center reveal">
                <p class="eyebrow" data-edit="testimonials.eyebrow">{{ $testimonials['eyebrow'] ?? '' }}</p>
                <h2 id="stories-title"><x-editable path="testimonials.title">{{ $testimonials['title'] ?? '' }}</x-editable></h2>
                <p class="section-head__desc"><x-editable path="testimonials.description">{{ $testimonials['description'] ?? '' }}</x-editable></p>
            </div>

            <div class="testimonials__grid">
                @foreach($testimonials['items'] as $testimonial)
                    @php
                        $initials = collect(explode(' ', $testimonial['name'] ?? ''))
                            ->filter()
                            ->map(fn ($part) => mb_substr($part, 0, 1))
                            ->take(2)
                            ->implode('');
                    @endphp
                    <figure class="story-card {{ $loop->first ? 'story-card--featured' : '' }} reveal">
                        <div class="story-card__top">
                            <span class="story-card__metric" data-edit="testimonials.items.{{ $loop->index }}.metric">{{ $testimonial['metric'] ?? '' }}</span>
                            <span class="story-card__stars" aria-label="5 out of 5 stars">
                                @for($i = 0; $i < 5; $i++)
                                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9L12 2.6z"/></svg>
                                @endfor
                            </span>
                        </div>
                        <blockquote>
                            <p>&ldquo;<x-editable path="testimonials.items.{{ $loop->index }}.quote">{{ $testimonial['quote'] ?? '' }}</x-editable>&rdquo;</p>
                        </blockquote>
                        <figcaption class="story-card__author">
                            <span class="story-card__avatar" aria-hidden="true">{{ $initials }}</span>
                            <span>
                                <strong data-edit="testimonials.items.{{ $loop->index }}.name">{{ $testimonial['name'] ?? '' }}</strong>
                                <small data-edit="testimonials.items.{{ $loop->index }}.role">{{ $testimonial['role'] ?? '' }}</small>
                            </span>
                        </figcaption>
                    </figure>
                @endforeach
            </div>
        </div>
    </section>
@endif