@php($d = $d ?? [])
@php($items = array_values($d['items'] ?? []))
<section class="vs-section vs-testimonials" id="testimonials"
         x-data="{ i:0, n:{{ count($items) }}, go(d){ this.i=(this.i+d+this.n)%this.n } }">
    <div class="vs-container">
        <div class="vs-head" data-aos="fade-up"><h2 class="vs-h2">{{ $d['heading'] ?? '' }}</h2></div>
        <div class="vs-quotes" data-aos="fade-up">
            @foreach($items as $idx => $t)
                <figure class="vs-quote" x-show="i==={{ $idx }}" x-transition.opacity.duration.500ms
                        @if($idx>0) style="display:none" @endif>
                    <i class="fas fa-quote-left vs-quote-mark"></i>
                    <blockquote>{{ $t['quote'] ?? '' }}</blockquote>
                    <figcaption>
                        <strong>{{ $t['name'] ?? '' }}</strong>
                        @if(!empty($t['meta']))<span>{{ $t['meta'] }}</span>@endif
                    </figcaption>
                </figure>
            @endforeach
            @if(count($items) > 1)
                <div class="vs-quote-nav">
                    <button @click="go(-1)" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
                    <div class="vs-dots">
                        @foreach($items as $idx => $t)
                            <button class="vs-dot" :class="{ 'is-active': i==={{ $idx }} }" @click="i={{ $idx }}"></button>
                        @endforeach
                    </div>
                    <button @click="go(1)" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
                </div>
            @endif
        </div>
    </div>
</section>
