import type { Metadata } from "next";
import { CheckCircle2, Mail, ShieldCheck, Clock } from "lucide-react";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";

export const metadata: Metadata = { title: "Application submitted" };

export default function JoinSubmittedPage() {
  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto w-full max-w-2xl">
          <div className="flex flex-col items-center text-center">
            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[var(--color-mist)]">
              <CheckCircle2
                className="h-8 w-8 text-[var(--color-blue)]"
                aria-hidden="true"
              />
            </div>
            <div className="mt-6 inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Thank you
            </div>
            <h1 className="mt-4 font-display text-[36px] md:text-[48px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
              Application submitted.
            </h1>
            <p className="mt-4 max-w-xl text-[17px] leading-relaxed text-[var(--color-slate)]">
              Thanks for applying to OrthoGlobe. Your application is now in the
              reviewer queue — here&apos;s what happens next.
            </p>
          </div>

          <ol className="mt-10 space-y-5">
            <li className="flex gap-4 rounded-2xl border border-[var(--color-line)] bg-white p-5">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-mist)] text-sm font-bold text-[var(--color-blue)]">
                1
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <Mail
                    className="h-4 w-4 text-[var(--color-blue)]"
                    aria-hidden="true"
                  />
                  <h2 className="font-display text-[16px] font-bold text-[var(--color-ink)]">
                    We&apos;ve notified the reviewers
                  </h2>
                </div>
                <p className="mt-1 text-sm text-[var(--color-slate)]">
                  Both OrthoGlobe leads received your application and can act
                  on it independently.
                </p>
              </div>
            </li>
            <li className="flex gap-4 rounded-2xl border border-[var(--color-line)] bg-white p-5">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-mist)] text-sm font-bold text-[var(--color-blue)]">
                2
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <Clock
                    className="h-4 w-4 text-[var(--color-blue)]"
                    aria-hidden="true"
                  />
                  <h2 className="font-display text-[16px] font-bold text-[var(--color-ink)]">
                    Decision within 72 hours
                  </h2>
                </div>
                <p className="mt-1 text-sm text-[var(--color-slate)]">
                  Our target turnaround is three days. You&apos;ll get an email
                  with the outcome — watch your inbox (and spam folder).
                </p>
              </div>
            </li>
            <li className="flex gap-4 rounded-2xl border border-[var(--color-line)] bg-white p-5">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-mist)] text-sm font-bold text-[var(--color-blue)]">
                3
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <ShieldCheck
                    className="h-4 w-4 text-[var(--color-blue)]"
                    aria-hidden="true"
                  />
                  <h2 className="font-display text-[16px] font-bold text-[var(--color-ink)]">
                    Sign in once approved
                  </h2>
                </div>
                <p className="mt-1 text-sm text-[var(--color-slate)]">
                  When a reviewer approves you, the same email and password you
                  provided unlock the full OrthoGlobe collaborative.
                </p>
              </div>
            </li>
          </ol>

          <div className="mt-10 flex justify-center">
            <Button href="/">Back to OrthoGlobe</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}
