<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body class="antialiased">

<div class="min-h-screen bg-gradient-to-br from-emerald-50 via-white to-sky-50">
    <div class="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8 py-8 sm:py-10">

        {{-- Mobile Brand Header --}}
        <div class="lg:hidden mb-6">
            <div class="flex items-center gap-3">
                <div class="h-12 w-12 rounded-2xl bg-gradient-to-br from-emerald-700 to-emerald-500 relative border border-emerald-900/10 shrink-0">
                    <span class="absolute right-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 rounded-full bg-red-500"></span>
                </div>
                <div>
                    <h1 class="text-xl font-extrabold text-gray-900 leading-tight">Bangladesh Election</h1>
                    <p class="text-xs text-gray-500 mt-0.5">নির্বাচন ব্যবস্থাপনা সিস্টেম</p>
                </div>
            </div>

            <div class="mt-4 rounded-2xl border border-gray-200 bg-white/70 backdrop-blur px-4 py-3">
                <p class="text-sm font-bold text-gray-900">নতুন অ্যাকাউন্ট তৈরি করুন</p>
                <p class="mt-1 text-xs text-gray-600 leading-relaxed">
                    নিবন্ধন করে সিস্টেমে প্রবেশাধিকার নিন। সীট, প্রার্থী, ভোটার ও পরিসংখ্যান ব্যবস্থাপনা সহজ করুন।
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-stretch">

            {{-- Left: Brand / Info (desktop only) --}}
            <div class="hidden lg:flex relative overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm p-10">
                <div class="pointer-events-none absolute -top-24 -right-24 h-72 w-72 rounded-full bg-emerald-200/40 blur-3xl"></div>
                <div class="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-sky-200/30 blur-3xl"></div>

                <div class="relative flex flex-col justify-between w-full">
                    <div class="flex items-center gap-4">
                        <div class="h-14 w-14 rounded-2xl bg-gradient-to-br from-emerald-700 to-emerald-500 relative border border-emerald-900/10">
                            <span class="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-red-500"></span>
                        </div>
                        <div>
                            <h1 class="text-2xl font-extrabold text-gray-900 leading-tight">Bangladesh Election</h1>
                            <p class="text-sm text-gray-500 mt-1">নির্বাচন ব্যবস্থাপনা সিস্টেম</p>
                        </div>
                    </div>

                    <div class="mt-10">
                        <h2 class="text-xl font-extrabold text-gray-900">স্বাগতম 👋</h2>
                        <p class="mt-2 text-sm text-gray-600 leading-relaxed max-w-md">
                            দ্রুত নিবন্ধন করে আপনার অ্যাকাউন্ট তৈরি করুন। এরপর ড্যাশবোর্ডে প্রবেশ করে সিস্টেম পরিচালনা করুন।
                        </p>

                        <div class="mt-6 grid grid-cols-2 gap-3">
                            <div class="rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
                                <p class="text-xs font-semibold text-emerald-700">নিরাপদ</p>
                                <p class="mt-1 text-sm font-bold text-gray-900">Registration</p>
                            </div>
                            <div class="rounded-2xl border border-sky-100 bg-sky-50 p-4">
                                <p class="text-xs font-semibold text-sky-700">সহজ</p>
                                <p class="mt-1 text-sm font-bold text-gray-900">Setup</p>
                            </div>
                        </div>
                    </div>

                    <p class="mt-10 text-xs text-gray-500">
                        © {{ date('Y') }} Bangladesh Election • All rights reserved
                    </p>
                </div>
            </div>

            {{-- Right: Register Card --}}
            <div class="relative overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm p-5 sm:p-8 lg:p-10">
                <div class="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-emerald-200/30 blur-3xl"></div>

                <div class="mb-5 sm:mb-6">
                    <h2 class="text-xl sm:text-2xl font-extrabold text-gray-900">রেজিস্টার করুন</h2>
                    <p class="mt-1 text-xs sm:text-sm text-gray-500">নতুন অ্যাকাউন্ট তৈরি করতে তথ্য দিন</p>
                </div>

                <form method="POST" action="{{ route('register') }}" class="space-y-4 sm:space-y-5">
                    @csrf

                    <!-- Name -->
                    <div>
                        <x-input-label for="name" value="নাম" class="text-sm font-semibold text-gray-700" />
                        <div class="mt-2 relative">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </span>

                            <x-text-input
                                id="name"
                                class="block w-full rounded-2xl border-gray-200 bg-white pl-11 pr-4 py-3 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                                type="text"
                                name="name"
                                :value="old('name')"
                                required
                                autofocus
                                autocomplete="name"
                                placeholder="আপনার নাম লিখুন"
                            />
                        </div>
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>

                    <!-- Mobile Number -->
                    <div>
                        <x-input-label for="phone" value="মোবাইল নম্বর" class="text-sm font-semibold text-gray-700" />
                        <div class="mt-2 relative">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M7 4h10a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z" opacity=".2"></path>
                                    <path d="M9 6h6"></path>
                                    <path d="M9 18h6"></path>
                                </svg>
                            </span>

                            <x-text-input
                                id="phone"
                                class="block w-full rounded-2xl border-gray-200 bg-white pl-11 pr-4 py-3 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                                type="text"
                                name="phone"
                                :value="old('phone')"
                                required
                                autocomplete="tel"
                                placeholder="01XXXXXXXXX"
                                inputmode="numeric"
                            />
                        </div>
                        <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                    </div>

                    <!-- Password -->
                    <div>
                        <x-input-label for="password" value="পাসওয়ার্ড" class="text-sm font-semibold text-gray-700" />
                        <div class="mt-2 relative">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M7 10V8a5 5 0 0110 0v2"></path>
                                    <path d="M6 10h12v10H6z"></path>
                                </svg>
                            </span>

                            <x-text-input
                                id="password"
                                class="block w-full rounded-2xl border-gray-200 bg-white pl-11 pr-4 py-3 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                                type="password"
                                name="password"
                                required
                                autocomplete="new-password"
                                placeholder="নতুন পাসওয়ার্ড দিন"
                            />
                        </div>
                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                    </div>

                    <!-- Confirm Password -->
                    <div>
                        <x-input-label for="password_confirmation" value="পাসওয়ার্ড আবার লিখুন" class="text-sm font-semibold text-gray-700" />
                        <div class="mt-2 relative">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M7 10V8a5 5 0 0110 0v2"></path>
                                    <path d="M6 10h12v10H6z"></path>
                                    <path d="M9 14l2 2 4-4"></path>
                                </svg>
                            </span>

                            <x-text-input
                                id="password_confirmation"
                                class="block w-full rounded-2xl border-gray-200 bg-white pl-11 pr-4 py-3 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                                type="password"
                                name="password_confirmation"
                                required
                                autocomplete="new-password"
                                placeholder="পাসওয়ার্ড আবার লিখুন"
                            />
                        </div>
                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                    </div>

                    <!-- Actions -->
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-1">
                        <a class="text-sm font-semibold text-emerald-700 hover:text-emerald-800 hover:underline"
                           href="{{ route('login') }}">
                            Already registered?
                        </a>

                        <button type="submit"
                                class="w-full sm:w-auto inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-extrabold text-white shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition">
                            Register
                            <svg class="ml-2 h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M5 12h14"></path>
                                <path d="M13 6l6 6-6 6"></path>
                            </svg>
                        </button>
                    </div>

                    <p class="text-center text-xs text-gray-500 pt-1">
                        রেজিস্টার করলে আপনি আমাদের শর্তাবলী ও নীতিমালায় সম্মতি দিচ্ছেন।
                    </p>
                </form>

                {{-- Mobile footer --}}
                <p class="mt-6 text-center text-[11px] text-gray-500 lg:hidden">
                    © {{ date('Y') }} Bangladesh Election • All rights reserved
                </p>
            </div>

        </div>
    </div>
</div>

</body>
</html>
