---
import Layout from "../layouts/Layout.astro";
import { Check } from "lucide-react";
---

<Layout title="Request Received - Move. Compete. Play.">
    <div class="min-h-screen bg-slate-950 flex items-center justify-center p-4">
        <div
            class="max-w-md w-full bg-slate-900 border border-white/10 rounded-2xl p-8 md:p-12 text-center shadow-2xl relative overflow-hidden"
        >
            {/* Background decoration */}
            <div
                class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-[80px] -z-10"
            >
            </div>
            <div
                class="absolute bottom-0 left-0 w-48 h-48 bg-amber-500/5 rounded-full blur-[60px] -z-10"
            >
            </div>

            <div
                class="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6 border border-emerald-500/20"
            >
                <Check class="text-emerald-500" size={32} />
            </div>

            <h1 class="text-3xl font-bold font-heading text-white mb-4">
                You're in the Queue.
            </h1>

            <div class="space-y-4 text-slate-400 text-sm leading-relaxed mb-8">
                <p>
                    We've received your request for a locker. Our team reviews
                    every application manually to ensure the quality of the
                    community.
                </p>
                <p>
                    Keep an eye on your inbox. If you have the code, you'll get
                    the keys.
                </p>
            </div>

            <a
                href="/"
                class="inline-block w-full bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold py-4 rounded-xl transition-all hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-amber-500/20 cursor-pointer"
            >
                Return to Base
            </a>
        </div>
    </div>
</Layout>