@extends('layouts.app')

@section('content')
<div class="min-h-[85vh] flex items-center justify-center px-6 bg-white relative overflow-hidden">
    <div class="absolute top-0 right-0 w-96 h-96 bg-orange-50 rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-gray-50 rounded-full blur-3xl opacity-50 translate-y-1/2 -translate-x-1/2"></div>

    <div class="max-w-md w-full relative z-10">
        <div class="bg-white rounded-[3rem] border border-gray-100 shadow-2xl overflow-hidden transition-all duration-500">
            
            <div class="bg-gray-900 p-12 text-center relative">
                <div class="relative z-10">
                    <div class="w-16 h-16 bg-orange-700 rounded-2xl mx-auto mb-6 flex items-center justify-center rotate-3 shadow-lg shadow-orange-700/40">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-1.14-10.49c1.458-1.46 3.542-1.46 5 0m-8.544 1.15c-1.458 1.46-3.542 1.46-5 0m1.14 10.49C1.009 17.799 0 14.517 0 11c0-3.517 1.009-6.799 2.753-9.571m1.14 10.49c1.458-1.46 3.542-1.46 5 0m8.544-1.15c1.458-1.46 3.542-1.46 5 0m-1.14-10.49C22.991 4.201 24 7.483 24 11c0 3.517-1.009 6.799-2.753 9.571" />
                        </svg>
                    </div>
                    <h2 class="text-3xl font-black text-white italic tracking-tighter">RobustaMeter<span class="text-orange-600">.id</span></h2>
                    <p class="text-gray-400 text-xs mt-2 uppercase tracking-[0.3em] font-bold">Akses Dashboard Digital</p>
                </div>
                <div class="absolute top-0 right-0 w-32 h-32 bg-orange-600/10 rounded-full blur-3xl"></div>
            </div>

            <form action="{{ route('login') }}" method="POST" class="p-10 space-y-6">
                @csrf
                
                <div class="space-y-2">
                    <label for="email" class="text-[10px] font-black uppercase text-gray-400 ml-1 tracking-widest">Alamat Email</label>
                    <div class="relative group">
                        <input type="email" id="email" name="email" required 
                            class="w-full px-6 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-4 focus:ring-orange-700/5 focus:border-orange-700 outline-none transition-all placeholder:text-gray-300 text-sm font-medium @error('email') border-red-500 @enderror"
                            placeholder="nama@email.com" value="{{ old('email') }}">
                        @error('email')
                            <p class="text-[10px] text-red-500 mt-1 ml-1 font-bold italic">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="space-y-2">
                    <div class="flex justify-between items-center ml-1">
                        <label for="password" class="text-[10px] font-black uppercase text-gray-400 tracking-widest">Password</label>
                        <a href="{{ route('password.request') }}" class="text-[10px] font-bold text-orange-700 hover:text-orange-800 transition">Lupa Kata Sandi?</a>
                    </div>
                    <div class="relative group border-none">
                        <input type="password" id="password" name="password" required 
                            class="w-full px-6 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-4 focus:ring-orange-700/5 focus:border-orange-700 outline-none transition-all placeholder:text-gray-300 text-sm font-medium"
                            placeholder="••••••••">
                    </div>
                </div>

                <div class="flex items-center justify-between px-1">
                    <label class="flex items-center gap-2 cursor-pointer group">
                        <input type="checkbox" name="remember" class="w-4 h-4 rounded border-gray-300 text-orange-700 focus:ring-orange-700 accent-orange-700">
                        <span class="text-xs text-gray-500 font-semibold group-hover:text-gray-700 transition">Ingat saya</span>
                    </label>
                </div>

                <button type="submit" class="w-full py-4 bg-orange-700 text-white rounded-2xl font-bold shadow-xl shadow-orange-700/30 hover:bg-orange-800 hover:-translate-y-1 active:scale-95 transition-all duration-300 flex items-center justify-center gap-2 group">
                    <span>Masuk ke Akun</span>
                    <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                </button>

                <div class="text-center pt-4">
                    <p class="text-xs text-gray-400 font-semibold">Belum memiliki akun? 
                        <a href="{{ route('register') }}" class="text-orange-700 font-bold hover:underline underline-offset-4 transition">Daftar Sekarang</a>
                    </p>
                </div>
            </form>
        </div>

        <div class="text-center mt-8">
            <a href="/" class="text-xs font-bold text-gray-400 hover:text-gray-600 transition flex items-center justify-center gap-2">
                <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" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                Kembali ke Beranda
            </a>
        </div>
    </div>
</div>
@endsection