<section class="min-h-screen lg:grid lg:grid-cols-2 bg-white lg:bg-[#F8FAFC]">

    <!-- LEFT SIDE / DESKTOP ONLY -->
    <div class="hidden lg:flex relative overflow-hidden bg-[#020617] p-12">

        <div class="absolute inset-0 bg-gradient-to-br from-[#020617] via-[#0F172A] to-[#063B46]"></div>
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-[#06B6D4]/20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[#3B82F6]/20 rounded-full blur-3xl"></div>

        <div class="relative z-10 flex flex-col justify-between w-full">

            <div>
                <img src="/driftly/public/assets/img/general/logo-white.png" alt="Driftly" class="h-16 w-auto mb-8">

                <div class="max-w-xl">
                    <div class="inline-flex items-center gap-2 bg-white/10 border border-white/10 rounded-full px-4 py-2 text-sm text-white/80 backdrop-blur mb-6">
                        <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
                        Join the mobility network
                    </div>

                    <h1 class="text-5xl font-bold text-white leading-tight mb-6">
                        Create your account and
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#3B82F6] to-[#06B6D4]">
                            start moving.
                        </span>
                    </h1>

                    <p class="text-slate-300 text-lg leading-8">
                        Book rides, offer empty seats and connect with trusted people going your way.
                    </p>
                </div>
            </div>

            <div class="relative">
                <img src="/driftly/public/assets/img/general/auth-car.png" alt="Car"
                    class="relative z-10 w-full max-w-2xl drop-shadow-[0_30px_60px_rgba(0,0,0,0.6)]">

                <div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-[70%] h-20 bg-[#06B6D4]/30 blur-3xl rounded-full"></div>
            </div>

            <div class="grid grid-cols-3 gap-4 mt-10">

                <div class="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-5">
                    <div class="text-3xl font-bold text-white mb-1">3 min</div>
                    <div class="text-slate-400 text-sm">Quick signup</div>
                </div>

                <div class="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-5">
                    <div class="text-3xl font-bold text-white mb-1">18+</div>
                    <div class="text-slate-400 text-sm">Safe community</div>
                </div>

                <div class="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-5">
                    <div class="text-3xl font-bold text-white mb-1">4.9</div>
                    <div class="text-slate-400 text-sm">User rating</div>
                </div>

            </div>

        </div>

    </div>

    <!-- RIGHT SIDE -->
    <div class="min-h-screen lg:min-h-0 flex items-start lg:items-center justify-center bg-white lg:bg-[#F8FAFC]">

        <div class="w-full min-h-screen lg:min-h-0 max-w-none lg:max-w-xl px-6 py-6 sm:px-8 lg:px-6 lg:py-10">

            <!-- MOBILE LOGO -->
            <div class="lg:hidden mb-5 sm:mb-10">
                <img src="/driftly/public/assets/img/general/logo.png" alt="Driftly" class="h-20 w-auto ">
            </div>

            <!-- FORM WRAPPER -->
            <div class="w-full bg-white lg:border lg:border-slate-200 lg:rounded-[2rem] lg:shadow-xl lg:p-8">

                <div class="mb-4 sm:mb-8">
                    <h2 class="text-[24px] lg:text-3xl font-bold text-[#0F172A] mb-2 leading-tight">
                        Create account
                    </h2>

                    <p class="text-slate-500 text-[16px] lg:text-base leading-8">
                        Join Driftly in a few simple steps.
                    </p>
                </div>

                <?php if (!empty($error)): ?>
                    <div class="bg-red-50 text-red-600 border border-red-100 p-4 rounded-2xl mb-6 text-[15px]">
                        <?= htmlspecialchars($error) ?>
                    </div>
                <?php endif; ?>

                <!-- STEPS -->
                <div class="grid grid-cols-3 gap-3 mb-8">

                    <div class="register-step-indicator active" data-step-indicator="1">
                        <span>1</span>
                        <strong>Account</strong>
                    </div>

                    <div class="register-step-indicator" data-step-indicator="2">
                        <span>2</span>
                        <strong>Profile</strong>
                    </div>

                    <div class="register-step-indicator" data-step-indicator="3">
                        <span>3</span>
                        <strong>Finish</strong>
                    </div>

                </div>

                <!-- SOCIAL -->
<div class="grid grid-cols-2 gap-3 mb-4 sm:mb-7">

                    <button type="button"
                        class="h-15 min-h-[60px] rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 transition flex items-center justify-center gap-3 font-semibold text-slate-700 text-[17px] lg:text-[15px]">
                        <i class="fa-brands fa-google text-red-500 text-lg"></i>
                        Google
                    </button>

                    <button type="button"
                        class="h-15 min-h-[60px] rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 transition flex items-center justify-center gap-3 font-semibold text-slate-700 text-[17px] lg:text-[15px]">
                        <i class="fa-brands fa-facebook-f text-blue-600 text-lg"></i>
                        Facebook
                    </button>

                </div>

                <div class="flex items-center gap-4 mb-4 sm:mb-7">
                    <div class="h-px bg-slate-200 flex-1"></div>
                    <span class="text-[14px] lg:text-sm text-slate-400 whitespace-nowrap">
                        or register with email
                    </span>
                    <div class="h-px bg-slate-200 flex-1"></div>
                </div>

                <form method="POST" action="/driftly/public/register" id="registerForm" class="relative overflow-hidden">

                    <!-- STEP 1 -->
                    <div class="register-step step-active" data-step="1">

                        <div class="space-y-6 lg:space-y-5">

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-2">
                                    Full name
                                </label>

                                <input type="text" name="name"
                                    class="w-full h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white px-5 text-[18px] lg:text-[16px] outline-none focus:border-[#06B6D4] focus:ring-4 focus:ring-[#06B6D4]/10 transition"
                                    required>
                            </div>

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-2">
                                    Email
                                </label>

                                <input type="email" name="email"
                                    class="w-full h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white px-5 text-[18px] lg:text-[16px] outline-none focus:border-[#06B6D4] focus:ring-4 focus:ring-[#06B6D4]/10 transition"
                                    required>
                            </div>

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-2">
                                    Password
                                </label>

                                <div class="relative">
                                    <input type="password" name="password" id="registerPassword"
                                        class="w-full h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white px-5 pr-14 text-[18px] lg:text-[16px] outline-none focus:border-[#06B6D4] focus:ring-4 focus:ring-[#06B6D4]/10 transition"
                                        required>

                                    <button type="button" data-toggle-password="registerPassword"
                                        class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-[#06B6D4] transition">
                                        <i data-lucide="eye" class="w-6 h-6 lg:w-5 lg:h-5"></i>
                                    </button>
                                </div>

                                <div class="mt-4">
                                    <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
                                        <div id="passwordStrengthBar"
                                            class="h-full w-0 rounded-full transition-all duration-300"></div>
                                    </div>

                                    <div id="passwordStrengthText" class="text-[14px] text-slate-400 mt-2">
                                        Password strength
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <!-- STEP 2 -->
                    <div class="register-step step-hidden" data-step="2">

                        <div class="space-y-6 lg:space-y-5">

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-2">
                                    Gender
                                </label>

                                <select name="gender"
                                    class="w-full h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white px-5 text-[18px] lg:text-[16px] outline-none focus:border-[#06B6D4] focus:ring-4 focus:ring-[#06B6D4]/10 transition"
                                    required>
                                    <option value="">Select gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-2">
                                    Date of birth
                                </label>

                                <input type="date" name="date_of_birth"
                                    class="w-full h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white px-5 text-[18px] lg:text-[16px] outline-none focus:border-[#06B6D4] focus:ring-4 focus:ring-[#06B6D4]/10 transition"
                                    required>
                            </div>

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-3">
                                    I want to join as
                                </label>

                                <div class="grid grid-cols-1 min-[390px]:grid-cols-2 gap-3">

                                    <label class="role-card">
                                        <input type="radio" name="role" value="passenger" class="hidden" checked>
                                        <i data-lucide="user" class="w-6 h-6"></i>
                                        <span>Passenger</span>
                                    </label>

                                    <label class="role-card">
                                        <input type="radio" name="role" value="driver" class="hidden">
                                        <i data-lucide="car-front" class="w-6 h-6"></i>
                                        <span>Driver</span>
                                    </label>

                                </div>
                            </div>

                        </div>

                    </div>

                    <!-- STEP 3 -->
                    <div class="register-step step-hidden" data-step="3">

                        <div class="space-y-6 lg:space-y-5">

                            <div>
                                <label class="block text-[18px] sm:text-[16px] lg:text-[15px] font-semibold text-slate-700 mb-2">
                                    Phone number
                                </label>

                                <input type="text" name="phone" placeholder="+1 555 123 456"
                                    class="w-full h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white px-5 text-[18px] lg:text-[16px] outline-none focus:border-[#06B6D4] focus:ring-4 focus:ring-[#06B6D4]/10 transition">
                            </div>

                            <label class="flex gap-3 items-start text-[18px] sm:text-[16px] lg:text-[15px] leading-7 text-slate-500">
                                <input type="checkbox" name="terms" value="1" class="mt-1.5" required>

                                <span>
                                    I agree to the
                                    <a href="#" class="text-[#06B6D4] font-semibold">Terms</a>
                                    and
                                    <a href="#" class="text-[#06B6D4] font-semibold">Privacy Policy</a>.
                                </span>
                            </label>

                            <div class="bg-[#06B6D4]/10 border border-[#06B6D4]/20 rounded-2xl p-5 text-[18px] sm:text-[16px] lg:text-[15px] leading-7 text-slate-600">
                                Driver accounts require verification before publishing rides.
                            </div>

                        </div>

                    </div>

                    <!-- ACTIONS -->
                    <div class="flex flex-col min-[390px]:flex-row items-center gap-3 mt-9">

                        <button type="button" id="prevRegisterStep"
                            class="hidden w-full min-[390px]:flex-1 h-[50px] sm:h-[60px] lg:h-14 rounded-2xl border border-slate-200 bg-white text-slate-700 text-[17px] lg:text-[15px] font-semibold hover:bg-slate-50 transition">
                            Back
                        </button>

                        <button type="button" id="nextRegisterStep"
                            class="w-full min-[390px]:flex-1 h-[50px] sm:h-[60px] lg:h-14 rounded-2xl bg-[#0F172A] lg:bg-gradient-to-r lg:from-[#3B82F6] lg:to-[#06B6D4] text-white text-[17px] lg:text-[15px] font-semibold shadow-none lg:shadow-lg hover:opacity-95 transition">
                            Continue
                        </button>

                        <button type="submit" id="submitRegister"
                            class="hidden w-full min-[390px]:flex-1 h-[50px] sm:h-[60px] lg:h-14 rounded-2xl bg-[#0F172A] lg:bg-gradient-to-r lg:from-[#3B82F6] lg:to-[#06B6D4] text-white text-[17px] lg:text-[15px] font-semibold shadow-none lg:shadow-lg hover:opacity-95 transition">
                            Create account
                        </button>

                    </div>

                </form>

                <div class="mt-4 sm:mt-9 text-center text-slate-500 text-[15px] sm:text-[16px] lg:text-[15px]">
                    Already have an account?
                    <a href="/driftly/public/login" class="font-semibold text-[#06B6D4]">
                        Login
                    </a>
                </div>

            </div>

        </div>

    </div>

</section>