Cta Newsletter

"use client";

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

export interface CtaNewsletterProps {
  title?: string;
  description?: string;
  onSubscribe?: (email: string) => void | Promise<void>;
  className?: string;
}

/** Newsletter CTA on a mint block: envelope illustration made of shapes, headline, rounded input + button and a cheerful success message. */
export function CtaNewsletter({
  title = "One calm email a month",
  description = "Planning tips, new templates and what we shipped. No spam, unsubscribe any time.",
  onSubscribe,
  className,
}: CtaNewsletterProps) {
  const id = useId();
  const [done, setDone] = useState(false);
  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await onSubscribe?.(String(new FormData(e.currentTarget).get("email")));
    setDone(true);
  };
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto flex max-w-4xl flex-col items-center gap-8 rounded-[40px] bg-da-secondary p-8 text-da-secondary-fg sm:p-12 md:flex-row">
          <div aria-hidden className="relative h-28 w-36 shrink-0">
            <div className="absolute inset-0 rounded-da-md bg-da-surface" />
            <div className="absolute inset-x-0 top-0 h-16 [clip-path:polygon(0_0,100%_0,50%_100%)] bg-da-warning" />
            <span className="absolute -top-3 -right-3 grid size-9 place-items-center rounded-full bg-da-danger font-da-display text-sm font-extrabold text-da-danger-fg">
              1
            </span>
          </div>
          <div className="flex-1 text-center md:text-left">
            <h2 className="font-da-display text-3xl font-extrabold tracking-da-display">{title}</h2>
            <p className="mt-2 opacity-90">{description}</p>
            {done ? (
              <p role="status" className="mt-6 inline-block rounded-da-pill bg-da-surface px-5 py-3 font-semibold text-da-fg">
                You’re in! See you next month 💌
              </p>
            ) : (
              <form onSubmit={submit} className="mt-6 flex flex-col gap-2 sm:flex-row">
                <label htmlFor={id} className="sr-only">
                  Email
                </label>
                <input
                  id={id}
                  name="email"
                  type="email"
                  required
                  autoComplete="email"
                  placeholder="you@team.com"
                  className="da-focus h-12 min-w-0 sm:flex-1 rounded-da-pill bg-da-surface px-5 text-da-fg placeholder:text-da-muted-fg"
                />
                <button type="submit" className="da-focus da-transition h-12 rounded-da-pill bg-da-fg px-6 font-semibold text-da-bg hover:-translate-y-0.5">
                  Subscribe
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaNewsletter;