@php
    $testimonials = [
        ['name' => 'Sabina Gurung', 'role' => 'Daily Commuter, Kathmandu', 'img' => 11, 'text' => 'Yatra Card completely changed my daily commute. No more digging for exact change — just tap and go.'],
        ['name' => 'Bikash Rai', 'role' => 'College Student', 'img' => 32, 'text' => 'The student discount is applied automatically. Recharging via eSewa takes less than a minute.'],
        ['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.'],
        ['name' => 'Prakash Tamang', 'role' => 'Senior Citizen', 'img' => 15, 'text' => 'Simple to use, and the senior citizen fare concession is applied without any extra paperwork.'],
    ];
@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 max-w-2xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest 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>
        </div>

        <div class="reveal swiper testimonials-swiper pb-12">
            <div class="swiper-wrapper">
                @foreach ($testimonials as $t)
                    <div class="swiper-slide">
                        <div class="flex h-full flex-col rounded-2xl border border-slate-100 bg-white p-7 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-white/10 dark:bg-panel">
                            <div class="mb-4 text-accent">
                                @for ($i = 0; $i < 5; $i++)
                                    <i class="fa-solid fa-star text-sm"></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>