Auth Split

"use client";

import { useId, useState, type FormEvent } from "react";
import { Check, CheckCircle2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthSplitProps {
  brand?: string;
  brandHref?: string;
  title?: string;
  subtitle?: string;
  benefits?: string[];
  quote?: { text: string; name: string; role: string };
  onSubmit?: (data: { name: string; email: string; company: string; password: string }) => void;
  signinHref?: string;
  className?: string;
}

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7 shrink-0", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Split sign-up page: form on the left (name, work email, company, password with live strength checklist), blue gradient panel on the right with benefits, a customer quote and compliance badges (panel hidden below lg). */
export function AuthSplit({
  brand = "Ledgerly",
  brandHref = "/",
  title = "Start your 14-day free trial",
  subtitle = "No credit card required. Cancel anytime.",
  benefits = ["Unlimited invoices during the trial", "Connect NetSuite, Xero or QuickBooks", "Free onboarding call with a specialist"],
  quote = { text: "We were sending invoices from Ledgerly the same afternoon we signed up.", name: "Marcus Bell", role: "Controller, Lumen Health" },
  onSubmit,
  signinHref = "#signin",
  className,
}: AuthSplitProps) {
  const id = useId();
  const [pw, setPw] = useState("");
  const [done, setDone] = useState(false);
  const rules = [
    { label: "8+ characters", ok: pw.length >= 8 },
    { label: "A number", ok: /\d/.test(pw) },
    { label: "An uppercase letter", ok: /[A-Z]/.test(pw) },
  ];
  const valid = rules.every((r) => r.ok);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!valid) return;
    const f = new FormData(e.currentTarget);
    onSubmit?.({ name: String(f.get("name")), email: String(f.get("email")), company: String(f.get("company")), password: pw });
    setDone(true);
  };
  const field =
    "da-stroke da-transition h-10 w-full rounded-da-md bg-da-surface px-3 text-sm shadow-da-sm outline-none focus:border-da-primary focus:ring-3 focus:ring-da-ring/25";
  return (
    <main className={cn("grid min-h-dvh bg-da-bg text-da-fg lg:grid-cols-2", className)}>
      <div className="flex flex-col px-6 py-8 sm:px-12">
        <a href={brandHref} className="da-focus flex w-fit items-center gap-2 rounded-da-sm font-da-display text-lg font-extrabold">
          <LedgerlyMark />
          {brand}
        </a>
        <div className="mx-auto my-auto w-full max-w-sm py-10">
          {done ? (
            <div role="status" className="text-center">
              <CheckCircle2 aria-hidden className="mx-auto size-12 text-da-success" />
              <h1 className="mt-4 font-da-display text-2xl font-extrabold">Check your inbox</h1>
              <p className="mt-2 text-da-muted-fg">We sent a verification link to finish setting up your workspace.</p>
            </div>
          ) : (
            <>
              <h1 className="font-da-display text-2xl font-extrabold tracking-da-display">{title}</h1>
              <p className="mt-1.5 text-sm text-da-muted-fg">{subtitle}</p>
              <form onSubmit={submit} className="mt-8 grid gap-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <label className="grid gap-1.5 text-sm font-medium">
                    Full name
                    <input name="name" required autoComplete="name" className={field} />
                  </label>
                  <label className="grid gap-1.5 text-sm font-medium">
                    Company
                    <input name="company" required autoComplete="organization" className={field} />
                  </label>
                </div>
                <label className="grid gap-1.5 text-sm font-medium">
                  Work email
                  <input name="email" type="email" required autoComplete="email" className={field} />
                </label>
                <div className="grid gap-1.5">
                  <label htmlFor={`${id}-p`} className="text-sm font-medium">
                    Password
                  </label>
                  <input
                    id={`${id}-p`}
                    type="password"
                    value={pw}
                    onChange={(e) => setPw(e.target.value)}
                    required
                    autoComplete="new-password"
                    aria-describedby={`${id}-r`}
                    className={field}
                  />
                  <ul id={`${id}-r`} className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs" aria-label="Password requirements">
                    {rules.map((r) => (
                      <li key={r.label} className={cn("flex items-center gap-1", r.ok ? "text-da-success" : "text-da-muted-fg")}>
                        <Check aria-hidden className={cn("size-3.5", !r.ok && "opacity-40")} strokeWidth={3} />
                        {r.label}
                        <span className="sr-only">{r.ok ? " (met)" : " (not met)"}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <button
                  type="submit"
                  aria-disabled={!valid}
                  className={cn(
                    "da-focus da-transition mt-2 h-10 rounded-da-md bg-da-primary text-sm font-semibold text-da-primary-fg hover:bg-da-primary/90",
                    !valid && "opacity-60",
                  )}
                >
                  Create account
                </button>
                <p className="text-xs text-da-muted-fg">By creating an account you agree to the Terms of Service and Privacy Policy.</p>
              </form>
              <p className="mt-8 text-sm text-da-muted-fg">
                Already have an account?{" "}
                <a href={signinHref} className="da-focus rounded-da-sm font-semibold text-da-primary hover:underline">
                  Sign in
                </a>
              </p>
            </>
          )}
        </div>
      </div>
      <aside className="relative hidden overflow-hidden bg-[linear-gradient(150deg,var(--da-primary),color-mix(in_oklab,var(--da-primary)_65%,var(--da-fg)))] p-12 text-da-primary-fg lg:flex lg:flex-col lg:justify-center">
        <div
          aria-hidden
          className="absolute inset-0 opacity-15 [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:44px_44px] [mask-image:radial-gradient(circle_at_80%_20%,black,transparent_70%)]"
        />
        <div className="relative max-w-md">
          <h2 className="font-da-display text-2xl font-extrabold">Everything you get on day one</h2>
          <ul className="mt-6 space-y-3">
            {benefits.map((b) => (
              <li key={b} className="flex items-center gap-3">
                <span aria-hidden className="grid size-6 place-items-center rounded-full bg-da-primary-fg/15">
                  <Check className="size-3.5" strokeWidth={3} />
                </span>
                {b}
              </li>
            ))}
          </ul>
          <figure className="mt-12 rounded-da-lg bg-da-primary-fg/10 p-6">
            <blockquote className="text-lg leading-snug font-medium">“{quote.text}”</blockquote>
            <figcaption className="mt-4 text-sm opacity-85">
              <span className="font-semibold">{quote.name}</span> · {quote.role}
            </figcaption>
          </figure>
          <p className="mt-8 text-xs font-semibold tracking-da-label uppercase opacity-80">SOC 2 Type II · ISO 27001 · GDPR</p>
        </div>
      </aside>
    </main>
  );
}

export default AuthSplit;