<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register | Legacy Eatery & Space</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-[#f8f0f0] to-[#ffe6e6] flex items-center justify-center min-h-screen py-8">
    <div class="bg-white p-8 rounded-2xl shadow-2xl w-96 border border-[#8B0000]/10">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-[#8B0000]">Create Account</h2>
            <p class="text-gray-600 mt-2">Join our community today</p>
        </div>

        @if(session('success'))
            <div class="bg-green-50 text-green-600 p-3 rounded-lg mb-4 text-sm">
                {{ session('success') }}
            </div>
        @endif

        <form method="POST" action="{{ route('register') }}" class="space-y-5">
            @csrf
            <div>
                <label class="block text-[#8B0000] font-medium mb-2">Nama Lengkap</label>
                <input type="text" name="name" 
                       class="w-full px-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#8B0000] focus:border-transparent transition-all duration-200" 
                       placeholder="Masukkan nama lengkap Anda" required>
            </div>
            <div>
                <label class="block text-[#8B0000] font-medium mb-2">Email</label>
                <input type="email" name="email" 
                       class="w-full px-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#8B0000] focus:border-transparent transition-all duration-200" 
                       placeholder="Masukkan email Anda" required>
            </div>
            <div>
                <label class="block text-[#8B0000] font-medium mb-2">Password</label>
                <input type="password" name="password" 
                       class="w-full px-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#8B0000] focus:border-transparent transition-all duration-200" 
                       placeholder="Masukkan password Anda" required>
            </div>
            <div>
                <label class="block text-[#8B0000] font-medium mb-2">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" 
                       class="w-full px-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#8B0000] focus:border-transparent transition-all duration-200" 
                       placeholder="Ulangi password Anda" required>
            </div>
            <button type="submit" 
                    class="w-full bg-[#8B0000] text-white py-3 rounded-xl hover:bg-[#660000] transform hover:scale-[1.02] transition-all duration-200 font-medium text-lg shadow-lg hover:shadow-xl mt-6">
                Daftar Sekarang
            </button>
        </form>

        <p class="text-center text-gray-600 mt-6">
            Sudah punya akun? 
            <a href="{{ route('login') }}" 
               class="text-[#8B0000] hover:text-[#660000] font-medium hover:underline transition-all duration-200">
                Login
            </a>
        </p>
    </div>
</body>
</html>
