import type { Metadata } from "next";
import Link from "next/link";
import { ShieldCheck, Users, Clock, Globe2 } from "lucide-react";
import { Container } from "@/components/Container";
import { JoinForm } from "./JoinForm";

export const metadata: Metadata = {
  title: "Apply to join",
  description:
    "Apply to join the OrthoGlobe collaborative — a vetted international network of orthopaedic clinicians, researchers, and trainees.",
};

export default function JoinPage() {
  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto max-w-6xl">
          <div className="max-w-3xl">
            <div className="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)]">
              <ShieldCheck className="h-3 w-3" aria-hidden="true" />
              Vetted Membership
            </div>
            <h1 className="mt-4 font-display text-[36px] md:text-[52px] font-extrabold leading-[1.05] tracking-[-0.025em] text-[var(--color-ink)]">
              Apply to join OrthoGlobe.
            </h1>
            <p className="mt-5 max-w-2xl text-[17px] md:text-[19px] leading-relaxed text-[var(--color-slate)]">
              OrthoGlobe is a vetted network of orthopaedic clinicians,
              researchers, and trainees. Tell us a little about yourself and a
              reviewer will get back to you.
            </p>
          </div>

          <div className="mt-10 grid gap-10 md:mt-14 md:grid-cols-[minmax(0,1fr)_320px] md:gap-12 lg:gap-16">
            <div className="rounded-2xl border border-[var(--color-line)] bg-white p-6 shadow-sm md:p-8">
              <JoinForm />
            </div>

            <aside className="space-y-6">
              <div className="rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-6">
                <h2 className="font-display text-[18px] font-bold text-[var(--color-ink)]">
                  How vetting works
                </h2>
                <ul className="mt-4 space-y-4 text-sm text-[var(--color-slate)]">
                  <li className="flex gap-3">
                    <Users
                      className="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-blue)]"
                      aria-hidden="true"
                    />
                    <span>
                      Two OrthoGlobe leads review every application — either
                      approver can grant access.
                    </span>
                  </li>
                  <li className="flex gap-3">
                    <Clock
                      className="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-blue)]"
                      aria-hidden="true"
                    />
                    <span>
                      Target turnaround is 72 hours. You&apos;ll get an email
                      when a decision is made.
                    </span>
                  </li>
                  <li className="flex gap-3">
                    <Globe2
                      className="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-blue)]"
                      aria-hidden="true"
                    />
                    <span>
                      Approved members unlock the full collaborative — Atlas,
                      ConsentIQ, OrthoPrep, and Academy.
                    </span>
                  </li>
                </ul>
              </div>

              <div className="rounded-2xl border border-[var(--color-line)] p-6">
                <h2 className="font-display text-[18px] font-bold text-[var(--color-ink)]">
                  Already a member?
                </h2>
                <p className="mt-2 text-sm text-[var(--color-slate)]">
                  Sign in with your email and password.
                </p>
                <Link
                  href="/login"
                  className="mt-4 inline-flex text-sm font-semibold text-[var(--color-blue)] hover:underline"
                >
                  Sign in &rarr;
                </Link>
              </div>
            </aside>
          </div>
        </div>
      </Container>
    </section>
  );
}
