@php
    $howitworksShow = App\Models\HomepageSetting::get('howitworks_show', true);
    $howitworksLabel = App\Models\HomepageSetting::get('howitworks_label', 'THE PROCESS');
    $howitworksHeading = App\Models\HomepageSetting::get('howitworks_heading', 'From Signup to Exam-Ready');
    $howitworksSubtext = App\Models\HomepageSetting::get('howitworks_subtext', 'Six simple steps to master any subject and boost your grades.');
    $howitworksSteps = App\Models\HomepageSetting::get('howitworks_steps_json', []);
    $howitworksColumns = App\Models\HomepageSetting::get('howitworks_columns', 3);
    $howitworksConnectorLines = App\Models\HomepageSetting::get('howitworks_connector_lines', true);
@endphp

@if($howitworksShow)
<div id="section-howitworks" class="py-20 bg-white relative {{ isset($activeEditingSection) && $activeEditingSection === 'howitworks' ? 'ring-4 ring-amber-500' : '' }}">
    @if(isset($activeEditingSection) && $activeEditingSection === 'howitworks')
        <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: How It Works</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);">{{ $howitworksLabel }}</span>
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                {{ $howitworksHeading }}
            </h2>
            <p class="text-slate-500 font-light text-base">
                {{ $howitworksSubtext }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{{ $howitworksColumns }} gap-8 relative">
            @foreach($howitworksSteps as $index => $step)
                @if($step['visible'] ?? true)
                    <div class="bg-slate-50/50 rounded-3xl p-8 border border-slate-100/50 shadow-sm relative group flex flex-col justify-between hover:shadow-md transition">
                        <div class="space-y-4">
                            <!-- Icon and Step Number -->
                            <div class="flex items-center justify-between">
                                <div class="h-12 w-12 rounded-2xl flex items-center justify-center text-white text-xl shadow-md" style="background-color: {{ $step['icon_bg'] ?? '#3B82F6' }};">
                                    <span>
                                        @if(($step['icon'] ?? '') === 'user-plus') 👤
                                        @elseif(($step['icon'] ?? '') === 'academic-cap') 🎓
                                        @elseif(($step['icon'] ?? '') === 'calendar') 📅
                                        @elseif(($step['icon'] ?? '') === 'video-camera') 📹
                                        @elseif(($step['icon'] ?? '') === 'clipboard-check') 📝
                                        @elseif(($step['icon'] ?? '') === 'chart-bar') 📊
                                        @else ✦
                                        @endif
                                    </span>
                                </div>
                                <span class="text-4xl font-black text-slate-200 group-hover:text-accent/25 transition">
                                    {{ $step['step_number'] ?? ($index + 1) }}
                                </span>
                            </div>

                            <div class="space-y-2">
                                <h3 class="text-lg font-bold text-slate-800">{{ $step['title'] ?? '' }}</h3>
                                <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $step['description'] ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>
@endif