@php
    $testimonials = [
        ['name' => 'Sabina Gurung', 'role' => 'Daily Commuter, Kathmandu', 'img' => 11, 'text' => 'Fintech completely changed my daily commute. No more digging for exact change — just tap and go.', 'theme' => 'blue'],
        ['name' => 'Bikash Rai', 'role' => 'College Student', 'img' => 32, 'text' => 'The student discount is applied automatically. Recharging via eSewa takes less than a minute.', 'theme' => 'gold'],
        ['name' => 'Anjali Shrestha', 'role' => 'Working Professional', 'img' => 47, 'text' => 'Boarding is so much faster now. I love checking my trip history right in the app.', 'theme' => 'teal'],
        ['name' => 'Prakash Tamang', 'role' => 'Senior Citizen', 'img' => 15, 'text' => 'Simple to use, and the senior citizen fare concession is applied without any extra paperwork.', 'theme' => 'purple'],
    ];
@endphp

<section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
    <div class="mx-auto max-w-7xl px-6">
        <div class="reveal mx-auto mb-16 flex max-w-2xl flex-col items-center text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">Testimonials</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                What Our <span class="text-primary dark:text-secondary">Riders Say</span>
            </h2>
            <button type="button" data-swiper-autoplay-toggle="testimonials-swiper" aria-pressed="false" aria-label="Pause testimonials autoplay"
                    class="swiper-autoplay-toggle mt-4 grid h-11 w-11 place-items-center rounded-full border border-slate-200 text-slate-500 transition duration-200 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-400">
                <i class="fa-solid fa-pause text-xs swiper-autoplay-icon-pause"></i>
                <i class="fa-solid fa-play text-xs swiper-autoplay-icon-play hidden"></i>
            </button>
        </div>

        <div class="reveal swiper testimonials-swiper pb-12">
            <div class="swiper-wrapper">
                @foreach ($testimonials as $t)
                    <div class="swiper-slide">
                        <div class="glow-card glow-card--{{ $t['theme'] }} flex h-full flex-col">
                            <span class="glow-card__glow" aria-hidden="true"></span>
                            <div class="mb-4 text-accent-a11y dark:text-accent">
                                <span class="sr-only">Rated 5 out of 5 stars</span>
                                @for ($i = 0; $i < 5; $i++)
                                    <i class="fa-solid fa-star text-sm" aria-hidden="true"></i>
                                @endfor
                            </div>
                            <p class="mb-6 flex-1 text-sm leading-relaxed text-slate-600 dark:text-slate-300">&ldquo;{{ $t['text'] }}&rdquo;</p>
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/48?img={{ $t['img'] }}" alt="{{ $t['name'] }}"
                                     width="44" height="44" loading="lazy"
                                     class="h-11 w-11 flex-shrink-0 rounded-full border-2 border-slate-100 object-cover dark:border-white/10">
                                <div>
                                    <p class="text-sm font-bold text-slate-900 dark:text-white">{{ $t['name'] }}</p>
                                    <p class="text-xs text-slate-500 dark:text-slate-400">{{ $t['role'] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</section>