<div>
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">تصميم الموقع</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">تخصيص القالب والألوان والخطوط والتأثيرات</p>
        </div>
        <a href="{{ route('website.manage.sections') }}" class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            ← إدارة الأقسام
        </a>
    </div>

    @if(session('success'))
        <div class="mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
            {{ session('success') }}
        </div>
    @endif

    <form wire:submit="save" class="space-y-6">

        {{-- Template Presets --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">القالب</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">اختر قالبًا جاهزًا كنقطة بداية — يمكنك تعديل الألوان بعدها</p>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                @foreach($templatePresets as $key => $preset)
                    <button type="button" wire:click="applyTemplate('{{ $key }}')"
                            class="relative p-3 rounded-xl border-2 transition-all text-start {{ $template === $key ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200 dark:border-gray-600 hover:border-gray-300' }}">
                        <div class="flex gap-1 mb-2">
                            <span class="w-4 h-4 rounded-full" style="background-color: {{ $preset['primary'] }}"></span>
                            <span class="w-4 h-4 rounded-full" style="background-color: {{ $preset['accent'] }}"></span>
                            <span class="w-4 h-4 rounded-full" style="background-color: {{ $preset['bg'] }}"></span>
                        </div>
                        <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{ $preset['label'] }}</span>
                        @if($template === $key)
                            <span class="absolute top-1.5 end-1.5 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                                <svg class="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            </span>
                        @endif
                    </button>
                @endforeach
            </div>
        </div>

        {{-- Colors --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">الألوان</h3>
                <button type="button" wire:click="generatePaletteFromAccent" class="text-xs px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors text-gray-700 dark:text-gray-300">
                    توليد تلقائي من اللون المميز
                </button>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @foreach([
                    ['primary_color', 'اللون الرئيسي'],
                    ['secondary_color', 'اللون الثانوي'],
                    ['accent_color', 'اللون المميز'],
                    ['text_color', 'لون النص'],
                    ['background_color', 'لون الخلفية'],
                    ['surface_color', 'لون السطح'],
                    ['border_color', 'لون الحدود'],
                    ['muted_text_color', 'نص خافت'],
                ] as [$field, $label])
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ $label }}</label>
                        <div class="flex items-center gap-2">
                            <input type="color" wire:model.live="{{ $field }}" class="w-10 h-10 rounded cursor-pointer border-0 p-0">
                            <input type="text" wire:model.live="{{ $field }}" dir="ltr" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Color Preview --}}
            <div class="mt-4 p-4 rounded-lg border" style="background-color: {{ $background_color }}; border-color: {{ $border_color }}">
                <div class="flex items-center gap-3 flex-wrap">
                    <span class="px-3 py-1.5 rounded text-sm font-medium" style="background-color: {{ $primary_color }}; color: {{ $text_color }}">رئيسي</span>
                    <span class="px-3 py-1.5 rounded text-sm font-medium" style="background-color: {{ $secondary_color }}; color: {{ $text_color }}">ثانوي</span>
                    <span class="px-3 py-1.5 rounded text-sm font-medium" style="background-color: {{ $accent_color }}; color: {{ $text_color }}">مميز</span>
                    <span class="px-3 py-1.5 rounded text-sm font-medium" style="background-color: {{ $surface_color }}; color: {{ $muted_text_color }}; border: 1px solid {{ $border_color }}">سطح</span>
                </div>
            </div>
        </div>

        {{-- Typography --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الخطوط والنصوص</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">خط العناوين</label>
                    <select wire:model="heading_font" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        @foreach($availableFonts as $font)
                            <option value="{{ $font }}">{{ $font }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">خط النصوص</label>
                    <select wire:model="body_font" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        @foreach($availableFonts as $font)
                            <option value="{{ $font }}">{{ $font }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">حجم الخط</label>
                    <select wire:model="font_size_scale" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="small">صغير</option>
                        <option value="medium">متوسط</option>
                        <option value="large">كبير</option>
                        <option value="xlarge">كبير جدًا</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">وزن العنوان</label>
                    <select wire:model="heading_weight" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="400">عادي (400)</option>
                        <option value="500">متوسط (500)</option>
                        <option value="600">شبه عريض (600)</option>
                        <option value="700">عريض (700)</option>
                        <option value="800">أعرض (800)</option>
                        <option value="900">أسود (900)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ارتفاع السطر</label>
                    <select wire:model="line_height" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="tight">ضيق</option>
                        <option value="normal">عادي</option>
                        <option value="relaxed">مريح</option>
                        <option value="loose">واسع</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">تباعد الحروف</label>
                    <select wire:model="letter_spacing" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="tight">ضيق</option>
                        <option value="normal">عادي</option>
                        <option value="wide">واسع</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Spacing & Density --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">المسافات والكثافة</h3>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">كثافة المحتوى</label>
                <div class="grid grid-cols-3 gap-3">
                    @foreach([
                        ['compact', 'مضغوط', 'عناصر متقاربة'],
                        ['comfortable', 'مريح', 'التوازن الافتراضي'],
                        ['spacious', 'واسع', 'مساحات كبيرة'],
                    ] as [$val, $label, $desc])
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="density" value="{{ $val }}" class="sr-only peer">
                            <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors">
                                <span class="text-sm font-medium block">{{ $label }}</span>
                                <span class="text-xs text-gray-400">{{ $desc }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Shapes & Borders --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الأشكال والحدود</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">زوايا العناصر</label>
                    <div class="grid grid-cols-4 gap-2">
                        @foreach([
                            ['sharp', 'حاد', 'rounded-none'],
                            ['subtle', 'خفيف', 'rounded'],
                            ['rounded', 'دائري', 'rounded-xl'],
                            ['pill', 'كبسولة', 'rounded-full'],
                        ] as [$val, $label, $class])
                            <label class="cursor-pointer">
                                <input type="radio" wire:model="border_radius_preset" value="{{ $val }}" class="sr-only peer">
                                <div class="p-2 border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors {{ $class }}">
                                    <div class="w-8 h-6 mx-auto bg-gray-300 dark:bg-gray-500 {{ $class }}"></div>
                                    <span class="text-xs mt-1 block">{{ $label }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نمط البطاقات</label>
                    <div class="grid grid-cols-4 gap-2">
                        @foreach([
                            ['flat', 'مسطح'],
                            ['raised', 'مرتفع'],
                            ['bordered', 'محدد'],
                            ['glass', 'زجاجي'],
                        ] as [$val, $label])
                            <label class="cursor-pointer">
                                <input type="radio" wire:model="card_style" value="{{ $val }}" class="sr-only peer">
                                <div class="p-2 rounded-lg border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors">
                                    <span class="text-xs">{{ $label }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الفاصل بين الأقسام</label>
                    <select wire:model="section_divider" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="none">بدون</option>
                        <option value="line">خط</option>
                        <option value="wave">موجة</option>
                        <option value="angle">زاوية</option>
                        <option value="curve">منحنى</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">شكل الصور</label>
                    <select wire:model="image_shape" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="square">مربع</option>
                        <option value="rounded">مستدير</option>
                        <option value="circle">دائري</option>
                        <option value="blob">عضوي</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Animations --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الحركة والتأثيرات</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" wire:model="animations_enabled" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">تفعيل الرسوم المتحركة</span>
                    </label>
                    <p class="text-xs text-gray-400 mt-1 ms-8">تأثيرات الظهور عند التمرير</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">سرعة التأثيرات</label>
                    <select wire:model="animation_speed" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" @if(!$animations_enabled) disabled @endif>
                        <option value="slow">بطيء</option>
                        <option value="normal">عادي</option>
                        <option value="fast">سريع</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Navbar Style --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">شريط التنقل</h3>
            <div class="grid grid-cols-3 gap-3">
                @foreach([
                    ['transparent', 'شفاف'],
                    ['solid', 'معتم'],
                    ['floating', 'عائم'],
                ] as [$val, $label])
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="navbar_style" value="{{ $val }}" class="sr-only peer">
                        <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors">
                            <span class="text-sm">{{ $label }}</span>
                        </div>
                    </label>
                @endforeach
            </div>
        </div>

        {{-- Social Links --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">روابط التواصل الاجتماعي</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach([
                    ['facebook', 'Facebook', 'https://facebook.com/...'],
                    ['instagram', 'Instagram', 'https://instagram.com/...'],
                    ['twitter', 'Twitter / X', 'https://x.com/...'],
                    ['youtube', 'YouTube', 'https://youtube.com/@...'],
                    ['tiktok', 'TikTok', 'https://tiktok.com/@...'],
                ] as [$key, $label, $placeholder])
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ $label }}</label>
                        <input type="url" wire:model="social_links.{{ $key }}" dir="ltr" placeholder="{{ $placeholder }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    </div>
                @endforeach
            </div>
        </div>

        {{-- WhatsApp & Site Info --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">معلومات الموقع</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">رقم واتساب</label>
                    <input type="text" wire:model="whatsapp_number" dir="ltr" placeholder="+201012345678" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <p class="text-xs text-gray-500 mt-1">سيظهر زر واتساب عائم في الموقع</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">عنوان الموقع</label>
                    <input type="text" wire:model="site_title" placeholder="اسم الأكاديمية" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">وصف الموقع</label>
                    <textarea wire:model="site_description" rows="2" placeholder="وصف قصير للموقع..." class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"></textarea>
                </div>
            </div>
        </div>

        {{-- Analytics --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">التحليلات</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Google Analytics ID</label>
                    <input type="text" wire:model="google_analytics_id" dir="ltr" placeholder="G-XXXXXXXXXX" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Facebook Pixel ID</label>
                    <input type="text" wire:model="facebook_pixel_id" dir="ltr" placeholder="123456789" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
            </div>
        </div>

        {{-- Custom CSS --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">CSS مخصص</h3>
            <textarea wire:model="custom_css" dir="ltr" rows="6" placeholder="/* أضف تنسيقاتك هنا */" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-mono text-sm"></textarea>
            <p class="text-xs text-gray-500 mt-1">سيتم حقن هذا الكود مباشرة في صفحة الموقع</p>
        </div>

        {{-- Save Button --}}
        <div class="flex items-center gap-3 sticky bottom-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg">
            <button type="submit" class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-colors"
                    wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">حفظ الإعدادات</span>
                <span wire:loading wire:target="save">جارٍ الحفظ...</span>
            </button>
            <a href="{{ route('website.preview') }}" target="_blank" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                معاينة الموقع ↗
            </a>
        </div>
    </form>
</div>
