@extends('layouts.main')

@section('title', 'Daftar Akun - Rice Leaf AI')

@section('content')
<div class="flex items-center justify-center min-h-[calc(100vh-76px)] px-6 py-12 relative overflow-hidden">
    
    <div class="absolute top-10 right-10 w-64 h-64 bg-green-200 rounded-full blur-3xl opacity-30 animate-pulse-slow"></div>
    <div class="absolute bottom-10 left-10 w-64 h-64 bg-yellow-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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
            </div>
            <h2 class="text-3xl font-extrabold text-gray-800">Buat Akun Baru</h2>
            <p class="text-gray-500 mt-2 text-sm">Bergabunglah untuk mulai mengelola prediksi AI.</p>
        </div>

        <form action="/register" method="POST">
            @csrf
            
            <div class="mb-4">
                <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap</label>
                <input type="text" name="name" id="name" required autofocus value="{{ old('name') }}"
                       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 @error('name') border-red-500 @enderror"
                       placeholder="Masukkan nama Anda">
                @error('name')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <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 value="{{ old('email') }}"
                       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 @error('email') border-red-500 @enderror"
                       placeholder="user@riceleaf.ai">
                @error('email')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <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 @error('password') border-red-500 @enderror"
                       placeholder="Minimal 5 karakter">
                @error('password')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-8">
                <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" 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="Ulangi password">
            </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">
                Daftar Sekarang
            </button>
        </form>

        <p class="text-center mt-6 text-sm text-gray-600 font-medium">
            Sudah punya akun? 
            <a href="/login" class="text-green-600 hover:text-green-700 hover:underline font-bold transition-all">Login di sini</a>
        </p>

    </div>
</div>
@endsection