Cta Newsletter

"use client";

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

export interface CtaNewsletterProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  placeholder?: string;
  buttonLabel?: string;
  successMessage?: string;
  finePrint?: string;
  /** Called with the email; return a promise to show a pending state. Throw to show an error. */
  onSubscribe?: (email: string) => void | Promise<void>;
  className?: string;
}

/** Centered email capture card with inline validation, pending, success and error states. */
export function CtaNewsletter({
  eyebrow = "The Pager Digest",
  title = "One email a month on running calmer on-call",
  description = "Postmortems we loved, rotation patterns that work and what we shipped. Read by 18,000 engineers.",
  placeholder = "you@company.com",
  buttonLabel = "Subscribe",
  successMessage = "You’re in. Check your inbox to confirm.",
  finePrint = "No spam. Unsubscribe in one click.",
  onSubscribe,
  className,
}: CtaNewsletterProps) {
  const id = useId();
  const [email, setEmail] = useState("");
  const [state, setState] = useState<"idle" | "pending" | "done" | "error">("idle");
  const [error, setError] = useState("");

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setState("error");
      setError("Enter a valid email address.");
      return;
    }
    setState("pending");
    try {
      await onSubscribe?.(email);
      setState("done");
    } catch {
      setState("error");
      setError("Something went wrong. Please try again.");
    }
  };

  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke relative mx-auto max-w-2xl overflow-hidden rounded-da-lg bg-da-surface px-6 py-12 text-center text-da-surface-fg shadow-da-md sm:px-12">
          <div aria-hidden className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-da-primary to-transparent" />
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 className="mt-3 text-2xl leading-tight font-semibold tracking-da-display text-balance sm:text-3xl">{title}</h2>
          <p className="mx-auto mt-3 max-w-md text-[15px] text-da-muted-fg">{description}</p>
          {state === "done" ? (
            <p role="status" className="mt-8 inline-flex items-center gap-2 rounded-da-pill bg-da-accent px-4 py-2 text-sm font-medium text-da-accent-fg">
              <Check aria-hidden className="size-4" /> {successMessage}
            </p>
          ) : (
            <form onSubmit={submit} noValidate className="mx-auto mt-8 flex max-w-md flex-col gap-2 sm:flex-row">
              <label htmlFor={`${id}-email`} className="sr-only">
                Email address
              </label>
              <input
                id={`${id}-email`}
                type="email"
                autoComplete="email"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value);
                  if (state === "error") setState("idle");
                }}
                placeholder={placeholder}
                aria-invalid={state === "error"}
                aria-describedby={`${id}-msg`}
                className="da-focus da-transition h-10 min-w-0 sm:flex-1 rounded-da-md border border-da-border bg-da-input px-3 text-sm placeholder:text-da-muted-fg hover:border-da-border-strong aria-invalid:border-da-danger"
              />
              <button
                type="submit"
                disabled={state === "pending"}
                className="da-focus da-transition group inline-flex h-10 items-center justify-center gap-1.5 rounded-da-md bg-da-fg px-4 text-sm font-medium text-da-bg hover:bg-da-fg/85 disabled:opacity-60"
              >
                {state === "pending" ? "Subscribing…" : buttonLabel}
                <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
              </button>
            </form>
          )}
          <p id={`${id}-msg`} aria-live="polite" className={cn("mt-3 text-[13px]", state === "error" ? "text-da-danger" : "text-da-muted-fg")}>
            {state === "error" ? error : state === "done" ? "" : finePrint}
          </p>
        </div>
      </div>
    </section>
  );
}

export default CtaNewsletter;