<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>
                        Trusted ride sharing marketplace
                    </div>

                    <h1 class="text-5xl font-bold text-white leading-tight mb-6">
                        Travel smarter with
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#3B82F6] to-[#06B6D4]">
                            modern mobility.
                        </span>
                    </h1>

                    <p class="text-slate-300 text-lg leading-8">
                        Join thousands of riders and drivers using Driftly to connect cities and communities worldwide.
                    </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">
                        25K+
                    </div>

                    <div class="text-slate-400 text-sm">
                        Monthly rides
                    </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 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">
                        120+
                    </div>

                    <div class="text-slate-400 text-sm">
                        Cities connected
                    </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-md 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/<?= htmlspecialchars(setting('site_logo', '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">
                        Login
                    </h2>

                    <p class="text-slate-500 text-[16px] lg:text-base leading-8">
                        Continue to your Driftly account.
                    </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; ?>

                <!-- 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>

                <!-- DIVIDER -->
                <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">
                        or continue with email
                    </span>

                    <div class="h-px bg-slate-200 flex-1"></div>
                </div>

                <!-- FORM -->
                <form method="POST" action="/driftly/public/login" 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">
                            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>

                        <input type="password" name="password"
                            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>

                    <button type="submit"
                        class="w-full 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">
                        Login
                    </button>

                </form>

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

            </div>

        </div>

    </div>

</section>