<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Daftar Akun - ElvaraShop</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: '#0f172a',
                        accent: '#3b82f6',
                        accentDark: '#2563eb',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen font-sans antialiased bg-gradient-to-br from-blue-50 to-gray-100 py-10">

    <div class="w-full max-w-lg p-6">
        
        <!-- Logo -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-14 h-14 bg-accent text-white rounded-2xl shadow-lg shadow-blue-500/30 mb-4">
                <i class="bi bi-person-plus-fill text-3xl"></i>
            </div>
            <h1 class="text-3xl font-extrabold text-primary tracking-tight">Bergabunglah</h1>
            <p class="text-sm text-gray-500 mt-2">Daftar sekarang untuk menikmati pengalaman berbelanja terbaik.</p>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-3xl shadow-xl shadow-gray-200/50 p-8 border border-gray-100 relative overflow-hidden">
            <!-- Decorative blur -->
            <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-100 rounded-full blur-3xl opacity-50 pointer-events-none"></div>
            
            @if(session('error'))
                <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-lg mb-6 text-sm flex gap-3 relative z-10">
                    <i class="bi bi-exclamation-circle text-red-500 mt-0.5"></i>
                    <div>{{ session('error') }}</div>
                </div>
            @endif

            <form method="POST" action="/register">
                @csrf

                <!-- Nama -->
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-gray-700 block">Nama Lengkap</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400 pointer-events-none">
                            <i class="bi bi-person"></i>
                        </span>
                        <input type="text" name="nama" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 text-sm rounded-xl focus:bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 transition outline-none" placeholder="Masukkan nama lengkap Anda" required autofocus>
                    </div>
                </div>

                <!-- Email -->
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-gray-700 block">Alamat Email</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400 pointer-events-none">
                            <i class="bi bi-envelope"></i>
                        </span>
                        <input type="email" name="email" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 text-sm rounded-xl focus:bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 transition outline-none" placeholder="contoh@email.com" required>
                    </div>
                </div>

                <!-- Password -->
                <div class="space-y-2 pt-2">
                    <label class="text-sm font-semibold text-gray-700 block">Kata Sandi</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400 pointer-events-none">
                            <i class="bi bi-lock"></i>
                        </span>
                        <input type="password" name="password" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 text-sm rounded-xl focus:bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 transition outline-none" placeholder="Minimal 8 karakter" required minlength="8">
                    </div>
                </div>

                <!-- Konfirmasi Password -->
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-gray-700 block">Konfirmasi Kata Sandi</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400 pointer-events-none">
                            <i class="bi bi-lock-fill"></i>
                        </span>
                        <input type="password" name="password_confirmation" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 text-sm rounded-xl focus:bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 transition outline-none" placeholder="Ketik ulang kata sandi" required minlength="8">
                    </div>
                </div>

                <!-- Syarat Ketentuan -->
                <div class="flex items-start pt-2">
                    <div class="flex items-center h-5">
                        <input id="terms" type="checkbox" required class="w-4 h-4 text-accent bg-gray-100 border-gray-300 rounded focus:ring-accent focus:ring-2">
                    </div>
                    <label for="terms" class="ml-2 text-xs text-gray-500 leading-relaxed">
                        Dengan mendaftar, saya menyetujui <a href="#" class="text-accent font-medium hover:underline">Syarat & Ketentuan</a> serta <a href="#" class="text-accent font-medium hover:underline">Kebijakan Privasi</a> yang berlaku.
                    </label>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full flex justify-center items-center gap-2 bg-primary hover:bg-gray-800 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-gray-900/20 transition transform hover:-translate-y-0.5">
                        Daftar Akun Baru <i class="bi bi-arrow-right"></i>
                    </button>
                </div>
            </form>
            
            <div class="mt-8 text-center relative z-10">
                <p class="text-sm text-gray-600">Sudah memiliki akun? <a href="{{ route('login') }}" class="font-bold text-accent hover:text-accentDark border-b border-transparent hover:border-accentDark transition">Masuk di sini</a></p>
            </div>
        </div>
        
        <!-- Back Link -->
        <div class="mt-8 text-center">
            <a href="welcome" class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-primary transition font-medium">
                <i class="bi bi-arrow-left"></i> Kembali ke Beranda
            </a>
        </div>
    </div>

</body>
</html>