Hero Signup

"use client";

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

export interface HeroSignupProps {
  title?: string;
  highlight?: string;
  description?: string;
  checklist?: string[];
  buttonLabel?: string;
  finePrint?: string;
  onSubmit?: (email: string) => void | Promise<void>;
  steps?: { title: string; detail: string }[];
  className?: string;
}

const STEP_TONES = ["bg-da-primary text-da-primary-fg", "bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg"];

export function HeroSignup({
  title = "Your first changelog in",
  highlight = "5 minutes",
  description = "Enter your work email, connect a repo, merge a PR. That's the whole onboarding.",
  checklist = ["Free forever for one project", "GitHub, GitLab & Bitbucket", "No credit card"],
  buttonLabel = "Create my changelog",
  finePrint = "By signing up you agree to the Terms and Privacy Policy.",
  onSubmit,
  steps = [
    { title: "Connect", detail: "Install the GitHub app on acme/web" },
    { title: "Label", detail: "Tag PRs with feature, fix or improvement" },
    { title: "Ship", detail: "Publish to changelog, widget and Slack" },
  ],
  className,
}: HeroSignupProps) {
  const inputId = useId();
  const [state, setState] = useState<"idle" | "pending" | "done">("idle");

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const email = new FormData(e.currentTarget).get("email");
    if (typeof email !== "string") return;
    setState("pending");
    await onSubmit?.(email);
    setState("done");
  }

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-12 lg:grid-cols-[1.2fr_1fr] lg:items-center">
        <div>
          <h1 className="font-da-display text-[clamp(2.5rem,6vw,4.75rem)] leading-[0.95] tracking-da-display uppercase">
            {title} <span className="bg-da-secondary px-2 text-da-secondary-fg [box-decoration-break:clone]">{highlight}</span>
          </h1>
          <p className="mt-6 max-w-lg text-lg text-da-muted-fg">{description}</p>

          {state === "done" ? (
            <p role="status" className="da-stroke mt-8 max-w-lg bg-da-success p-5 font-bold text-da-success-fg shadow-da-md">
              ✓ Check your inbox — your workspace is ready.
            </p>
          ) : (
            <form onSubmit={submit} className="da-stroke mt-8 flex max-w-lg flex-col bg-da-surface p-2 shadow-da-md sm:flex-row">
              <label htmlFor={inputId} className="sr-only">
                Work email
              </label>
              <input
                id={inputId}
                name="email"
                type="email"
                required
                autoComplete="email"
                placeholder="you@company.com"
                className="da-focus min-w-0 flex-1 bg-transparent px-3 py-3 text-lg text-da-surface-fg placeholder:text-da-muted-fg"
              />
              <button
                type="submit"
                disabled={state === "pending"}
                className="da-focus da-stroke bg-da-fg px-5 py-3 font-bold text-da-bg disabled:opacity-60"
              >
                {state === "pending" ? "Creating…" : buttonLabel}
              </button>
            </form>
          )}
          <ul className="mt-6 flex flex-wrap gap-x-6 gap-y-2">
            {checklist.map((c) => (
              <li key={c} className="flex items-center gap-2 text-sm font-bold">
                <span aria-hidden className="da-stroke grid size-5 place-items-center bg-da-success text-da-success-fg">
                  <Check className="size-3" strokeWidth={4} />
                </span>
                {c}
              </li>
            ))}
          </ul>
          <p className="mt-4 font-da-mono text-[11px] text-da-muted-fg">{finePrint}</p>
        </div>

        <ol className="relative flex flex-col gap-5">
          {steps.map((s, i) => (
            <li
              key={s.title}
              className={cn("da-stroke flex items-center gap-5 p-5 shadow-da-md", STEP_TONES[i % STEP_TONES.length], i === 1 && "lg:ml-10", i === 2 && "lg:ml-20")}
            >
              <span className="font-da-display text-5xl leading-none">{i + 1}</span>
              <span>
                <span className="block font-da-display text-xl tracking-da-display uppercase">{s.title}</span>
                <span className="text-sm font-medium opacity-85">{s.detail}</span>
              </span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

export default HeroSignup;