@php
    $demoShow = App\Models\HomepageSetting::get('demo_show', true);
    $demoBgType = App\Models\HomepageSetting::get('demo_bg_type', 'dark_gradient');
    $demoBgImagePath = App\Models\HomepageSetting::get('demo_bg_image_path');
    $demoGoldGlow = App\Models\HomepageSetting::get('demo_gold_glow', true);
    $demoDotPattern = App\Models\HomepageSetting::get('demo_dot_pattern', true);
    $demoBadgeShow = App\Models\HomepageSetting::get('demo_badge_show', true);
    $demoBadgeText = App\Models\HomepageSetting::get('demo_badge_text', 'FREE — NO PAYMENT REQUIRED');
    $demoHeading1 = App\Models\HomepageSetting::get('demo_heading1', 'Book Your Free');
    $demoHeading2 = App\Models\HomepageSetting::get('demo_heading2', 'Trial Class Today');
    $demoSubtext = App\Models\HomepageSetting::get('demo_subtext', 'Enter your details below. Our staff will analyze your syllabus requirements, matching you with the perfect expert tutor.');
    $demoFields = App\Models\HomepageSetting::get('demo_fields_json', [
        'phone' => true, 'curriculum' => true, 'grade' => true, 'subject' => true, 'message' => true
    ]);
    $demoBtnLabel = App\Models\HomepageSetting::get('demo_btn_label', 'Request My Free Demo →');
    $demoBtnColor = App\Models\HomepageSetting::get('demo_btn_color', 'gold');
    $demoSuccessHeading = App\Models\HomepageSetting::get('demo_success_heading', 'Thank you! 🎉');
    $demoSuccessText = App\Models\HomepageSetting::get('demo_success_text', 'We\'ve received your request. Our education team will contact you within 24 hours to schedule your session.');
    $demoSuccessShowBack = App\Models\HomepageSetting::get('demo_success_show_back', true);
    $demoSuccessBackLabel = App\Models\HomepageSetting::get('demo_success_back_label', 'Back to Homepage');
@endphp

@if($demoShow)
<div id="section-demo" class="py-24 bg-slate-900 relative overflow-hidden {{ isset($activeEditingSection) && $activeEditingSection === 'demo' ? 'ring-4 ring-amber-500' : '' }}"
     style="
        @if($demoBgType === 'dark_gradient')
            background: radial-gradient(circle at top right, rgba(201, 151, 26, 0.15), transparent), radial-gradient(circle at bottom left, rgba(11, 20, 55, 0.2), transparent); background-color: var(--primary);
        @elseif($demoBgType === 'image' && $demoBgImagePath)
            background: linear-gradient(rgba(11, 20, 55, 0.8), rgba(11, 20, 55, 0.8)), url('{{ asset('storage/' . $demoBgImagePath) }}') center center / cover no-repeat;
        @endif
     ">
    @if(isset($activeEditingSection) && $activeEditingSection === 'demo')
        <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: Demo Booking CTA</div>
    @endif

    @if($demoDotPattern)
        <div class="absolute inset-0 bg-grid-white/[0.02] bg-[size:32px_32px]" style="z-index: 1;"></div>
    @endif
    @if($demoGoldGlow)
        <div class="absolute -right-24 -top-24 w-72 h-72 bg-accent/5 rounded-full blur-3xl" style="z-index: 1;"></div>
        <div class="absolute -left-24 -bottom-24 w-72 h-72 bg-primary/10 rounded-full blur-3xl" style="z-index: 1;"></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: Content -->
            <div class="lg:col-span-5 text-left space-y-6">
                @if($demoBadgeShow)
                    <span class="inline-flex items-center px-3.5 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider text-accent bg-accent/10 border border-accent/20" style="color: var(--accent); border-color: rgba(201, 151, 26, 0.3); background-color: rgba(201, 151, 26, 0.1);">
                        {{ $demoBadgeText }}
                    </span>
                @endif
                
                <h2 class="font-display text-4xl font-extrabold text-white tracking-tight leading-tight">
                    {{ $demoHeading1 }} <br>
                    <span class="text-accent" style="color: var(--accent);">{{ $demoHeading2 }}</span>
                </h2>
                
                <p class="text-sm text-gray-300 font-light leading-relaxed">
                    {{ $demoSubtext }}
                </p>
            </div>

            <!-- Right: Form card -->
            <div class="lg:col-span-7">
                <div class="bg-white rounded-3xl p-8 sm:p-10 shadow-2xl border border-slate-100/50">
                    @if(session('success'))
                        <div class="text-center py-8 space-y-6">
                            <div class="h-16 w-16 mx-auto bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center text-3xl">✓</div>
                            <div class="space-y-2">
                                <h3 class="text-xl font-bold text-slate-800">{{ $demoSuccessHeading }}</h3>
                                <p class="text-xs text-slate-500 font-light max-w-sm mx-auto leading-relaxed">{{ $demoSuccessText }}</p>
                            </div>
                            @if($demoSuccessShowBack)
                                <a href="{{ route('home') }}" 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);">
                                    {{ $demoSuccessBackLabel }}
                                </a>
                            @endif
                        </div>
                    @else
                        <form method="POST" action="{{ route('demo.store') }}" class="space-y-5">
                            @csrf
                            
                            <!-- Honeypot -->
                            <input type="text" name="website" class="hidden" style="display:none;" autocomplete="off">

                            <!-- Inputs Row 1 -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div class="space-y-1.5">
                                    <label for="demo-name" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Full Name</label>
                                    <input id="demo-name" type="text" name="name" required placeholder="John Doe" value="{{ old('name') }}" class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent">
                                    @error('name') <span class="text-[10px] text-red-500 block font-semibold mt-1">{{ $message }}</span> @enderror
                                </div>
                                
                                <div class="space-y-1.5">
                                    <label for="demo-email" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Email Address</label>
                                    <input id="demo-email" type="email" name="email" required placeholder="john@example.com" value="{{ old('email') }}" class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent">
                                    @error('email') <span class="text-[10px] text-red-500 block font-semibold mt-1">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <!-- Optional Phone -->
                            @if($demoFields['phone'] ?? true)
                                <div class="space-y-1.5">
                                    <label for="demo-phone" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Phone Number</label>
                                    <input id="demo-phone" type="text" name="phone" placeholder="+1 (555) 000-0000" value="{{ old('phone') }}" class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent">
                                    @error('phone') <span class="text-[10px] text-red-500 block font-semibold mt-1">{{ $message }}</span> @enderror
                                </div>
                            @endif

                            <!-- Optional Syllabus & Grade Cascading -->
                            @if(($demoFields['curriculum'] ?? true) || ($demoFields['grade'] ?? true))
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5" x-data="{
                                    selectedCurriculum: '{{ old('curriculum_id', '') }}',
                                    allGrades: {{ \App\Models\Grade::orderBy('sort_order')->get()->map(fn($g) => ['id' => $g->id, 'name' => $g->name, 'curriculum_id' => $g->curriculum_id])->toJson() }}
                                }">
                                    @if($demoFields['curriculum'] ?? true)
                                        <div class="space-y-1.5">
                                            <label for="demo-curriculum" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Select Syllabus</label>
                                            <select id="demo-curriculum" name="curriculum_id" x-model="selectedCurriculum" class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent">
                                                <option value="">Choose Board</option>
                                                @foreach(\App\Models\Curriculum::where('is_active', true)->orderBy('sort_order')->get() as $curriculum)
                                                    <option value="{{ $curriculum->id }}">{{ $curriculum->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif

                                    @if($demoFields['grade'] ?? true)
                                        <div class="space-y-1.5">
                                            <label for="demo-grade" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Select Grade</label>
                                            <select id="demo-grade" name="grade_id" class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent">
                                                <option value="">Choose Grade</option>
                                                <template x-for="grade in allGrades" :key="grade.id">
                                                    <option :value="grade.id" x-text="grade.name" x-show="!selectedCurriculum || grade.curriculum_id == selectedCurriculum"></option>
                                                </template>
                                            </select>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <!-- Optional Subject Interest -->
                            @if($demoFields['subject'] ?? true)
                                <div class="space-y-1.5">
                                    <label for="demo-subject" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Subject Interest</label>
                                    <input id="demo-subject" type="text" name="subject_text" placeholder="e.g. Mathematics AA HL or Chemistry IGCSE" value="{{ old('subject_text') }}" class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent">
                                    @error('subject_text') <span class="text-[10px] text-red-500 block font-semibold mt-1">{{ $message }}</span> @enderror
                                </div>
                            @endif

                            <!-- Optional Message / Notes -->
                            @if($demoFields['message'] ?? true)
                                <div class="space-y-1.5">
                                    <label for="demo-message" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Message / Learning Goals</label>
                                    <textarea id="demo-message" name="message" rows="3" placeholder="Tell us about the student's requirements..." class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-3 px-4 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent resize-none">{{ old('message') }}</textarea>
                                    @error('message') <span class="text-[10px] text-red-500 block font-semibold mt-1">{{ $message }}</span> @enderror
                                </div>
                            @endif

                            <!-- Submit Button -->
                            <div class="pt-2">
                                <button type="submit" class="w-full text-center py-4 rounded-full text-xs font-bold text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition duration-300 focus:outline-none"
                                    style="
                                        @if($demoBtnColor === 'gold') background-color: var(--accent);
                                        @elseif($demoBtnColor === 'blue') background-color: var(--primary);
                                        @else background-color: var(--accent);
                                        @endif
                                    ">
                                    {{ $demoBtnLabel }}
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif