<div x-data="{
    preset: $wire.entangle('data.theme_preset'),
    customColor: $wire.entangle('data.primary_color'),
    presets: {
        amber: { name: 'Amber Gold', hex: '#f59e0b', bg: '#f59e0b', activeBg: '#fdfbeb', activeBorder: '#d97706' },
        emerald: { name: 'Emerald Mint', hex: '#10b981', bg: '#10b981', activeBg: '#ecfdf5', activeBorder: '#059669' },
        blue: { name: 'Classic Indigo', hex: '#3b82f6', bg: '#3b82f6', activeBg: '#eff6ff', activeBorder: '#2563eb' },
        violet: { name: 'Royal Violet', hex: '#8b5cf6', bg: '#8b5cf6', activeBg: '#f5f3ff', activeBorder: '#7c3aed' },
        rose: { name: 'Rose Blossom', hex: '#f43f5e', bg: '#f43f5e', activeBg: '#fff1f2', activeBorder: '#e11d48' },
        teal: { name: 'Ocean Teal', hex: '#0d9488', bg: '#0d9488', activeBg: '#f0fdfa', activeBorder: '#0d9488' },
        orange: { name: 'Sunset Orange', hex: '#f97316', bg: '#f97316', activeBg: '#fff7ed', activeBorder: '#ea580c' },
        custom: { name: 'Custom Palette', hex: null, bg: 'linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6, #10b981, #f59e0b)', activeBg: '#faf5ff', activeBorder: '#a855f7' }
    },
    designerColors: [
        '#64748b', '#ef4444', '#f97316', '#f59e0b',
        '#eab308', '#84cc16', '#22c55e', '#10b981',
        '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6',
        '#6366f1', '#8b5cf6', '#a855f7', '#d946ef',
        '#ec4899', '#f43f5e'
    ]
}" style="font-family: inherit;">
    <!-- Section Title & Description -->
    <div style="border-bottom: 1px solid #e5e7eb; padding-bottom: 14px; margin-bottom: 20px;">
        <h3 style="font-size: 14px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.25;">Theme Color Scheme</h3>
        <p style="font-size: 12px; color: #64748b; margin: 4px 0 0 0; line-height: 1.4;">Select a preset or choose a custom brand color.</p>
    </div>

    <!-- Presets Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; width: 100%;">
        <template x-for="(info, key) in presets" :key="key">
            <button 
                type="button"
                @click="
                    preset = key; 
                    $wire.set('data.theme_preset', key);
                    if (key !== 'custom') { 
                        customColor = info.hex; 
                        $wire.set('data.primary_color', info.hex);
                    }
                "
                :style="preset === key 
                    ? 'border: 2px solid ' + info.activeBorder + '; background-color: ' + info.activeBg + '; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);' 
                    : 'border: 1px solid #e2e8f0; background-color: #ffffff;'"
                style="display: flex; flex-direction: column; align-items: center; padding: 16px 12px; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; box-sizing: border-box; outline: none; border-style: solid;"
            >
                <!-- Color Swatch Circle Container -->
                <div style="position: relative; margin-bottom: 10px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    <!-- Color Swatch Circle -->
                    <div 
                        :style="key === 'custom' ? { background: info.bg } : { backgroundColor: info.hex }"
                        style="width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.2); transition: transform 0.2s;"
                    ></div>

                    <!-- Checkmark Badge overlaid on selection -->
                    <template x-if="preset === key">
                        <div style="position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%; background-color: #0f172a; border: 2px solid #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.15);">
                            <svg style="width: 10px; height: 10px; color: #ffffff;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </template>
                </div>
                
                <!-- Label & Hex -->
                <span :style="preset === key ? 'color: #0f172a; font-weight: 700;' : 'color: #475569; font-weight: 600;'" style="font-size: 12px; display: block; line-height: 1.25;" x-text="info.name"></span>
                <span style="font-size: 10px; color: #94a3b8; margin-top: 4px; font-family: monospace; text-transform: uppercase; display: block; line-height: 1.25;" x-text="key === 'custom' ? (preset === 'custom' ? customColor : 'Custom HEX') : info.hex"></span>
            </button>
        </template>
    </div>

    <!-- Custom Color Customizer Panel (Smooth Transition) -->
    <div 
        x-show="preset === 'custom'" 
        x-collapse
        style="margin-top: 16px; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; background-color: #f8fafc; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box;"
    >
        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; box-sizing: border-box; width: 100%;">
            <div>
                <h4 style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; margin: 0; line-height: 1.25;">Custom Color</h4>
                <p style="font-size: 12px; color: #64748b; margin: 2px 0 0 0; line-height: 1.25;">Select a designer tone or enter a HEX color code.</p>
            </div>
            
            <!-- Custom HEX Input & Native Color Block Picker -->
            <div style="display: flex; align-items: center; gap: 12px; flex-shrink: 0; box-sizing: border-box;">
                <!-- Color Block Display / Native Trigger -->
                <div style="position: relative; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #cbd5e1; overflow: hidden; cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-sizing: border-box; background-color: #ffffff; display: flex; align-items: center; justify-content: center;">
                    <input 
                        type="color" 
                        x-model="customColor" 
                        @input="$wire.set('data.primary_color', customColor)"
                        @change="$wire.set('data.primary_color', customColor)"
                        style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; transform: scale(1.5); box-sizing: border-box;"
                    />
                    <div style="width: 32px; height: 32px; border-radius: 6px; transition: background-color 0.2s;" :style="{ backgroundColor: customColor }"></div>
                </div>

                <!-- HEX Text Input -->
                <div style="position: relative; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); width: 140px; box-sizing: border-box; height: 42px;">
                    <span style="position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; color: #94a3b8; font-family: monospace; font-size: 14px; pointer-events: none;">#</span>
                    <input 
                        type="text" 
                        x-model="customColor"
                        placeholder="f59e0b"
                        maxlength="7"
                        @input="
                            if (!$el.value.startsWith('#')) { customColor = '#' + $el.value }
                            $wire.set('data.primary_color', customColor);
                        "
                        @change="$wire.set('data.primary_color', customColor)"
                        style="display: block; width: 100%; height: 100%; padding: 8px 12px 8px 24px; border: 1px solid #cbd5e1; border-radius: 8px; background-color: #ffffff; color: #0f172a; font-family: monospace; font-size: 14px; outline: none; box-sizing: border-box;"
                    />
                </div>
            </div>
        </div>

        <!-- Curated Palette Swatches -->
        <div style="border-top: 1px solid #e2e8f0; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; width: 100%;">
            <span style="font-size: 10px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; line-height: 1.25;">Designer Tones</span>
            <div style="display: flex; flex-wrap: wrap; gap: 8px; box-sizing: border-box; width: 100%;">
                <template x-for="hex in designerColors" :key="hex">
                    <button 
                        type="button" 
                        @click="
                            customColor = hex; 
                            $wire.set('data.primary_color', hex);
                        " 
                        :title="hex"
                        style="width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); cursor: pointer; outline: none; position: relative; transition: transform 0.1s; flex-shrink: 0; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,0.05);"
                        :style="{ backgroundColor: hex }"
                    >
                        <template x-if="customColor === hex">
                            <span style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.25); border-radius: 8px; box-sizing: border-box;">
                                <svg style="width: 14px; height: 14px; color: #ffffff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                </svg>
                            </span>
                        </template>
                    </button>
                </template>
            </div>
        </div>
    </div>
</div>
