@extends('layouts.main')

@section('title', 'Login - Rice Leaf AI')

@section('content')
<div class="flex items-center justify-center min-h-[calc(100vh-76px)] px-6 py-12 relative overflow-hidden">
    
    <!-- Latar Belakang Dekoratif -->
    <div class="absolute top-10 left-10 w-64 h-64 bg-green-200 rounded-full blur-3xl opacity-30 animate-pulse-slow"></div>
    <div class="absolute bottom-10 right-10 w-64 h-64 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse-slow" style="animation-delay: 1s;"></div>

    <div class="bg-white p-10 rounded-[2.5rem] shadow-2xl border border-gray-100 w-full max-w-md relative z-10 animate-fade-in-up">
        
        <div class="text-center mb-8">
            <div class="bg-green-50 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
            </div>
            <h2 class="text-3xl font-extrabold text-gray-800">Selamat Datang</h2>
            <p class="text-gray-500 mt-2 text-sm">Silakan login untuk mengakses sistem prediksi dan kelola data.</p>
        </div>

        @if(session('error'))
        <div class="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-xl mb-6 text-sm font-medium flex items-center gap-2">
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            {{ session('error') }}
        </div>
        @endif

        <form action="/login" method="POST">
            @csrf
            
            <div class="mb-5">
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Alamat Email</label>
                <input type="email" name="email" id="email" required autofocus
                       class="w-full px-5 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all outline-none text-gray-700"
                       placeholder="user@riceleaf.ai">
            </div>

            <div class="mb-8">
                <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">Password</label>
                <input type="password" name="password" id="password" required
                       class="w-full px-5 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all outline-none text-gray-700"
                       placeholder="••••••••">
            </div>

            <button type="submit" class="w-full bg-gradient-to-r from-green-600 to-green-500 hover:from-green-700 hover:to-green-600 text-white py-3.5 rounded-xl text-lg font-bold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300">
                Masuk Sistem
            </button>
        </form>

            <p class="text-center mt-6 text-sm text-gray-600 font-medium">
            Belum punya akun? 
            <a href="/register" class="text-green-600 hover:text-green-700 hover:underline font-bold transition-all">Daftar di sini</a>
        </p>
    </div>
</div>
@endsection