@props(['testimonials'])

<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8" aria-labelledby="testimonials-heading">
    <div class="mx-auto max-w-2xl text-center">
        <h2 id="testimonials-heading" class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
            Trusted by everyday Nigerians
        </h2>
    </div>

    <div class="mt-16 grid gap-8 md:grid-cols-3">
        @foreach ($testimonials as $testimonial)
            <figure class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <blockquote class="text-slate-700 dark:text-slate-200">
                    <p>&ldquo;{{ $testimonial['quote'] }}&rdquo;</p>
                </blockquote>
                <figcaption class="mt-6 flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-brand-100 font-semibold text-brand-700 dark:bg-brand-900/60 dark:text-brand-300">
                        {{ Str::substr($testimonial['name'], 0, 1) }}
                    </span>
                    <div>
                        <div class="text-sm font-semibold text-slate-900 dark:text-white">{{ $testimonial['name'] }}</div>
                        <div class="text-xs text-slate-500 dark:text-slate-400">{{ $testimonial['role'] }}</div>
                    </div>
                </figcaption>
            </figure>
        @endforeach
    </div>
</section>