<div class="space-y-3">
    <div class="flex flex-wrap gap-2 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
        <template x-for="section in availableSections" :key="section.type">
            <button type="button" @click="addSection(section.type)"
                    class="px-3 py-1.5 text-xs font-medium bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:border-indigo-300 text-gray-700 dark:text-gray-300 hover:text-indigo-700 transition-colors">
                + <span x-text="section.label"></span>
            </button>
        </template>
    </div>

    <div class="space-y-2" x-ref="sectionsContainer">
        <template x-for="(section, index) in sections" :key="section._id">
            <div class="builder-section bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden">
                <div class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800">
                    <span data-drag-handle class="cursor-move text-gray-400 select-none">⠿</span>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize" x-text="section.type"></span>
                    <label class="flex items-center gap-1.5 ml-2 cursor-pointer select-none">
                        <input type="checkbox" x-model="section.full_width"
                               class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 w-3.5 h-3.5">
                        <span class="text-xs text-gray-400 dark:text-gray-500">Full width</span>
                    </label>
                    <div class="flex-1"></div>
                    <button type="button" @click="toggleSection(index)" class="text-xs text-gray-400 hover:text-gray-600">
                        <span x-text="section._open ? 'Collapse' : 'Edit'"></span>
                    </button>
                    <button type="button" @click="removeSection(index)" class="text-xs text-red-400 hover:text-red-600">Remove</button>
                </div>

                <div x-show="section._open" class="p-4 space-y-3">

                    {{-- HERO: custom UI with image picker --}}
                    <template x-if="section.type === 'hero'">
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Title</label>
                                <input type="text" x-model="section.data.title"
                                       class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Subtitle</label>
                                <input type="text" x-model="section.data.subtitle"
                                       class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Button Text</label>
                                    <input type="text" x-model="section.data.button_text"
                                           class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Button URL</label>
                                    <input type="text" x-model="section.data.button_url"
                                           class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Background Image</label>
                                <div class="flex items-center gap-3">
                                    <template x-if="section.data.image_url">
                                        <div class="relative w-20 h-14 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100">
                                            <img :src="section.data.image_url" class="w-full h-full object-cover">
                                            <button type="button" @click="section.data.image_url = ''"
                                                    class="absolute top-0.5 right-0.5 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center">
                                                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                            </button>
                                        </div>
                                    </template>
                                    <button type="button" @click="openHeroPicker(index)"
                                            class="flex items-center gap-2 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 hover:border-indigo-400 text-gray-600 dark:text-gray-400 hover:text-indigo-600 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                        <span x-text="section.data.image_url ? 'Change Image' : 'Pick from Media'"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>

                    {{-- IMAGE: single image picker --}}
                    <template x-if="section.type === 'image'">
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Image</label>
                                <div class="flex items-center gap-3">
                                    <template x-if="section.data.src">
                                        <div class="relative w-24 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100">
                                            <img :src="section.data.src" class="w-full h-full object-cover">
                                            <button type="button" @click="section.data.src = ''"
                                                    class="absolute top-0.5 right-0.5 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center">
                                                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                            </button>
                                        </div>
                                    </template>
                                    <button type="button" @click="openImagePicker(index)"
                                            class="flex items-center gap-2 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 hover:border-indigo-400 text-gray-600 dark:text-gray-400 hover:text-indigo-600 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                        <span x-text="section.data.src ? 'Change Image' : 'Pick from Media'"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Alt Text</label>
                                    <input type="text" x-model="section.data.alt" placeholder="Deskripsi gambar..."
                                           class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Caption</label>
                                    <input type="text" x-model="section.data.caption" placeholder="Caption (opsional)..."
                                           class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                </div>
                            </div>
                        </div>
                    </template>

                    {{-- GALLERY: image grid + picker --}}
                    <template x-if="section.type === 'gallery'">
                        <div class="space-y-3">
                            <div x-show="section._galleryImages && section._galleryImages.length > 0"
                                 class="grid grid-cols-4 sm:grid-cols-6 gap-2">
                                <template x-for="(img, imgIdx) in section._galleryImages" :key="imgIdx">
                                    <div class="relative aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 group">
                                        <img :src="img.url" class="w-full h-full object-cover">
                                        <button type="button" @click="removeGalleryImage(index, imgIdx)"
                                                class="absolute top-1 right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                            <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <button type="button" @click="openGalleryPicker(index)"
                                    class="flex items-center gap-2 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 hover:border-indigo-400 text-gray-600 dark:text-gray-400 hover:text-indigo-600 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                <span>Add Images from Media</span>
                            </button>
                        </div>
                    </template>

                    {{-- FAQ: custom repeater UI --}}
                    <template x-if="section.type === 'faq'">
                        <div class="space-y-3">
                            <template x-for="(item, idx) in section._faqItems" :key="idx">
                                <div class="flex gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                    <div class="flex-1 space-y-2">
                                        <input type="text" x-model="item.q" placeholder="Pertanyaan..."
                                               class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                        <textarea x-model="item.a" placeholder="Jawaban..." rows="2"
                                               class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none"></textarea>
                                    </div>
                                    <button type="button" @click="removeFaqItem(index, idx)"
                                            class="text-red-400 hover:text-red-600 self-start mt-1 flex-shrink-0">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                        </svg>
                                    </button>
                                </div>
                            </template>
                            <button type="button" @click="addFaqItem(index)"
                                    class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                                + Tambah Item
                            </button>
                        </div>
                    </template>

                    {{-- TESTIMONIAL: repeater UI --}}
                    <template x-if="section.type === 'testimonial'">
                        <div class="space-y-3">
                            <template x-for="(item, idx) in section._testimonialItems" :key="idx">
                                <div class="p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 space-y-2">
                                    <div class="flex items-start justify-between gap-2">
                                        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wide mt-1">Testimonial <span x-text="idx + 1"></span></span>
                                        <button type="button" @click="removeTestimonialItem(index, idx)"
                                                class="text-red-400 hover:text-red-600 flex-shrink-0">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </div>
                                    <textarea x-model="item.quote" placeholder="Quote..." rows="2"
                                           class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none"></textarea>
                                    <div class="grid grid-cols-2 gap-2">
                                        <input type="text" x-model="item.author" placeholder="Nama..."
                                               class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                        <input type="text" x-model="item.role" placeholder="Jabatan / Peran..."
                                               class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                    </div>
                                </div>
                            </template>
                            <button type="button" @click="addTestimonialItem(index)"
                                    class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                                + Tambah Testimonial
                            </button>
                        </div>
                    </template>

                    {{-- Default: generic key-value inputs --}}
                    <template x-if="section.type !== 'faq' && section.type !== 'hero' && section.type !== 'image' && section.type !== 'gallery' && section.type !== 'testimonial'">
                        <div class="space-y-3">
                            <template x-for="(value, key) in section.data" :key="key">
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1 capitalize" x-text="key.replace(/_/g, ' ')"></label>
                                    <input type="text" :value="value" @input="section.data[key] = $event.target.value"
                                           class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                </div>
                            </template>
                        </div>
                    </template>

                </div>
            </div>
        </template>
    </div>

    <input type="hidden" name="page_builder" :value="serialize()">
</div>

{{-- Media Picker Modal --}}
<div x-show="pickerOpen" x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center p-4"
     style="display:none">
    <div class="absolute inset-0 bg-black/60" @click="closePicker()"></div>
    <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-3xl max-h-[80vh] flex flex-col">
        {{-- Header --}}
        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="font-semibold text-gray-900 dark:text-white"
                x-text="pickerMode === 'gallery' ? 'Add Images to Gallery' : 'Pick Image'"></h3>
            <div class="flex items-center gap-3">
                <input type="file" accept="image/*" class="hidden" x-ref="builderPickerFile" @change="pickerUpload($event)">
                <button type="button" @click="$refs.builderPickerFile.click()" :disabled="pickerUploading"
                        class="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-xs font-medium">
                    <svg x-show="!pickerUploading" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    <svg x-show="pickerUploading" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="pickerUploading ? 'Uploading...' : 'Upload'"></span>
                </button>
                <button type="button" @click="closePicker()" class="p-1.5 text-gray-400 hover:text-gray-600 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </div>

        {{-- Search --}}
        <div class="p-3 border-b border-gray-200 dark:border-gray-700">
            <input type="text" x-model="pickerSearch" @input="onPickerSearch()"
                   placeholder="Search images..."
                   class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
        </div>

        {{-- Grid --}}
        <div class="flex-1 overflow-y-auto p-4">
            <div x-show="pickerLoading" class="flex justify-center py-12 text-gray-400">
                <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
            </div>
            <div x-show="!pickerLoading" class="grid grid-cols-4 sm:grid-cols-6 gap-2">
                <template x-for="item in pickerItems" :key="item.id">
                    <div @click="selectPickerItem(item)"
                         :class="isPickerSelected(item) ? 'ring-2 ring-indigo-500' : 'hover:ring-2 hover:ring-indigo-300'"
                         class="relative aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 transition-all cursor-pointer group">
                        <img :src="item.url" :alt="item.name" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity">
                        <div x-show="isPickerSelected(item)"
                             class="absolute top-1 right-1 w-5 h-5 bg-indigo-600 rounded-full flex items-center justify-center">
                            <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                        </div>
                    </div>
                </template>
                <p x-show="!pickerLoading && pickerItems.length === 0"
                   class="col-span-full text-center text-sm text-gray-400 py-8">No images found.</p>
            </div>
        </div>

        {{-- Footer hero mode --}}
        <div x-show="pickerMode === 'hero' && pickerSelected"
             class="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-700/30 flex items-center gap-3">
            <img :src="pickerSelected?.url" class="w-12 h-12 object-cover rounded-lg flex-shrink-0">
            <p class="flex-1 text-xs font-medium text-gray-700 dark:text-gray-300 truncate" x-text="pickerSelected?.name"></p>
            <button type="button" @click="confirmPickerSelection()"
                    class="flex-shrink-0 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg">
                Select
            </button>
        </div>

        {{-- Footer gallery mode --}}
        <div x-show="pickerMode === 'gallery' && pickerSelectedIds.length > 0"
             class="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-700/30 flex items-center gap-3">
            <p class="flex-1 text-sm text-gray-700 dark:text-gray-300">
                <span x-text="pickerSelectedIds.length"></span> image(s) selected
            </p>
            <button type="button" @click="confirmPickerSelection()"
                    class="flex-shrink-0 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg">
                Add to Gallery
            </button>
        </div>
    </div>
</div>
