Hero Waitlist

"use client";

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

export interface HeroWaitlistProps {
  badge?: string;
  title?: string;
  description?: string;
  placeholder?: string;
  buttonLabel?: string;
  onJoin?: (email: string) => void | Promise<void>;
  joined?: number;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const TONES = [
  "from-da-primary to-da-accent",
  "from-da-accent to-da-success",
  "from-da-danger to-da-primary",
  "from-da-warning to-da-danger",
  "from-da-success to-da-primary",
];

/** Minimal waitlist hero: big headline, pill email form with a gradient button, success state and a stack of avatars with the waitlist count. */
export function HeroWaitlist({
  badge = "Private beta · Halo for Slack huddles",
  title = "Your huddles, finally remembered.",
  description = "Halo quietly joins Slack huddles and posts a 5-line recap in the channel when you hang up. Join the beta — we’re letting teams in every Monday.",
  placeholder = "you@company.com",
  buttonLabel = "Join the waitlist",
  onJoin,
  joined = 3214,
  className,
}: HeroWaitlistProps) {
  const id = useId();
  const [state, setState] = useState<"idle" | "pending" | "done" | "error">("idle");

  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const email = String(new FormData(e.currentTarget).get("email"));
    setState("pending");
    try {
      await onJoin?.(email);
      setState("done");
    } catch {
      setState("error");
    }
  };

  return (
    <section className={cn("relative grid min-h-[640px] place-items-center overflow-hidden px-4 py-24 text-da-fg", className)}>
      <div aria-hidden className="absolute top-1/2 left-1/2 -z-0 size-[520px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-da-primary/25 blur-[120px]" />
      <div className="relative flex max-w-2xl flex-col items-center text-center">
        <p className={cn("rounded-da-pill px-3 py-1.5 text-sm font-medium shadow-da-sm", GLASS)}>{badge}</p>
        <h1 className="mt-6 font-da-display text-[clamp(2.5rem,7vw,4.5rem)] leading-[1.02] font-semibold tracking-da-display text-balance">{title}</h1>
        <p className="mt-5 max-w-lg text-lg text-pretty text-da-muted-fg">{description}</p>
        {state === "done" ? (
          <p role="status" className={cn("mt-10 inline-flex items-center gap-2 rounded-da-pill px-5 py-3 font-semibold shadow-da-md", GLASS)}>
            <span className="grid size-6 place-items-center rounded-full bg-da-success text-da-success-fg">
              <Check aria-hidden className="size-4" />
            </span>
            You’re on the list — see you Monday.
          </p>
        ) : (
          <form onSubmit={submit} className={cn("mt-10 flex w-full max-w-md items-center gap-1 rounded-da-pill p-1.5 shadow-da-md", GLASS)}>
            <label htmlFor={id} className="sr-only">
              Work email
            </label>
            <input
              id={id}
              name="email"
              type="email"
              required
              autoComplete="email"
              placeholder={placeholder}
              aria-invalid={state === "error"}
              className="da-focus h-11 min-w-0 flex-1 rounded-da-pill bg-transparent px-4 text-[15px] outline-none placeholder:text-da-muted-fg"
            />
            <button
              type="submit"
              disabled={state === "pending"}
              className="da-focus da-transition group inline-flex h-11 shrink-0 items-center gap-1.5 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-5 text-sm font-semibold text-da-primary-fg shadow-da-sm hover:shadow-da-md disabled:opacity-70"
            >
              <span className="max-sm:sr-only">{state === "pending" ? "Joining…" : buttonLabel}</span>
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </button>
          </form>
        )}
        {state === "error" && (
          <p role="alert" className="mt-3 text-sm text-da-danger">
            Something went wrong — please try again.
          </p>
        )}
        <div className="mt-8 flex items-center gap-3">
          <span aria-hidden className="flex -space-x-2">
            {TONES.map((t, i) => (
              <span key={i} className={cn("size-8 rounded-full bg-gradient-to-br ring-2 ring-da-bg", t)} />
            ))}
          </span>
          <p className="text-sm text-da-muted-fg">
            <span className="font-semibold text-da-fg">{joined.toLocaleString("en-US")}</span> teams already waiting
          </p>
        </div>
      </div>
    </section>
  );
}

export default HeroWaitlist;