Auth Split

"use client";

import { useState, type FormEvent } from "react";
import { cn } from "@/lib/utils";

export interface AuthSplitProps {
  brand?: string;
  brandHref?: string;
  quote?: { text: string; name: string };
  onSubmit?: (data: { name: string; email: string; company: string }) => void;
  className?: string;
}

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Split sign-up: form on cream (name, email, company, team-size pills) and an arch-topped landscape illustration panel with sun and hills plus a quote card (hidden below lg). */
export function AuthSplit({
  brand = "Grove",
  brandHref = "/",
  quote = { text: "Our first footprint took an afternoon, not a quarter.", name: "Tomás · Casa Verde Foods" },
  onSubmit,
  className,
}: AuthSplitProps) {
  const [size, setSize] = useState("11–50");
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    onSubmit?.({ name: String(f.get("name")), email: String(f.get("email")), company: String(f.get("company")) });
  };
  const field = "da-transition h-12 w-full rounded-da-md bg-da-surface-2 px-4 font-normal outline-none focus:bg-da-surface focus:ring-3 focus:ring-da-ring";
  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-14">
        <a href={brandHref} className="da-focus inline-flex w-fit items-center gap-2.5 rounded-da-pill font-da-display text-2xl">
          <GroveMark />
          {brand}
        </a>
        <div className="mx-auto my-auto w-full max-w-md py-10">
          <h1 className="font-da-display text-4xl leading-tight">
            Start growing <em className="text-da-primary">lighter</em>
          </h1>
          <p className="mt-2 text-da-muted-fg">Free for 30 days. No card, no consultant.</p>
          <form onSubmit={submit} className="mt-8 grid gap-4">
            <label className="grid gap-2 font-medium">
              Your name
              <input name="name" required autoComplete="name" className={field} />
            </label>
            <label className="grid gap-2 font-medium">
              Work email
              <input name="email" type="email" required autoComplete="email" className={field} />
            </label>
            <label className="grid gap-2 font-medium">
              Company
              <input name="company" required autoComplete="organization" className={field} />
            </label>
            <fieldset>
              <legend className="mb-2 font-medium">Team size</legend>
              <div className="flex flex-wrap gap-2">
                {["1–10", "11–50", "51–200", "200+"].map((s) => (
                  <label
                    key={s}
                    className={cn(
                      "da-transition cursor-pointer rounded-da-pill px-4 py-2 has-focus-visible:ring-3 has-focus-visible:ring-da-ring",
                      s === size ? "bg-da-primary text-da-primary-fg" : "bg-da-surface-2 hover:bg-da-muted",
                    )}
                  >
                    <input type="radio" name="size" value={s} checked={s === size} onChange={() => setSize(s)} className="sr-only" />
                    {s}
                  </label>
                ))}
              </div>
            </fieldset>
            <button
              type="submit"
              className="da-focus da-transition mt-3 h-12 rounded-da-pill bg-da-primary font-medium text-da-primary-fg hover:bg-da-primary/90"
            >
              Create my account
            </button>
          </form>
          <p className="mt-6 text-sm text-da-muted-fg">
            Already growing?{" "}
            <a href="#signin" className="da-focus rounded-da-sm font-medium text-da-primary underline underline-offset-4">
              Sign in
            </a>
          </p>
        </div>
      </div>
      <aside className="relative hidden p-6 lg:block">
        <div className="relative size-full overflow-hidden rounded-t-full rounded-b-da-lg bg-da-accent">
          <svg aria-hidden viewBox="0 0 400 600" preserveAspectRatio="xMidYMax slice" className="absolute inset-0 size-full">
            <circle cx="290" cy="200" r="54" fill="var(--da-secondary)" />
            <path d="M0 380c80-50 160-40 240-6s120 30 160 6v220H0Z" fill="color-mix(in oklab, var(--da-primary) 35%, var(--da-accent))" />
            <path d="M0 450c90-40 170-32 250 0s110 24 150 6v144H0Z" fill="color-mix(in oklab, var(--da-primary) 65%, var(--da-accent))" />
            <path d="M0 520c100-30 200-26 280 0 50 16 90 12 120 0v80H0Z" fill="var(--da-primary)" />
          </svg>
          <figure className="absolute inset-x-10 bottom-10 rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-md">
            <blockquote className="font-da-display text-xl italic">“{quote.text}”</blockquote>
            <figcaption className="mt-3 text-sm text-da-muted-fg">{quote.name}</figcaption>
          </figure>
        </div>
      </aside>
    </main>
  );
}

export default AuthSplit;