<x-app-layout>
    <div class="p-8 lg:p-12 min-h-screen">
        <header class="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-8 animate-in fade-in slide-in-from-top-4 duration-1000">
            <div class="space-y-2 border-l-4 border-white/20 pl-6">
                <h2 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter leading-none">Pengaturan CMS Beranda</h2>
                <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic leading-none">Public Interface & Dynamic Branding Hub</p>
            </div>
            <div class="flex items-center gap-4">
                <a href="{{ route('landing') }}" target="_blank" class="px-8 py-4 bg-white/5 border border-white/10 text-white font-black text-[10px] uppercase tracking-widest rounded-2xl hover:bg-white hover:text-slate-950 transition-all shadow-2xl flex items-center gap-3 italic">
                    <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.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                    Visit Live Landing →
                </a>
            </div>
        </header>

        <form action="{{ route('admin.cms.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <!-- Left Column: Branding Content -->
                <div class="lg:col-span-2 space-y-12">
                    <!-- Section: Brand Identity -->
                    <div class="bg-white/5 p-10 lg:p-12 rounded-[48px] shadow-2xl border border-white/5 space-y-10">
                        <div class="flex items-center gap-5 border-b border-white/5 pb-8">
                            <div class="w-12 h-12 bg-indigo-500/10 rounded-2xl flex items-center justify-center text-indigo-400 border border-indigo-500/20">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.828 2.828a2 2 0 010 2.828l-8.486 8.486L5 19l4.586-4.586a2 2 0 012.828 0l2.828 2.828"></path></svg>
                            </div>
                            <h4 class="text-[11px] font-black text-white uppercase tracking-[0.3em] italic">Identitas Visual & Teks Strategis</h4>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                            <div class="space-y-3">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Nama Platform</label>
                                <input type="text" name="app_name" value="{{ $settings['app_name'] ?? 'LEASINGPRO' }}" 
                                    class="w-full h-16 bg-white/5 border border-white/10 rounded-2xl px-6 text-sm font-bold text-white focus:ring-0 focus:border-indigo-500 transition-all duration-500">
                            </div>
                            <div class="space-y-3">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Tagline Hero (Pre-title)</label>
                                <input type="text" name="hero_tagline" value="{{ $settings['hero_tagline'] ?? '' }}" 
                                    class="w-full h-16 bg-white/5 border border-white/10 rounded-2xl px-6 text-sm font-bold text-white focus:ring-0 focus:border-indigo-500 transition-all duration-500">
                            </div>
                            <div class="col-span-full space-y-3">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Sub-judul Utama (Description)</label>
                                <textarea name="app_subtitle" rows="4" 
                                    class="w-full bg-white/5 border border-white/10 rounded-[32px] p-8 text-sm font-bold text-white leading-relaxed focus:ring-0 focus:border-indigo-500 transition-all duration-500">{{ $settings['app_subtitle'] ?? '' }}</textarea>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 pt-6">
                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Upload Brand Logo</label>
                                <div class="relative group">
                                    <div class="w-full h-40 border-2 border-dashed border-white/10 rounded-[32px] flex flex-col items-center justify-center transition-all group-hover:border-indigo-500/50 bg-white/[0.02]">
                                        @if(isset($settings['front_logo']) && $settings['front_logo'])
                                            <img src="{{ asset('storage/' . $settings['front_logo']) }}" class="h-16 w-auto object-contain mb-2 transform group-hover:scale-110 transition-transform duration-700">
                                        @else
                                            <svg class="w-10 h-10 text-slate-700 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                                        @endif
                                        <span class="text-[9px] font-black text-slate-600 uppercase tracking-widest italic mt-2">Pilih File Logo SVG/PNG</span>
                                    </div>
                                    <input type="file" name="front_logo" class="absolute inset-0 opacity-0 cursor-pointer">
                                </div>
                            </div>
                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Hero Atmosphere (Image)</label>
                                <div class="relative group">
                                    <div class="w-full h-40 border-2 border-dashed border-white/10 rounded-[32px] flex flex-col items-center justify-center transition-all group-hover:border-indigo-500/50 bg-white/[0.02] overflow-hidden">
                                        @if(isset($settings['hero_background']) && $settings['hero_background'] && !str_starts_with($settings['hero_background'], 'bg-'))
                                            <img src="{{ asset('storage/' . $settings['hero_background']) }}" class="w-full h-full object-cover opacity-20">
                                        @else
                                            <svg class="w-10 h-10 text-slate-700 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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"></path></svg>
                                        @endif
                                        <div class="absolute inset-0 flex flex-col items-center justify-center bg-black/40 backdrop-blur-[2px]">
                                            <span class="text-[9px] font-black text-white uppercase tracking-widest bg-indigo-600 px-5 py-2.5 rounded-full shadow-2xl italic">Ganti Background Elit</span>
                                        </div>
                                    </div>
                                    <input type="file" name="hero_background" class="absolute inset-0 opacity-0 cursor-pointer">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section: Actions & Buttons -->
                    <div class="bg-white/5 p-10 lg:p-12 rounded-[48px] shadow-2xl border border-white/5 space-y-10">
                        <div class="flex items-center gap-5 border-b border-white/5 pb-8">
                            <div class="w-12 h-12 bg-emerald-500/10 rounded-2xl flex items-center justify-center text-emerald-400 border border-emerald-500/20">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path></svg>
                            </div>
                            <h4 class="text-[11px] font-black text-white uppercase tracking-[0.3em] italic">Tombol Akses & Panggilan Strategis</h4>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Label Tombol Masuk</label>
                                <div class="bg-white/5 p-8 rounded-[32px] border border-white/5 space-y-5">
                                    <input type="text" name="login_button_text" value="{{ $settings['login_button_text'] ?? 'Masuk Dashboard' }}" 
                                        class="w-full h-14 bg-white/5 border border-white/10 rounded-xl px-6 text-sm font-bold text-white focus:ring-0 focus:border-indigo-500 transition-all">
                                    <div class="px-6 py-4 bg-white/5 border border-white/10 rounded-xl text-center text-[9px] font-black uppercase tracking-[0.2em] text-slate-500 italic">Preview: {{ $settings['login_button_text'] ?? '...' }}</div>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic px-1">Label Tombol Daftar</label>
                                <div class="bg-indigo-500/5 p-8 rounded-[32px] border border-indigo-500/10 space-y-5">
                                    <input type="text" name="register_button_text" value="{{ $settings['register_button_text'] ?? 'Daftar Member Baru' }}" 
                                        class="w-full h-14 bg-white/5 border border-indigo-500/20 rounded-xl px-6 text-sm font-bold text-indigo-400 focus:ring-0 focus:border-indigo-500 transition-all">
                                    <div class="px-6 py-4 bg-indigo-600 rounded-2xl text-center text-[9px] font-black uppercase tracking-[0.2em] text-white shadow-3xl shadow-indigo-600/20 italic">Preview: {{ $settings['register_button_text'] ?? '...' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: System Tuning -->
                <div class="space-y-12">
                    <div class="bg-slate-950 p-10 lg:p-12 rounded-[56px] shadow-[0_40px_100px_rgba(0,0,0,0.8)] text-white space-y-10 sticky top-32 border border-white/5">
                        <div class="flex items-center gap-5 border-b border-white/5 pb-8 italic">
                            <div class="w-12 h-12 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-2xl">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                            </div>
                            <h4 class="text-[11px] font-black tracking-[0.3em] uppercase">Fine Tuning Vision</h4>
                        </div>

                        <div class="space-y-10">
                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Hero Overlay Opacity</label>
                                <input type="number" step="0.1" name="hero_overlay_opacity" value="{{ $settings['hero_overlay_opacity'] ?? '0.4' }}" 
                                    class="w-full h-14 bg-white/5 border border-white/10 rounded-2xl px-6 text-sm font-bold text-white focus:ring-0 focus:border-indigo-500 transition-all">
                            </div>

                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Text Alignment Matrix</label>
                                <select name="hero_alignment" class="w-full h-14 bg-white/5 border border-white/10 rounded-2xl px-6 text-[11px] font-black uppercase tracking-widest text-white focus:ring-0 focus:border-indigo-500 appearance-none pointer-events-auto cursor-pointer">
                                    <option value="left" {{ (isset($settings['hero_alignment']) && $settings['hero_alignment'] == 'left') ? 'selected' : '' }} class="bg-slate-900">Left Aligned</option>
                                    <option value="center" {{ (!isset($settings['hero_alignment']) || $settings['hero_alignment'] == 'center') ? 'selected' : '' }} class="bg-slate-900">Centered Beauty</option>
                                    <option value="right" {{ (isset($settings['hero_alignment']) && $settings['hero_alignment'] == 'right') ? 'selected' : '' }} class="bg-slate-900">Right Aligned</option>
                                </select>
                            </div>

                            <div class="space-y-4">
                                <label class="block text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Brand Accent Color (Hex)</label>
                                <div class="flex items-center gap-4">
                                    <input type="text" name="hero_text_color" value="{{ $settings['hero_text_color'] ?? '#020617' }}" 
                                        class="flex-1 h-14 bg-white/5 border border-white/10 rounded-2xl px-6 text-sm font-mono font-bold text-white uppercase tracking-widest">
                                    <div class="w-14 h-14 rounded-2xl border border-white/20 shadow-xl" style="background-color: {{ $settings['hero_text_color'] ?? '#020617' }}"></div>
                                </div>
                            </div>
                        </div>

                        <div class="pt-10">
                            <button type="submit" class="w-full py-7 bg-white text-slate-950 font-black text-[12px] uppercase tracking-[0.4em] rounded-[32px] shadow-[0_20px_50px_rgba(255,255,255,0.1)] hover:bg-indigo-600 hover:text-white transition-all duration-700 italic transform hover:scale-[1.02] active:scale-[0.98]">
                                Publikasikan Perubahan →
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</x-app-layout>
