@props(['testimonials'])

<div class="relative bg-white py-16 sm:py-24 border-t border-gray-100">
    <div class="absolute inset-0" style="background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px), linear-gradient(to bottom, #f1f5f9 1px, transparent 1px); background-size: 64px 64px; opacity: 0.5;"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <span class="inline-block py-1.5 px-4 rounded-full bg-teal-50 text-teal-700 text-sm font-bold tracking-widest uppercase mb-4 shadow-sm border border-teal-100">
                Success Stories
            </span>
            <h2 class="text-3xl font-extrabold text-slate-900 sm:text-4xl">What Our Patients Say</h2>
            <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600">Real experiences from families and individuals we've had the honor to treat.</p>
        </div>

        @if($testimonials->count() > 0)
            <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($testimonials as $testimonial)
                    <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 shadow-sm relative">
                        <div class="flex text-yellow-400 mb-4">
                            @for($i = 0; $i < 5; $i++)
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <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>
                        <p class="text-gray-600 italic mb-6">"{!! nl2br(e($testimonial->text)) !!}"</p>
                        <div class="font-bold text-gray-900">
                            @php
                                // Anonymize name to initials if possible for privacy (e.g. S. S.)
                                // If the user wants full names, they can just use $testimonial->author_name. The prompt asked for "privacy-safe patient names (e.g., 'S. S., Kathmandu')"
                                // We will format it if we can, or just print it if it's already short.
                                // Just a simple rendering for now.
                            @endphp
                            &mdash; {{ $testimonial->author_name }}
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="mt-16 text-center text-gray-500">
                <p>No testimonials available at this time.</p>
            </div>
        @endif
    </div>
</div>
