Cta Email

"use client";

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

export interface CtaEmailProps {
  title?: string;
  description?: string;
  onSubmit?: (email: string) => void;
  className?: string;
}

/** Underline-input signup: large headline, then an email field drawn as a single bottom rule with an inline “Get started →” button; confirmation replaces the form. */
export function CtaEmail({
  title = "Claim your frame.studio address.",
  description = "Pick a name, publish today. Upgrade when you need a custom domain.",
  onSubmit,
  className,
}: CtaEmailProps) {
  const id = useId();
  const [done, setDone] = useState<string | null>(null);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const email = String(new FormData(e.currentTarget).get("email"));
    onSubmit?.(email);
    setDone(email);
  };
  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container max-w-4xl">
        <h2 id={`${id}-t`} className="font-da-display text-[clamp(2.25rem,5vw,4rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <p className="mt-5 text-lg text-da-muted-fg">{description}</p>
        {done ? (
          <p role="status" className="mt-12 border-b border-da-border-strong pb-4 text-xl">
            Check {done} — your link is on its way.
          </p>
        ) : (
          <form onSubmit={submit} className="mt-12 flex flex-col gap-4 border-b border-da-border-strong focus-within:border-b-2 sm:flex-row sm:items-center">
            <label htmlFor={id} className="sr-only">
              Email
            </label>
            <input
              id={id}
              name="email"
              type="email"
              required
              autoComplete="email"
              placeholder="you@studio.com"
              className="h-16 min-w-0 bg-transparent text-2xl outline-none placeholder:text-da-muted-fg sm:flex-1"
            />
            <button
              type="submit"
              className="da-focus mb-3 h-11 shrink-0 rounded-da-sm bg-da-primary px-5 font-medium text-da-primary-fg hover:opacity-85 sm:mb-0"
            >
              Get started →
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

export default CtaEmail;