@props(['title' => null])

<x-base-layout :title="$title">
    <div class="min-h-screen grid lg:grid-cols-2">
        {{-- Panel kiri: branding (hidden di mobile) --}}
        <div class="hidden lg:flex flex-col justify-between bg-gradient-to-br from-primary-700 via-primary-800 to-teal-900 p-12 text-white relative overflow-hidden">
            <div class="absolute -top-20 -right-20 w-96 h-96 bg-white/5 rounded-full"></div>
            <div class="absolute -bottom-32 -left-10 w-80 h-80 bg-white/5 rounded-full"></div>

            <div class="relative z-10 flex items-center gap-3">
                @php $logo = \App\Models\VillageSetting::get('village_logo'); @endphp
                @if($logo)
                    <img src="{{ Storage::url($logo) }}" class="w-11 h-11 rounded-xl object-cover bg-white/10" alt="Logo">
                @else
                    <div class="w-11 h-11 rounded-xl bg-white/15 flex items-center justify-center font-bold text-lg">D</div>
                @endif
                <div>
                    <p class="font-bold">{{ \App\Models\VillageSetting::get('village_name', 'Desa') }}</p>
                    <p class="text-xs text-white/70">Layanan Mandiri Digital</p>
                </div>
            </div>

            <div class="relative z-10">
                <h2 class="text-3xl font-extrabold leading-tight mb-3">Layanan Administrasi Desa, Kini Lebih Mudah</h2>
                <p class="text-white/80 leading-relaxed">Ajukan surat keterangan, pantau status pengajuan, dan unduh dokumen resmi tanpa harus datang ke kantor desa.</p>
            </div>

            <p class="relative z-10 text-xs text-white/50">&copy; {{ date('Y') }} {{ \App\Models\VillageSetting::get('village_name', 'Desa') }}. Seluruh hak dilindungi.</p>
        </div>

        {{-- Panel kanan: form --}}
        <div class="flex items-center justify-center p-6 sm:p-12 bg-slate-50 dark:bg-slate-900">
            <div class="w-full max-w-sm">
                <div class="lg:hidden flex items-center gap-3 mb-8 justify-center">
                    <div class="w-10 h-10 rounded-xl bg-primary-700 flex items-center justify-center text-white font-bold">D</div>
                    <p class="font-bold text-slate-800 dark:text-white">{{ \App\Models\VillageSetting::get('village_name', 'Desa') }}</p>
                </div>

                {{ $slot }}
            </div>
        </div>
    </div>
</x-base-layout>