@if (!empty($testimonials) && !$testimonials->isEmpty())
    <section class="home-sections premium-mock-testimonials-section reveal-up pb-25 pb-lg-32 px-12 px-lg-20 premium-home-strip premium-home-strip--testimonials" aria-labelledby="premium-testimonials-heading">
        <div class="container px-0">
            <div class="premium-testimonials-board mx-auto">
                <header class="premium-testimonials-header text-center mx-auto mb-15 mb-lg-20">
                    <p class="premium-testimonials-kicker mb-10">{{ trans('home.premium_testimonials_eyebrow') }}</p>
                    <h2 id="premium-testimonials-heading" class="premium-testimonials-heading mb-8">{{ trans('home.premium_testimonials_heading') }}</h2>
                    @if (trim((string) __('home.premium_testimonials_verified')) !== '')
                        <p class="premium-testimonials-verified mb-10">{{ trans('home.premium_testimonials_verified') }}</p>
                    @endif
                    <p class="premium-testimonials-lead mb-0">{{ trans('home.premium_testimonials_sub') }}</p>
                </header>
                <div class="premium-testimonials-swiper-shell">
                    <div class="swiper testimonials-swiper2 premium-testimonials-swiper">
                        <div class="swiper-wrapper">
                            @foreach ($testimonials as $testimonial)
                                <div class="swiper-slide h-auto">
                                    <article class="testimonial_card premium-mock-testimonial-card">
                                        <div class="premium-mock-testimonial-card__inner">
                                            <div class="premium-mock-testimonial-card__avatar flex-shrink-0">
                                                <img src="{{ $testimonial->user_avatar }}" alt="" width="52" height="52" loading="lazy" decoding="async" class="rounded-circle img-cover">
                                            </div>
                                            <div class="premium-mock-testimonial-card__main">
                                                <div class="rating premium-mock-testimonial-card__stars d-flex align-items-center flex-wrap" aria-hidden="true">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        @php $filled = $i <= (int) ($testimonial->rating ?? 5); @endphp
                                                        <i class="fa {{ $filled ? 'fa-star' : 'fa-star-o' }} {{ $filled ? 'filled' : '' }}" aria-hidden="true"></i>
                                                    @endfor
                                                </div>
                                                <blockquote class="premium-mock-testimonial-card__feedback mb-0">
                                                    <div class="premium-mock-testimonial-card__text">{!! nl2br(e($testimonial->comment)) !!}</div>
                                                </blockquote>
                                                <div class="premium-mock-testimonial-card__name">{{ $testimonial->user_name }}</div>
                                                @if (!empty($testimonial->user_bio))
                                                    <div class="premium-mock-testimonial-card__role font-14">{{ $testimonial->user_bio }}</div>
                                                @elseif (!empty($testimonial->country))
                                                    <div class="premium-mock-testimonial-card__role font-14">{{ $testimonial->country }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="d-flex justify-content-center premium-testimonials-pagination-wrap">
                        <div class="swiper-pagination testimonials-swiper-pagination premium-testimonials-pagination premium-swiper-dots-shell"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif
