"use client";

import * as React from "react";
import { ArrowRight, Check, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

const AVATAR_COLORS = ["#8b5cf6", "#0ea5e9", "#f43f5e", "#22c55e", "#f59e0b"];

export function WaitlistHero({
  title = "Get early access",
  subtitle = "We're onboarding teams in small batches. Leave your email and we'll reach out.",
  count = 2417,
  onSubmit,
  className,
}: {
  title?: string;
  subtitle?: string;
  count?: number;
  onSubmit?: (email: string) => void;
  className?: string;
}) {
  const [email, setEmail] = React.useState("");
  const [state, setState] = React.useState<"idle" | "loading" | "done">("idle");
  const [error, setError] = React.useState("");

  function submit(event: React.FormEvent) {
    event.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError("That doesn't look like an email address");
      return;
    }
    setError("");
    setState("loading");
    setTimeout(() => {
      setState("done");
      onSubmit?.(email);
    }, 900);
  }

  return (
    <div className={cn("w-full rounded-2xl border bg-card px-6 py-16 text-center sm:px-12", className)}>
      <div className="mx-auto flex max-w-xl flex-col items-center gap-6">
        <h1 className="text-balance text-3xl font-semibold tracking-tight sm:text-5xl">{title}</h1>
        <p className="text-pretty text-muted-foreground">{subtitle}</p>

        {state === "done" ? (
          <div className="flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-600 dark:text-emerald-400">
            <Check className="size-4" />
            You're on the list. Check your inbox.
          </div>
        ) : (
          <form onSubmit={submit} className="w-full max-w-md space-y-2">
            <div className="flex flex-col gap-2 sm:flex-row">
              <input
                type="email"
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                placeholder="you@company.com"
                aria-invalid={Boolean(error)}
                className={cn(
                  "h-11 flex-1 rounded-lg border bg-background px-4 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40",
                  error && "border-destructive focus-visible:ring-destructive/30"
                )}
              />
              <button
                type="submit"
                disabled={state === "loading"}
                className="inline-flex h-11 items-center justify-center gap-2 rounded-lg bg-primary px-6 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-60"
              >
                {state === "loading" ? (
                  <Loader2 className="size-4 animate-spin" />
                ) : (
                  <>
                    Join
                    <ArrowRight className="size-4 rtl:rotate-180" />
                  </>
                )}
              </button>
            </div>
            {error && <p className="text-start text-xs text-destructive">{error}</p>}
          </form>
        )}

        <div className="flex items-center gap-3">
          <div className="flex -space-x-2 rtl:space-x-reverse">
            {AVATAR_COLORS.map((color, index) => (
              <span
                key={color}
                className="flex size-7 items-center justify-center rounded-full border-2 border-card text-[10px] font-medium text-white"
                style={{ background: color }}
              >
                {String.fromCharCode(65 + index)}
              </span>
            ))}
          </div>
          <span className="text-sm text-muted-foreground">
            {count.toLocaleString()} people ahead of you
          </span>
        </div>
      </div>
    </div>
  );
}
Related components
