@if($type === 'hero')
    <div class="space-y-2">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre principal" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][subtitle]" value="{{ $data['subtitle'] ?? '' }}" placeholder="Sous-titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][cta_text]" value="{{ $data['cta_text'] ?? '' }}" placeholder="Texte bouton" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][cta_url]" value="{{ $data['cta_url'] ?? '' }}" placeholder="URL bouton" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'text')
    @php $tidText = 'trix-page-text-'.$index.'-'.\Illuminate\Support\Str::random(12); @endphp
    <div class="space-y-2">
        <p class="text-xs text-slate-500">Contenu (gras, listes, liens…)</p>
        <textarea id="{{ $tidText }}" name="sections[{{ $index }}][data][content]" class="hidden" rows="1" autocomplete="off">{{ \App\Support\SafeHtml::normalizeStoredRichText($data['content'] ?? '') }}</textarea>
        <trix-editor input="{{ $tidText }}" class="trix-content w-full min-h-[160px] border border-slate-200 rounded-lg prose prose-sm max-w-none"></trix-editor>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#f8fafc' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'image')
    <div class="space-y-2">
        <x-admin.image-input name="sections[{{ $index }}][data][image]" :value="$data['image'] ?? ''" placeholder="URL ou cliquer pour uploader" input-class="w-full border border-slate-200 rounded-lg px-3 py-2" />
        <input type="text" name="sections[{{ $index }}][data][alt]" value="{{ $data['alt'] ?? '' }}" placeholder="Texte alternatif" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'text_image')
    @php $tidTi = 'trix-page-ti-'.$index.'-'.\Illuminate\Support\Str::random(12); @endphp
    <div class="space-y-2">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <p class="text-xs text-slate-500">Texte (gras, listes…)</p>
        <textarea id="{{ $tidTi }}" name="sections[{{ $index }}][data][content]" class="hidden" rows="1" autocomplete="off">{{ \App\Support\SafeHtml::normalizeStoredRichText($data['content'] ?? '') }}</textarea>
        <trix-editor input="{{ $tidTi }}" class="trix-content w-full min-h-[140px] border border-slate-200 rounded-lg prose prose-sm max-w-none"></trix-editor>
        <x-admin.image-input name="sections[{{ $index }}][data][image]" :value="$data['image'] ?? ''" placeholder="URL ou cliquer pour uploader" input-class="w-full border border-slate-200 rounded-lg px-3 py-2" />
        <input type="text" name="sections[{{ $index }}][data][alt]" value="{{ $data['alt'] ?? '' }}" placeholder="Texte alternatif image" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div>
            <span class="text-xs text-slate-500 block mb-1">Disposition :</span>
            <select name="sections[{{ $index }}][data][layout]" class="w-full border border-slate-200 rounded-lg px-3 py-2">
                <option value="left" {{ ($data['layout'] ?? 'left') === 'left' ? 'selected' : '' }}>Image à gauche, texte à droite</option>
                <option value="right" {{ ($data['layout'] ?? '') === 'right' ? 'selected' : '' }}>Texte à gauche, image à droite</option>
            </select>
        </div>
        <input type="text" name="sections[{{ $index }}][data][cta_text]" value="{{ $data['cta_text'] ?? '' }}" placeholder="Texte bouton (optionnel)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][cta_url]" value="{{ $data['cta_url'] ?? '' }}" placeholder="URL bouton (optionnel)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#f8fafc' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'features')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="features">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre de la section" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['title' => '', 'text' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][title]" value="{{ $item['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][text]" value="{{ $item['text'] ?? '' }}" placeholder="Description" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'features')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter un service
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'cta')
    <div class="space-y-2">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][text]" value="{{ $data['text'] ?? '' }}" placeholder="Texte" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][button_text]" value="{{ $data['button_text'] ?? '' }}" placeholder="Texte bouton" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][button_url]" value="{{ $data['button_url'] ?? '' }}" placeholder="URL" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#0f172a' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'stats')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="stats">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre (optionnel)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['number' => '', 'label' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg flex gap-2">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][number]" value="{{ $item['number'] ?? '' }}" placeholder="Chiffre" class="flex-1 border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][label]" value="{{ $item['label'] ?? '' }}" placeholder="Label" class="flex-1 border border-slate-200 rounded px-2 py-1 text-sm">
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'stats')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter un chiffre
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#0f172a' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'testimonials')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="testimonials">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['name' => '', 'text' => '', 'role' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][name]" value="{{ $item['name'] ?? '' }}" placeholder="Nom" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][role]" value="{{ $item['role'] ?? '' }}" placeholder="Rôle / Entreprise" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <textarea name="sections[{{ $index }}][data][items][{{ $i }}][text]" rows="2" placeholder="Témoignage" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">{{ $item['text'] ?? '' }}</textarea>
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'testimonials')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter un témoignage
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'team')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="team">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['name' => '', 'role' => '', 'image' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][name]" value="{{ $item['name'] ?? '' }}" placeholder="Nom" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][role]" value="{{ $item['role'] ?? '' }}" placeholder="Poste" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <x-admin.image-input name="sections[{{ $index }}][data][items][{{ $i }}][image]" :value="$item['image'] ?? ''" placeholder="URL photo" input-class="w-full border border-slate-200 rounded px-2 py-1 text-sm" />
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'team')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter un membre
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'faq')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="faq">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['question' => '', 'answer' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][question]" value="{{ $item['question'] ?? '' }}" placeholder="Question" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <textarea name="sections[{{ $index }}][data][items][{{ $i }}][answer]" rows="2" placeholder="Réponse" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">{{ $item['answer'] ?? '' }}</textarea>
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'faq')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter une question
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#f8fafc' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'gallery')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="gallery">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre de la galerie" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['image' => '', 'title' => '', 'caption' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <x-admin.image-input name="sections[{{ $index }}][data][items][{{ $i }}][image]" :value="$item['image'] ?? ''" placeholder="URL image" input-class="w-full border border-slate-200 rounded px-2 py-1 text-sm" />
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][title]" value="{{ $item['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][caption]" value="{{ $item['caption'] ?? '' }}" placeholder="Légende (optionnel)" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'gallery')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter une image
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'pricing')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="pricing">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre (ex: Nos tarifs)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['name' => '', 'price' => '', 'period' => '/mois', 'features' => '', 'button_text' => '', 'button_url' => '', 'highlighted' => false]] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][name]" value="{{ $item['name'] ?? '' }}" placeholder="Nom de l'offre" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <div class="flex gap-2">
                    <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][price]" value="{{ $item['price'] ?? '' }}" placeholder="Prix (ex: 29)" class="flex-1 border border-slate-200 rounded px-2 py-1 text-sm">
                    <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][period]" value="{{ $item['period'] ?? '/mois' }}" placeholder="/mois" class="w-20 border border-slate-200 rounded px-2 py-1 text-sm">
                </div>
                <textarea name="sections[{{ $index }}][data][items][{{ $i }}][features]" rows="2" placeholder="Fonctionnalités (une par ligne)" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">{{ is_array($item['features'] ?? '') ? implode("\n", $item['features']) : ($item['features'] ?? '') }}</textarea>
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][button_text]" value="{{ $item['button_text'] ?? 'Choisir' }}" placeholder="Texte bouton" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][button_url]" value="{{ $item['button_url'] ?? '' }}" placeholder="URL bouton" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <label class="flex items-center gap-2"><input type="checkbox" name="sections[{{ $index }}][data][items][{{ $i }}][highlighted]" value="1" {{ ($item['highlighted'] ?? false) ? 'checked' : '' }} class="rounded border-slate-300"><span class="text-sm">Mettre en avant</span></label>
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'pricing')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter une offre
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#f8fafc' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'timeline')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="timeline">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre (ex: Notre parcours)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['year' => '', 'title' => '', 'description' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][year]" value="{{ $item['year'] ?? '' }}" placeholder="Année" class="w-24 border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][title]" value="{{ $item['title'] ?? '' }}" placeholder="Titre de l'étape" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <textarea name="sections[{{ $index }}][data][items][{{ $i }}][description]" rows="2" placeholder="Description" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">{{ $item['description'] ?? '' }}</textarea>
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'timeline')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter une étape
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'video')
    <div class="space-y-2">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre (optionnel)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][video_url]" value="{{ $data['video_url'] ?? '' }}" placeholder="URL YouTube ou Vimeo (ex: https://youtube.com/watch?v=...)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <input type="text" name="sections[{{ $index }}][data][caption]" value="{{ $data['caption'] ?? '' }}" placeholder="Légende (optionnel)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#0f172a' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'carousel')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="carousel">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre du carrousel" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['image' => '', 'title' => '', 'caption' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <x-admin.image-input name="sections[{{ $index }}][data][items][{{ $i }}][image]" :value="$item['image'] ?? ''" placeholder="URL image" input-class="w-full border border-slate-200 rounded px-2 py-1 text-sm" />
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][title]" value="{{ $item['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][caption]" value="{{ $item['caption'] ?? '' }}" placeholder="Légende (optionnel)" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'carousel')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter une diapositive
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'animations')
    <div class="space-y-2">
        <p class="text-xs text-slate-500">Configuration globale des animations (aucun bloc visuel n'est affiché sur la page).</p>
        <div>
            <span class="text-xs text-slate-500 block mb-1">Effet :</span>
            <select name="sections[{{ $index }}][data][effect]" class="w-full border border-slate-200 rounded-lg px-3 py-2">
                @php $effect = $data['effect'] ?? 'fade-up'; @endphp
                <option value="fade-up" {{ $effect === 'fade-up' ? 'selected' : '' }}>Fade up</option>
                <option value="fade-in" {{ $effect === 'fade-in' ? 'selected' : '' }}>Fade in</option>
                <option value="slide-left" {{ $effect === 'slide-left' ? 'selected' : '' }}>Slide left</option>
                <option value="slide-right" {{ $effect === 'slide-right' ? 'selected' : '' }}>Slide right</option>
                <option value="zoom-in" {{ $effect === 'zoom-in' ? 'selected' : '' }}>Zoom in</option>
            </select>
        </div>
        <div>
            <span class="text-xs text-slate-500 block mb-1">Durée (ms) :</span>
            <input type="number" min="200" max="3000" step="50" name="sections[{{ $index }}][data][duration]" value="{{ $data['duration'] ?? 700 }}" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        </div>
        <label class="flex items-center gap-2">
            <input type="hidden" name="sections[{{ $index }}][data][stagger]" value="0">
            <input type="checkbox" name="sections[{{ $index }}][data][stagger]" value="1" {{ ($data['stagger'] ?? true) ? 'checked' : '' }} class="rounded border-slate-300">
            <span class="text-sm">Décalage progressif entre sections</span>
        </label>
    </div>
@elseif($type === 'logos')
    <div class="space-y-2" data-section-index="{{ $index }}" data-section-type="logos">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre (ex: Ils nous font confiance)" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <div class="section-items-list space-y-2">
        @foreach($data['items'] ?? [['image' => '', 'name' => '', 'url' => '']] as $i => $item)
            <div class="section-item-row p-2 border border-slate-200 rounded-lg space-y-1">
                <x-admin.image-input name="sections[{{ $index }}][data][items][{{ $i }}][image]" :value="$item['image'] ?? ''" placeholder="URL logo" input-class="w-full border border-slate-200 rounded px-2 py-1 text-sm" />
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][name]" value="{{ $item['name'] ?? '' }}" placeholder="Nom du partenaire" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
                <input type="text" name="sections[{{ $index }}][data][items][{{ $i }}][url]" value="{{ $item['url'] ?? '' }}" placeholder="Lien (optionnel)" class="w-full border border-slate-200 rounded px-2 py-1 text-sm">
            </div>
        @endforeach
        </div>
        <button type="button" onclick="addSectionItem(this, 'logos')" class="flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium">
            <span class="w-5 h-5 rounded-full border-2 border-current flex items-center justify-center shrink-0">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </span>
            Ajouter un logo
        </button>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#ffffff' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@elseif($type === 'contact')
    <div class="space-y-2">
        <input type="text" name="sections[{{ $index }}][data][title]" value="{{ $data['title'] ?? '' }}" placeholder="Titre" class="w-full border border-slate-200 rounded-lg px-3 py-2">
        <textarea name="sections[{{ $index }}][data][text]" rows="2" placeholder="Texte d'introduction" class="w-full border border-slate-200 rounded-lg px-3 py-2">{{ $data['text'] ?? '' }}</textarea>
        <label class="flex items-center gap-2">
            <input type="hidden" name="sections[{{ $index }}][data][show_phone]" value="0">
            <input type="checkbox" name="sections[{{ $index }}][data][show_phone]" value="1" {{ ($data['show_phone'] ?? true) ? 'checked' : '' }} class="rounded border-slate-300">
            <span class="text-sm">Afficher champ téléphone</span>
        </label>
        <label class="flex items-center gap-2">
            <input type="hidden" name="sections[{{ $index }}][data][show_subject]" value="0">
            <input type="checkbox" name="sections[{{ $index }}][data][show_subject]" value="1" {{ ($data['show_subject'] ?? true) ? 'checked' : '' }} class="rounded border-slate-300">
            <span class="text-sm">Afficher champ sujet</span>
        </label>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-500">Fond:</span>
            <input type="color" name="sections[{{ $index }}][data][bg_color]" value="{{ $data['bg_color'] ?? '#f8fafc' }}" class="h-8 w-12 rounded cursor-pointer border border-slate-200">
        </div>
    </div>
@endif
