Cta Waitlist

"use client";

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

export interface CtaWaitlistProps {
  title?: string;
  description?: string;
  buttonLabel?: string;
  onSubmit?: (email: string) => void | Promise<void>;
  perks?: string[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** Frosted CTA panel with a gradient ring glow, email pill form (success state) and three perks with checks. */
export function CtaWaitlist({
  title = "Get your first recap in 5 minutes",
  description = "Connect your calendar, and Halo joins your next call. Free for your first 10 meetings.",
  buttonLabel = "Get started",
  onSubmit,
  perks = ["No credit card", "Works with Zoom, Meet, Teams", "Cancel any time"],
  className,
}: CtaWaitlistProps) {
  const id = useId();
  const [done, setDone] = useState(false);

  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await onSubmit?.(String(new FormData(e.currentTarget).get("email")));
    setDone(true);
  };

  return (
    <section className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="relative mx-auto max-w-3xl">
          <div
            aria-hidden
            className="absolute -inset-1 rounded-[calc(var(--da-radius-lg)+4px)] bg-gradient-to-r from-da-primary via-da-accent to-da-primary opacity-40 blur-xl"
          />
          <div className={cn("relative rounded-da-lg px-6 py-12 text-center shadow-da-lg sm:px-12", GLASS)}>
            <h2 className="font-da-display text-[clamp(1.75rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">{title}</h2>
            <p className="mx-auto mt-4 max-w-lg text-lg text-da-muted-fg">{description}</p>
            {done ? (
              <p role="status" className="mt-8 inline-flex items-center gap-2 rounded-da-pill bg-da-success px-5 py-3 font-semibold text-da-success-fg">
                <Check aria-hidden className="size-4" /> Check your inbox to connect your calendar.
              </p>
            ) : (
              <form onSubmit={submit} className="mx-auto mt-8 flex max-w-md flex-col gap-2 sm:flex-row">
                <label htmlFor={id} className="sr-only">
                  Work email
                </label>
                <input
                  id={id}
                  name="email"
                  type="email"
                  required
                  autoComplete="email"
                  placeholder="you@company.com"
                  className="da-focus da-stroke h-12 min-w-0 sm:flex-1 rounded-da-pill bg-da-input px-5 placeholder:text-da-muted-fg"
                />
                <button
                  type="submit"
                  className="da-focus da-transition h-12 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-6 font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5"
                >
                  {buttonLabel}
                </button>
              </form>
            )}
            <ul className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-da-muted-fg">
              {perks.map((p) => (
                <li key={p} className="inline-flex items-center gap-1.5">
                  <Check aria-hidden className="size-4 text-da-success" />
                  {p}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaWaitlist;