import { Card } from "@/app/shadcn_components/ui/card";
import { ShieldCheck } from "lucide-react";
import VerifyCodeForm from "./VerifyCodeForm";

export default async function VerifyCodePage({
  searchParams,
}: {
  searchParams: Promise<{ email?: string }>;
}) {
  const { email } = await searchParams;

  return (
    <div className="relative min-h-screen flex flex-col bg-gradient-to-b from-gray-50 to-white overflow-hidden">
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div className="absolute -top-24 -left-24 w-[28rem] h-[28rem] bg-brandblue/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-0 w-[30rem] h-[30rem] bg-midblue/10 rounded-full blur-3xl" />
      </div>

      <div className="relative bg-gradient-to-r from-brandblue to-midblue text-white py-16 px-8">
        <div className="max-w-5xl mx-auto text-center">
          <h1 className="text-4xl font-bold mb-4">Sign in to Ara</h1>
          <p className="text-white/90 text-lg max-w-xl mx-auto">
            Enter the 6-digit code we just emailed you to continue.
          </p>
        </div>
      </div>

      <div className="relative flex-1 flex items-center justify-center px-6">
        <div className="w-full max-w-md">
          <Card className="p-10 shadow-xl border border-gray-100 backdrop-blur-sm text-center space-y-6">
            <div className="flex justify-center">
              <div className="bg-brandblue/10 p-3 rounded-full">
                <ShieldCheck className="w-7 h-7 text-brandblue" />
              </div>
            </div>

            <h2 className="text-xl font-semibold text-brandblue">
              Enter your sign-in code
            </h2>

            <p className="text-sm text-gray-600 leading-relaxed">
              We sent a 6-digit code to{" "}
              <span className="font-medium text-brandblue">
                {email ?? "your email"}
              </span>
              . It expires in 10 minutes.
            </p>

            <VerifyCodeForm email={email ?? ""} />
          </Card>
        </div>
      </div>

      <div className="pb-10 text-center text-xs text-gray-400 space-y-1">
        <p>Secure authentication powered by Ara</p>
        <p>© {new Date().getFullYear()} Domna Homes</p>
      </div>
    </div>
  );
}
