@php
    $featuresShow = App\Models\HomepageSetting::get('features_show', true);
    $featuresLabel = App\Models\HomepageSetting::get('features_label', 'WHY CHOOSE US');
    $featuresHeading = App\Models\HomepageSetting::get('features_heading', 'Everything a Serious Student Needs');
    $featuresSubtext = App\Models\HomepageSetting::get('features_subtext', 'Our integrated web portal combines premium video spaces, dynamic worksheets, and installment invoicing to streamline learning.');
    $featuresList = App\Models\HomepageSetting::get('features_list_json', []);
    $card1 = App\Models\HomepageSetting::get('features_card1_json', []);
    $card2 = App\Models\HomepageSetting::get('features_card2_json', []);
    $card3 = App\Models\HomepageSetting::get('features_card3_json', []);
    $featuresFloat = App\Models\HomepageSetting::get('features_float_animation', true);
    $featuresSpeed = App\Models\HomepageSetting::get('features_animation_speed', 'Medium');
@endphp

@if($featuresShow)
<div id="section-features" class="py-24 bg-white relative overflow-hidden {{ isset($activeEditingSection) && $activeEditingSection === 'features' ? 'ring-4 ring-amber-500' : '' }}">
    @if(isset($activeEditingSection) && $activeEditingSection === 'features')
        <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: Why CognitiaGlobal</div>
    @endif
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
            <!-- Left: Text & Features List -->
            <div class="lg:col-span-6 space-y-8">
                <div class="space-y-4">
                    <span class="inline-block text-xs font-semibold text-accent uppercase tracking-widest" style="color: var(--accent);">{{ $featuresLabel }}</span>
                    <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                        {{ $featuresHeading }}
                    </h2>
                    <p class="text-slate-500 font-light text-base leading-relaxed">
                        {{ $featuresSubtext }}
                    </p>
                </div>

                <!-- Features List -->
                <div class="space-y-6">
                    @foreach($featuresList as $feature)
                        @if($feature['visible'] ?? true)
                            <div class="flex items-start space-x-4">
                                <div class="h-10 w-10 rounded-xl flex items-center justify-center text-white flex-shrink-0" style="background-color: {{ $feature['icon_bg'] ?? '#3B82F6' }};">
                                    <span>
                                        @if(($feature['icon'] ?? '') === 'video-camera') 📹
                                        @elseif(($feature['icon'] ?? '') === 'collection') 📚
                                        @elseif(($feature['icon'] ?? '') === 'calendar') 📅
                                        @elseif(($feature['icon'] ?? '') === 'credit-card') 💳
                                        @else ✦
                                        @endif
                                    </span>
                                </div>
                                <div class="space-y-1">
                                    <h3 class="text-sm font-bold text-slate-800">{{ $feature['title'] ?? '' }}</h3>
                                    <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $feature['description'] ?? '' }}</p>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            <!-- Right: Interactive Preview Cards Layout -->
            <div class="lg:col-span-6 relative h-[480px] w-full max-w-lg mx-auto">
                <!-- Wrapper for floating animations -->
                <div class="absolute inset-0 
                    @if($featuresFloat)
                        @if($featuresSpeed === 'Slow') animate-pulse duration-10000
                        @elseif($featuresSpeed === 'Medium') animate-pulse duration-7000
                        @elseif($featuresSpeed === 'Fast') animate-pulse duration-4000
                        @endif
                    @endif
                ">
                    <!-- Card 1 (Top Left) - Live Class -->
                    @if(!empty($card1))
                    <div class="absolute top-4 left-4 w-72 bg-white rounded-3xl p-5 border shadow-lg transform hover:scale-[1.02] transition duration-300" style="border-color: {{ $card1['border_color'] ?? '#C9971A' }}; z-index: 10;">
                        <div class="flex items-center justify-between mb-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[9px] font-bold uppercase tracking-wider bg-red-50 text-red-600">
                                <span class="w-1.5 h-1.5 bg-red-500 rounded-full mr-1.5 animate-pulse"></span>
                                Live Room
                            </span>
                            <span class="text-[10px] text-slate-400 font-semibold">{{ $card1['countdown'] ?? 'Starting in 15 min' }}</span>
                        </div>
                        <h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">{{ $card1['title'] ?? 'Live Class Starting Soon' }}</h4>
                        <h3 class="text-sm font-black text-slate-800 mb-2">{{ $card1['subject'] ?? 'Mathematics AA HL' }}</h3>
                        <p class="text-[10px] text-slate-400 font-light mb-4">Taught by: <span class="font-bold text-slate-700">{{ $card1['teacher'] ?? 'Mr. Arjun Krishnan' }}</span></p>
                        <button type="button" class="w-full text-center py-2 bg-slate-900 text-white rounded-2xl text-xs font-bold shadow-md hover:bg-slate-800 transition">
                            {{ $card1['btn_label'] ?? 'Join Zoom' }}
                        </button>
                    </div>
                    @endif

                    <!-- Card 2 (Middle Right) - Installments -->
                    @if(!empty($card2))
                    <div class="absolute top-36 right-4 w-64 bg-white rounded-3xl p-5 border shadow-lg transform hover:scale-[1.02] transition duration-300" style="border-color: {{ $card2['border_color'] ?? '#3B82F6' }}; z-index: 20;">
                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ $card2['title'] ?? 'Your Next Installment' }}</h4>
                        <div class="flex items-baseline space-x-2 mb-2">
                            <span class="text-2xl font-black text-slate-800">{{ $card2['amount'] ?? '$150' }}</span>
                            <span class="text-[10px] font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded-lg">{{ $card2['due_text'] ?? 'Due in 3 days' }}</span>
                        </div>
                        <div class="space-y-1 mb-4">
                            <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                                <div class="bg-blue-500 h-full w-2/3"></div>
                            </div>
                            <span class="text-[9px] text-slate-400 font-semibold block text-right">{{ $card2['progress'] ?? '2 of 3 installments paid' }}</span>
                        </div>
                        <button type="button" class="w-full text-center py-2 text-white rounded-2xl text-xs font-bold shadow-md bg-blue-600 hover:bg-blue-700 transition">
                            {{ $card2['btn_label'] ?? 'Pay Now' }}
                        </button>
                    </div>
                    @endif

                    <!-- Card 3 (Bottom Left) - Graded -->
                    @if(!empty($card3))
                    <div class="absolute bottom-4 left-8 w-68 bg-white rounded-3xl p-5 border shadow-lg transform hover:scale-[1.02] transition duration-300" style="border-color: {{ $card3['border_color'] ?? '#10B981' }}; z-index: 15;">
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="h-8 w-8 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-sm">✓</div>
                            <div>
                                <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">{{ $card3['title'] ?? 'Assignment Graded ✓' }}</h4>
                                <h3 class="text-xs font-extrabold text-slate-800">{{ $card3['subject'] ?? 'Physics HL' }}</h3>
                            </div>
                        </div>
                        <div class="bg-slate-50 rounded-2xl p-3 border border-slate-100">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-[10px] text-slate-500 font-medium">Your Score:</span>
                                <span class="text-xs font-black text-slate-800">{{ $card3['score'] ?? '87/100' }}</span>
                            </div>
                            <p class="text-[9px] text-slate-400 font-light italic">"{{ $card3['feedback'] ?? 'Great work!' }}"</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif