@props(['segment' => null])

@php
$testimonials = collect(config('phylopos.testimonials'));
if ($segment) {
    $testimonials = $testimonials->filter(fn($t) => $t['segment'] === $segment)->values();
}
if ($testimonials->isEmpty()) {
    $testimonials = collect(config('phylopos.testimonials'));
}
@endphp

<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">What operators say</p>
            <h2 class="heading-md max-w-2xl mx-auto text-balance">
                Trusted by teams running on tight margins
            </h2>
        </div>

        <div class="grid md:grid-cols-2 gap-6">
            @foreach($testimonials as $t)
            <div class="testimonial-card" data-animate>
                {{-- Stars --}}
                <div class="flex gap-1">
                    @for($i = 0; $i < 5; $i++)
                    <svg class="w-4 h-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    @endfor
                </div>

                <blockquote class="text-graphite-700 leading-relaxed italic">
                    "{{ $t['quote'] }}"
                </blockquote>

                <div class="flex items-center gap-3 mt-auto">
                    <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center
                                text-emerald-900 font-bold text-sm flex-shrink-0">
                        {{ strtoupper(substr($t['name'], 0, 1)) }}
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-graphite-900">{{ $t['name'] }}</div>
                        <div class="text-xs text-graphite-500">{{ $t['title'] }}, {{ $t['company'] }}</div>
                    </div>
                    <div class="ml-auto">
                        <span class="badge-emerald">{{ $t['segment'] }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>