Cta Journal

"use client";

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

export interface CtaJournalProps {
  title?: string;
  description?: string;
  onSubscribe?: (email: string) => void;
  issues?: { no: string; title: string }[];
  className?: string;
}

/** Newsletter CTA styled like a paper journal: clay-tinted card with serif title, recent issue list with mono numbers, and a rounded email + button form with a warm thank-you state. */
export function CtaJournal({
  title = "The Grove Journal",
  description = "One calm letter a month about climate work that actually happens inside companies. No doom, no spam.",
  onSubscribe,
  issues = [
    { no: "nº 12", title: "The quiet climate work" },
    { no: "nº 11", title: "Why scope 3 is a people problem" },
    { no: "nº 10", title: "Trains, not planes: a field guide" },
  ],
  className,
}: CtaJournalProps) {
  const id = useId();
  const [done, setDone] = useState(false);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubscribe?.(String(new FormData(e.currentTarget).get("email")));
    setDone(true);
  };
  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="grid gap-10 rounded-da-lg bg-da-secondary p-8 text-da-secondary-fg sm:p-12 lg:grid-cols-2">
          <div>
            <h2 id={`${id}-t`} className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-none tracking-da-display italic">
              {title}
            </h2>
            <p className="mt-5 max-w-md text-lg opacity-90">{description}</p>
            {done ? (
              <p role="status" className="mt-8 font-da-display text-2xl">
                Thank you — see you next month. 🌱
              </p>
            ) : (
              <form onSubmit={submit} className="mt-8 flex max-w-md 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@company.com"
                  className="da-focus h-12 min-w-0 rounded-da-pill bg-da-surface px-5 text-da-surface-fg placeholder:text-da-muted-fg sm:flex-1"
                />
                <button
                  type="submit"
                  className="da-focus da-transition h-12 rounded-da-pill bg-da-secondary-fg px-6 font-medium text-da-secondary hover:opacity-90"
                >
                  Subscribe
                </button>
              </form>
            )}
          </div>
          <ol aria-label="Recent issues" className="self-end border-t border-current/25">
            {issues.map((i) => (
              <li key={i.no} className="flex items-baseline gap-5 border-b border-current/25 py-4">
                <span className="font-da-mono text-sm opacity-80">{i.no}</span>
                <span className="font-da-display text-xl">{i.title}</span>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

export default CtaJournal;