import { RegisterForm } from "./register-form";

export default function RegisterPage({ searchParams }: { searchParams: { orgId?: string; token?: string } }) {
  return (
    <main className="grid min-h-screen bg-slate-100 px-6 py-10 text-slate-950 lg:grid-cols-[1fr_0.9fr]">
      <section className="mx-auto flex w-full max-w-xl flex-col justify-center">
        <p className="text-sm font-semibold uppercase tracking-wide text-brand-primary">WorkOnClock</p>
        <h1 className="mt-3 text-4xl font-semibold tracking-tight">{searchParams.token ? "Accept your invite" : "Create your workspace"}</h1>
        <p className="mt-4 text-base leading-7 text-slate-600">
          {searchParams.token
            ? "Join your organization and start tracking with the policy already configured by your admin."
            : "Set up your tenant, default team, project, admin account, and verification email in one step."}
        </p>
        <section className="mt-8 rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
          <RegisterForm orgId={searchParams.orgId} token={searchParams.token} />
        </section>
      </section>
      <aside className="hidden items-center justify-center lg:flex">
        <div className="w-full max-w-md rounded-lg bg-slate-950 p-8 text-white shadow-xl">
          <p className="text-sm font-semibold uppercase text-brand-tertiary">Launch checklist</p>
          <div className="mt-6 grid gap-4 text-sm text-slate-300">
            <p>Tenant-isolated workspace</p>
            <p>Default project and team setup</p>
            <p>Admin roles and permissions</p>
            <p>Email verification before first web sign-in</p>
            <p>Ready for desktop tracker rollout</p>
          </div>
        </div>
      </aside>
    </main>
  );
}