@php
    $testimonialsShow = App\Models\HomepageSetting::get('testimonials_show', true);
    $testimonialsLabel = App\Models\HomepageSetting::get('testimonials_label', 'TESTIMONIALS');
    $testimonialsHeading = App\Models\HomepageSetting::get('testimonials_heading', 'Hear from Our Students');
    $testimonialsSubtext = App\Models\HomepageSetting::get('testimonials_subtext', 'See how our certified teachers and structured past worksheets help students globally achieve top exam marks.');
    $ratingShow = App\Models\HomepageSetting::get('testimonials_rating_show', true);
    $ratingScore = App\Models\HomepageSetting::get('testimonials_score', '4.9');
    $ratingTotal = App\Models\HomepageSetting::get('testimonials_total', '847');
    $breakdown = App\Models\HomepageSetting::get('testimonials_breakdown_json', []);
    $testimonialsList = App\Models\HomepageSetting::get('testimonials_list_json', []);
    $testimonialsLimit = App\Models\HomepageSetting::get('testimonials_limit', 6);
    $displayMode = App\Models\HomepageSetting::get('testimonials_display_mode', 'grid');
    $carouselSpeed = App\Models\HomepageSetting::get('testimonials_carousel_speed', 'Medium');
@endphp

@if($testimonialsShow)
<div id="section-testimonials" class="py-24 bg-white relative {{ isset($activeEditingSection) && $activeEditingSection === 'testimonials' ? 'ring-4 ring-amber-500' : '' }}">
    @if(isset($activeEditingSection) && $activeEditingSection === 'testimonials')
        <div class="absolute top-4 left-4 z-50 bg-amber-500 text-white font-bold text-xs uppercase px-3 py-1 rounded-full shadow-lg">Editing: Testimonials</div>
    @endif
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
            <span class="inline-block text-xs font-semibold text-accent uppercase tracking-widest" style="color: var(--accent);">{{ $testimonialsLabel }}</span>
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                {{ $testimonialsHeading }}
            </h2>
            <p class="text-slate-500 font-light text-base max-w-2xl mx-auto">
                {{ $testimonialsSubtext }}
            </p>
        </div>

        <!-- Rating Overview Bar -->
        @if($ratingShow)
            <div class="max-w-3xl mx-auto bg-slate-50 border border-slate-100 rounded-3xl p-6 sm:p-8 mb-16 flex flex-col md:flex-row items-center justify-between gap-8">
                <!-- Large score -->
                <div class="text-center md:text-left flex items-center space-x-4">
                    <div class="text-5xl font-black text-slate-800">{{ $ratingScore }}</div>
                    <div>
                        <div class="flex items-center text-amber-500 text-lg">
                            ★★★★★
                        </div>
                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mt-1">Based on {{ $ratingTotal }} Reviews</span>
                    </div>
                </div>

                <!-- Star breakdown -->
                <div class="flex-1 max-w-md w-full space-y-2">
                    @foreach(['five' => 5, 'four' => 4, 'three' => 3, 'two' => 2, 'one' => 1] as $key => $num)
                        @php $pct = $breakdown[$key] ?? 0; @endphp
                        <div class="flex items-center text-xs text-slate-500 font-bold space-x-3">
                            <span class="w-12 text-right">{{ $num }} Stars</span>
                            <div class="flex-1 bg-slate-200 h-2 rounded-full overflow-hidden">
                                <div class="bg-amber-500 h-full rounded-full" style="width: {{ $pct }}%; background-color: var(--accent);"></div>
                            </div>
                            <span class="w-8 text-right">{{ $pct }}%</span>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        @php
            $visibleTestimonials = collect($testimonialsList)->filter(fn($t) => $t['visible'] ?? true)->take($testimonialsLimit);
        @endphp

        <!-- Grid Layout -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($visibleTestimonials as $t)
                <div class="bg-slate-50/50 rounded-3xl p-8 border border-slate-100/50 shadow-sm flex flex-col justify-between hover:shadow-md hover:bg-white hover:-translate-y-1 transition duration-300">
                    <div class="space-y-6">
                        <!-- Rating Stars -->
                        <div class="flex text-amber-500 text-base">
                            {{ str_repeat('★', $t['stars'] ?? 5) }}{{ str_repeat('☆', 5 - ($t['stars'] ?? 5)) }}
                        </div>
                        <!-- Quote -->
                        <p class="text-xs font-light text-slate-600 italic leading-relaxed">
                            "{{ $t['quote'] ?? '' }}"
                        </p>
                    </div>

                    <!-- Student Details -->
                    <div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between">
                        <div>
                            <h4 class="text-xs font-bold text-slate-800">{{ $t['name'] ?? '' }}</h4>
                            <span class="text-[10px] text-slate-400 font-medium block mt-0.5">{{ $t['detail'] ?? '' }}</span>
                        </div>
                        @if(isset($t['curriculum']) && $t['curriculum'])
                            <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[9px] font-bold uppercase tracking-wider bg-accent/10 text-accent border border-accent/20" style="color: var(--accent); border-color: rgba(201, 151, 26, 0.2); background-color: rgba(201, 151, 26, 0.05);">
                                {{ $t['curriculum'] }}
                            </span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif