@php
    $classtypesShow = App\Models\HomepageSetting::get('classtypes_show', true);
    $classtypesLabel = App\Models\HomepageSetting::get('classtypes_label', 'CLASS FORMATS');
    $classtypesHeading = App\Models\HomepageSetting::get('classtypes_heading', 'Choose the Style That Suits You');
    $classtypesSubtext = App\Models\HomepageSetting::get('classtypes_subtext', 'We offer both collaborative group classrooms and highly focused private sessions.');
    $groupCard = App\Models\HomepageSetting::get('classtypes_group_json', []);
    $privateCard = App\Models\HomepageSetting::get('classtypes_private_json', []);
@endphp

@if($classtypesShow)
<div id="section-classtypes" class="py-24 bg-white relative {{ isset($activeEditingSection) && $activeEditingSection === 'classtypes' ? 'ring-4 ring-amber-500' : '' }}">
    @if(isset($activeEditingSection) && $activeEditingSection === 'classtypes')
        <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: Class Types</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);">{{ $classtypesLabel }}</span>
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                {{ $classtypesHeading }}
            </h2>
            <p class="text-slate-500 font-light text-base max-w-2xl mx-auto">
                {{ $classtypesSubtext }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            <!-- Group Classes Card -->
            @if(!empty($groupCard))
            <div class="bg-slate-50/50 rounded-3xl p-8 border hover:bg-white shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col justify-between" style="border-color: {{ $groupCard['border_color'] ?? '#3B82F6' }};">
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <span class="inline-flex items-center px-3 py-1 rounded-xl text-[10px] font-bold uppercase tracking-wider bg-blue-50 text-blue-700">
                            {{ $groupCard['badge'] ?? '1-to-Many' }}
                        </span>
                        <span class="text-[10px] font-extrabold text-blue-600 uppercase tracking-widest bg-blue-50 px-2.5 py-1 rounded-xl">{{ $groupCard['popular_label'] ?? 'Most Popular' }}</span>
                    </div>

                    <div class="space-y-3">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 rounded-xl flex items-center justify-center text-white text-base" style="background-color: {{ $groupCard['icon_bg'] ?? '#3B82F6' }};">
                                👥
                            </div>
                            <h3 class="text-xl font-black text-slate-800">{{ $groupCard['title'] ?? 'Group Classes' }}</h3>
                        </div>
                        <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $groupCard['description'] ?? '' }}</p>
                    </div>

                    <!-- Includes checklist -->
                    <ul class="space-y-3 pt-2">
                        @foreach($groupCard['includes'] ?? [] as $item)
                            <li class="flex items-start text-xs text-slate-600 font-medium">
                                <span class="text-blue-500 mr-2 flex-shrink-0">✓</span>
                                <span>{{ $item }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="pt-8 mt-8 border-t border-slate-100 flex items-center justify-between">
                    <div>
                        <span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">Pricing Starting From</span>
                        <div class="flex items-baseline">
                            <span class="text-xl font-black text-slate-800">{{ $groupCard['price_from'] ?? 'from $45' }}</span>
                            <span class="text-xs text-slate-400 font-medium ml-1">{{ $groupCard['price_unit'] ?? '/ month' }}</span>
                        </div>
                    </div>
                    <a href="{{ $groupCard['btn_url'] ?? '#' }}" class="inline-flex items-center px-6 py-3 rounded-full text-xs font-bold text-white shadow-md hover:shadow-lg transition" style="background-color: var(--primary);">
                        {{ $groupCard['btn_label'] ?? 'Browse Group Classes' }}
                    </a>
                </div>
            </div>
            @endif

            <!-- Private Classes Card -->
            @if(!empty($privateCard))
            <div class="bg-slate-50/50 rounded-3xl p-8 border hover:bg-white shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col justify-between" style="border-color: {{ $privateCard['border_color'] ?? '#C9971A' }};">
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <span class="inline-flex items-center px-3 py-1 rounded-xl text-[10px] font-bold uppercase tracking-wider bg-amber-50 text-amber-700">
                            {{ $privateCard['badge'] ?? '1-to-1' }}
                        </span>
                        <span class="text-[10px] font-extrabold text-amber-600 uppercase tracking-widest bg-amber-50 px-2.5 py-1 rounded-xl" style="color: var(--accent);">{{ $privateCard['premium_label'] ?? 'Premium' }}</span>
                    </div>

                    <div class="space-y-3">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 rounded-xl flex items-center justify-center text-white text-base" style="background-color: {{ $privateCard['icon_bg'] ?? '#C9971A' }};">
                                👤
                            </div>
                            <h3 class="text-xl font-black text-slate-800">{{ $privateCard['title'] ?? 'Private 1-to-1 Classes' }}</h3>
                        </div>
                        <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $privateCard['description'] ?? '' }}</p>
                    </div>

                    <!-- Includes checklist -->
                    <ul class="space-y-3 pt-2">
                        @foreach($privateCard['includes'] ?? [] as $item)
                            <li class="flex items-start text-xs text-slate-600 font-medium">
                                <span class="text-amber-500 mr-2 flex-shrink-0" style="color: var(--accent);">✓</span>
                                <span>{{ $item }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="pt-8 mt-8 border-t border-slate-100 flex items-center justify-between">
                    <div>
                        <span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">Pricing Starting From</span>
                        <div class="flex items-baseline">
                            <span class="text-xl font-black text-slate-800">{{ $privateCard['price_from'] ?? 'from $65' }}</span>
                            <span class="text-xs text-slate-400 font-medium ml-1">{{ $privateCard['price_unit'] ?? '/ session' }}</span>
                        </div>
                    </div>
                    <a href="{{ $privateCard['btn_url'] ?? '#' }}" class="inline-flex items-center px-6 py-3 rounded-full text-xs font-bold text-white shadow-md hover:shadow-lg transition" style="background-color: var(--accent);">
                        {{ $privateCard['btn_label'] ?? 'Find a Private Tutor' }}
                    </a>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endif