<x-guest-layout>
    <!-- Panel Visual Kiri (Hanya muncul di md ke atas) -->
    <div class="hidden md:flex md:w-1/2 bg-gradient-to-br from-emerald-600 via-teal-700 to-blue-800 p-12 flex-col justify-between text-white relative overflow-hidden">
        <!-- Dekorasi Gradien Lingkaran -->
        <div class="absolute -right-20 -bottom-20 w-80 h-80 rounded-full bg-white opacity-5 blur-2xl"></div>
        <div class="absolute -left-10 -top-10 w-60 h-60 rounded-full bg-emerald-500 opacity-10 blur-3xl"></div>

        <!-- Logo & Nama Aplikasi -->
        <div class="flex items-center gap-3 relative z-10">
            <div class="p-2.5 bg-white bg-opacity-10 rounded-2xl backdrop-blur-md">
                <i data-lucide="wallet" class="w-6 h-6 text-emerald-200"></i>
            </div>
            <span class="font-extrabold text-xl tracking-wider uppercase text-emerald-100">RD Balance</span>
        </div>

        <!-- Tagline & Fitur Utama -->
        <div class="space-y-6 my-auto relative z-10">
            <h1 class="text-3xl font-extrabold leading-tight">
                Harmoni Keuangan <br>Keluarga Anda
            </h1>
            <p class="text-sm text-emerald-100 font-medium leading-relaxed opacity-90">
                Pantau pemasukan, kelola pengeluaran, dan wujudkan rencana masa depan finansial bersama pasangan dalam satu dashboard yang transparan dan elegan.
            </p>

            <div class="space-y-4 pt-4">
                <div class="flex items-center gap-3">
                    <div class="p-1.5 bg-white bg-opacity-10 rounded-lg text-blue-400">
                        <i data-lucide="shield-check" class="w-5 h-5"></i>
                    </div>
                    <span class="text-sm font-semibold">Dual Role Otomatis (Suami & Istri)</span>
                </div>
                <div class="flex items-center gap-3">
                    <div class="p-1.5 bg-white bg-opacity-10 rounded-lg text-blue-400">
                        <i data-lucide="pie-chart" class="w-5 h-5"></i>
                    </div>
                    <span class="text-sm font-semibold">Visualisasi Alokasi Kategori Pengeluaran</span>
                </div>
                <div class="flex items-center gap-3">
                    <div class="p-1.5 bg-white bg-opacity-10 rounded-lg text-blue-400">
                        <i data-lucide="trending-up" class="w-5 h-5"></i>
                    </div>
                    <span class="text-sm font-semibold">Grafik Analisis Tren 6 Bulan Terakhir</span>
                </div>
            </div>
        </div>

        <!-- Hak Cipta / Footer Kiri -->
        <div class="text-xs text-emerald-200 relative z-10 font-medium opacity-75">
            &copy; {{ date('Y') }} Support by RD Balance.
        </div>
    </div>

    <!-- Panel Formulir Kanan (Login Form) -->
    <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-between bg-white">
        <!-- Logo untuk Tampilan Mobile -->
        <div class="flex items-center gap-2 md:hidden mb-8">
            <div class="p-2 bg-emerald-600 rounded-xl text-white">
                <i data-lucide="wallet" class="w-5 h-5"></i>
            </div>
            <span class="font-bold text-lg text-emerald-800">RD Balance</span>
        </div>

        <div class="my-auto space-y-6">
            <div>
                <h2 class="text-2xl font-extrabold text-gray-800 tracking-tight">Selamat Datang Kembali</h2>
                <p class="text-sm text-gray-400 font-medium mt-1">Silakan masuk menggunakan email terdaftar keluarga Anda.</p>
            </div>

            <!-- Status Sesi / Alert -->
            <x-auth-session-status class="mb-4" :status="session('status')" />

            <form method="POST" action="{{ route('login') }}" class="space-y-4">
                @csrf

                <!-- Input Email -->
                <div>
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Alamat Email</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-gray-400">
                            <i data-lucide="mail" class="w-4 h-4"></i>
                        </span>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username" placeholder="user email" class="pl-10 w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 @error('email') border-red-300 @enderror">
                    </div>
                    <x-input-error :messages="$errors->get('email')" class="mt-2 text-xs font-semibold" />
                </div>

                <!-- Input Password -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <label for="password" class="block text-sm font-semibold text-gray-700">Password</label>
                        @if (Route::has('password.request'))
                        <a class="text-xs text-emerald-600 hover:text-emerald-800 font-semibold transition" href="{{ route('password.request') }}">
                            Lupa Password?
                        </a>
                        @endif
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-gray-400">
                            <i data-lucide="lock" class="w-4 h-4"></i>
                        </span>
                        <input id="password" type="password" name="password" required autocomplete="current-password" placeholder="••••••••" class="pl-10 w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 @error('password') border-red-300 @enderror">
                    </div>
                    <x-input-error :messages="$errors->get('password')" class="mt-2 text-xs font-semibold" />
                </div>

                <!-- Ingat Saya -->
                <div class="flex items-center">
                    <input id="remember_me" type="checkbox" name="remember" class="rounded border-gray-300 text-emerald-600 shadow-sm focus:ring-emerald-500">
                    <label for="remember_me" class="ms-2 text-xs text-gray-500 font-semibold cursor-pointer">Ingat perangkat saya</label>
                </div>

                <!-- Tombol Submit -->
                <button type="submit" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl shadow-md transition duration-150 flex items-center justify-center gap-2">
                    <i data-lucide="log-in" class="w-4.5 h-4.5"></i>
                    Masuk ke Dashboard
                </button>
            </form>
        </div>

    </div>
</x-guest-layout>