<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">Pengaturan Hero</h2>
    </x-slot>

    <div class="max-w-5xl space-y-6">

        <form action="{{ route('admin.settings.hero.store') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            {{-- SECTION 1: Background Gradient --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Warna Background Gradient</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Pilih preset gradient lembut atau buat kustom sendiri.</p>
                </div>
                <div class="p-8 space-y-6" x-data="{
                    color1: '{{ old('hero_bg_color1', $settings['hero_bg_color1'] ?? '#ffffff') }}',
                    color2: '{{ old('hero_bg_color2', $settings['hero_bg_color2'] ?? '#f3f4f6') }}',
                    angle: '{{ old('hero_bg_angle', $settings['hero_bg_angle'] ?? '135') }}',
                    presets: [
                        { c1: '#667eea', c2: '#764ba2' },
                        { c1: '#f093fb', c2: '#f5576c' },
                        { c1: '#4facfe', c2: '#00f2fe' },
                        { c1: '#43e97b', c2: '#38f9d7' },
                        { c1: '#fa709a', c2: '#fee140' },
                        { c1: '#a18cd1', c2: '#fbc2eb' },
                        { c1: '#ffecd2', c2: '#fcb69f' },
                        { c1: '#a1c4fd', c2: '#c2e9fb' },
                        { c1: '#d4fc79', c2: '#96e6a1' },
                        { c1: '#84fab0', c2: '#8fd3f4' },
                        { c1: '#cfd9df', c2: '#e2ebf0' },
                        { c1: '#ffffff', c2: '#f3f4f6' },
                    ],
                    get gradient() {
                        return 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + this.color2 + ')';
                    },
                    applyPreset(p) {
                        this.color1 = p.c1;
                        this.color2 = p.c2;
                    },
                    isActive(p) {
                        return this.color1.toLowerCase() === p.c1.toLowerCase() && this.color2.toLowerCase() === p.c2.toLowerCase();
                    }
                }">
                    {{-- Hidden inputs for form submission --}}
                    <input type="hidden" name="hero_bg_color1" :value="color1">
                    <input type="hidden" name="hero_bg_color2" :value="color2">
                    <input type="hidden" name="hero_bg_angle" :value="angle">

                    {{-- Live Preview --}}
                    <div class="w-full h-16 rounded-xl shadow-inner border border-gray-200 dark:border-slate-600 flex items-center justify-center transition-all duration-300" :style="'background: ' + gradient">
                        <span class="text-xs font-bold uppercase tracking-widest opacity-60 px-4 py-1.5 rounded-full" :class="color1 === '#ffffff' && color2 === '#f3f4f6' ? 'text-gray-500 bg-white/70' : 'text-white bg-black/20'">Preview Gradient</span>
                    </div>

                    {{-- Preset Swatches --}}
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">Pilih Preset Warna:</p>
                        <div class="grid grid-cols-4 sm:grid-cols-6 gap-2.5">
                            <template x-for="(p, i) in presets" :key="i">
                                <button type="button" @click="applyPreset(p)"
                                    class="h-11 rounded-lg border-2 transition-all duration-200 cursor-pointer relative overflow-hidden hover:scale-105 hover:shadow-md"
                                    :class="isActive(p) ? 'border-indigo-500 ring-2 ring-indigo-200 dark:ring-indigo-800 shadow-md' : 'border-gray-200 dark:border-slate-600'"
                                    :style="'background: linear-gradient(135deg, ' + p.c1 + ', ' + p.c2 + ')'">
                                    <template x-if="isActive(p)">
                                        <div class="absolute inset-0 flex items-center justify-center bg-black/10">
                                            <svg class="w-4 h-4 text-white drop-shadow" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
                                        </div>
                                    </template>
                                </button>
                            </template>
                        </div>
                    </div>

                    {{-- Custom Gradient Builder --}}
                    <div class="p-5 rounded-xl bg-gray-50 dark:bg-slate-700/30 border border-gray-100 dark:border-slate-600 space-y-4">
                        <p class="text-[11px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">Atau Buat Warna Sendiri:</p>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                            {{-- Start Color --}}
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">Warna Awal</label>
                                <div class="flex items-center gap-2.5">
                                    <input type="color" x-model="color1" class="w-10 h-10 rounded-lg border-2 border-gray-200 dark:border-slate-600 cursor-pointer p-0.5 bg-white dark:bg-slate-700 flex-shrink-0">
                                    <input type="text" x-model="color1" class="flex-1 rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border dark:bg-slate-700 dark:text-white text-sm font-mono" placeholder="#667eea">
                                </div>
                            </div>
                            {{-- End Color --}}
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">Warna Akhir</label>
                                <div class="flex items-center gap-2.5">
                                    <input type="color" x-model="color2" class="w-10 h-10 rounded-lg border-2 border-gray-200 dark:border-slate-600 cursor-pointer p-0.5 bg-white dark:bg-slate-700 flex-shrink-0">
                                    <input type="text" x-model="color2" class="flex-1 rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border dark:bg-slate-700 dark:text-white text-sm font-mono" placeholder="#764ba2">
                                </div>
                            </div>
                            {{-- Angle --}}
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">Arah Gradient</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <button type="button" @click="angle = '45'" class="py-2 px-3 rounded-lg border text-sm font-semibold transition-all duration-150" :class="angle == '45' ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' : 'bg-white dark:bg-slate-700 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-slate-600 hover:border-indigo-300'">
                                        ↗ 45°
                                    </button>
                                    <button type="button" @click="angle = '90'" class="py-2 px-3 rounded-lg border text-sm font-semibold transition-all duration-150" :class="angle == '90' ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' : 'bg-white dark:bg-slate-700 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-slate-600 hover:border-indigo-300'">
                                        → 90°
                                    </button>
                                    <button type="button" @click="angle = '135'" class="py-2 px-3 rounded-lg border text-sm font-semibold transition-all duration-150" :class="angle == '135' ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' : 'bg-white dark:bg-slate-700 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-slate-600 hover:border-indigo-300'">
                                        ↘ 135°
                                    </button>
                                    <button type="button" @click="angle = '180'" class="py-2 px-3 rounded-lg border text-sm font-semibold transition-all duration-150" :class="angle == '180' ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' : 'bg-white dark:bg-slate-700 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-slate-600 hover:border-indigo-300'">
                                        ↓ 180°
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 2: Teks Hero --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Teks Hero</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Atur eyebrow label, headline (2 baris), dan tagline di bawah headline.</p>
                </div>
                <div class="p-8 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Eyebrow Label</label>
                        <input type="text" name="hero_eyebrow" value="{{ old('hero_eyebrow', $settings['hero_eyebrow'] ?? '') }}"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="DigiShop — Marketplace Digital">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Label kecil di atas headline. Kosongkan untuk menggunakan default (Nama Toko — Marketplace Digital).</p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Headline Baris 1</label>
                            <input type="text" name="hero_headline_1" value="{{ old('hero_headline_1', $settings['hero_headline_1'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                                placeholder="Temukan Produk Digital">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Headline Baris 2 <span class="text-gray-400 font-normal">(Warna Aksen)</span></label>
                            <input type="text" name="hero_headline_2" value="{{ old('hero_headline_2', $settings['hero_headline_2'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                                placeholder="Berkualitas Tinggi">
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Baris ini akan ditampilkan dengan warna indigo/aksen.</p>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Tagline / Sub-headline</label>
                        <textarea name="hero_tagline" rows="2"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="Akses instan ke produk digital premium — dari template, e-book, hingga source code siap pakai.">{{ old('hero_tagline', $settings['hero_tagline'] ?? '') }}</textarea>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Kosongkan untuk menggunakan deskripsi toko dari Pengaturan Footer.</p>
                    </div>
                </div>
            </div>

            {{-- SECTION 3: Tombol CTA --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Tombol CTA (Call to Action)</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dua tombol di bawah tagline. Kosongkan label untuk menyembunyikan tombol.</p>
                </div>
                <div class="p-8 space-y-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="space-y-4 p-5 rounded-xl bg-gray-50 dark:bg-slate-700/50 border border-gray-100 dark:border-slate-600">
                            <p class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Tombol Utama (Primary)</p>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Label</label>
                                <input type="text" name="hero_cta1_label" value="{{ old('hero_cta1_label', $settings['hero_cta1_label'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="Lihat Katalog">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">URL / Link</label>
                                <input type="text" name="hero_cta1_url" value="{{ old('hero_cta1_url', $settings['hero_cta1_url'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="#catalog">
                            </div>
                        </div>
                        <div class="space-y-4 p-5 rounded-xl bg-gray-50 dark:bg-slate-700/50 border border-gray-100 dark:border-slate-600">
                            <p class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Tombol Sekunder (Secondary)</p>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Label</label>
                                <input type="text" name="hero_cta2_label" value="{{ old('hero_cta2_label', $settings['hero_cta2_label'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="Daftar Gratis">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">URL / Link</label>
                                <input type="text" name="hero_cta2_url" value="{{ old('hero_cta2_url', $settings['hero_cta2_url'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="/register">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 4: Trust Badges --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Trust Badges</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Tiga teks keunggulan di bawah tombol CTA. Kosongkan untuk menyembunyikan.</p>
                </div>
                <div class="p-8 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5 flex items-center gap-1.5">
                                <x-heroicon-s-shield-check class="w-3.5 h-3.5 text-green-500" /> Badge 1
                            </label>
                            <input type="text" name="hero_badge1" value="{{ old('hero_badge1', $settings['hero_badge1'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="Transaksi Aman & Terenkripsi">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5 flex items-center gap-1.5">
                                <x-heroicon-s-bolt class="w-3.5 h-3.5 text-amber-500" /> Badge 2
                            </label>
                            <input type="text" name="hero_badge2" value="{{ old('hero_badge2', $settings['hero_badge2'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="Akses Instan Setelah Disetujui">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5 flex items-center gap-1.5">
                                <x-heroicon-s-arrow-path class="w-3.5 h-3.5 text-indigo-500" /> Badge 3
                            </label>
                            <input type="text" name="hero_badge3" value="{{ old('hero_badge3', $settings['hero_badge3'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="Unduh Tanpa Batas">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Submit Button --}}
            <div class="flex justify-end">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-xl shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <x-heroicon-s-check class="w-4 h-4" /> Simpan Pengaturan Hero
                </button>
            </div>

        </form>
    </div>
</x-admin-layout>
