CTA Banner

"use client";

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

export interface CtaBannerProps {
  title?: string;
  description?: string;
  placeholder?: string;
  buttonLabel?: string;
  finePrint?: string;
  successMessage?: string;
  /** Called with the submitted email. Return a promise to show a pending state. */
  onSubmit?: (email: string) => void | Promise<void>;
  className?: string;
}

export function CtaBanner({
  title = "Your next release deserves an audience.",
  description = "Connect a repo, merge a PR, watch your changelog write itself. Free forever for one project.",
  placeholder = "you@company.com",
  buttonLabel = "Get started",
  finePrint = "No credit card. Cancel anytime. SOC 2 Type II.",
  successMessage = "Check your inbox — your workspace is ready.",
  onSubmit,
  className,
}: CtaBannerProps) {
  const inputId = useId();
  const statusId = useId();
  const [status, setStatus] = useState<"idle" | "pending" | "done">("idle");

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const email = new FormData(e.currentTarget).get("email");
    if (typeof email !== "string") return;
    setStatus("pending");
    await onSubmit?.(email);
    setStatus("done");
  }

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke relative overflow-hidden bg-da-primary p-8 text-da-primary-fg shadow-da-lg sm:p-12 lg:p-16">
          {/* Decorative ruled pattern in the corner */}
          <div
            aria-hidden
            className="absolute -top-10 -right-10 size-56 rotate-12 opacity-20 [background-image:repeating-linear-gradient(0deg,currentColor_0_3px,transparent_3px_18px)]"
          />
          <div className="relative grid gap-10 lg:grid-cols-[1.5fr_1fr] lg:items-end">
            <div>
              <h2 className="font-da-display text-[clamp(2.25rem,5vw,4rem)] leading-[0.92] tracking-da-display uppercase">{title}</h2>
              <p className="mt-5 max-w-xl text-lg font-medium">{description}</p>
            </div>
            <div>
              {status === "done" ? (
                <p role="status" className="da-stroke bg-da-surface p-5 font-bold text-da-surface-fg">
                  ✓ {successMessage}
                </p>
              ) : (
                <form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:flex-row" aria-describedby={statusId}>
                  <label htmlFor={inputId} className="sr-only">
                    Work email
                  </label>
                  <input
                    id={inputId}
                    name="email"
                    type="email"
                    required
                    autoComplete="email"
                    placeholder={placeholder}
                    className="da-focus da-stroke min-w-0 sm:flex-1 bg-da-input px-4 py-3.5 text-base text-da-fg placeholder:text-da-muted-fg"
                  />
                  <button
                    type="submit"
                    disabled={status === "pending"}
                    className="da-focus da-transition da-stroke inline-flex items-center justify-center gap-2 bg-da-fg px-6 py-3.5 font-bold text-da-bg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none disabled:opacity-60"
                  >
                    {status === "pending" ? "Sending…" : buttonLabel}
                    <ArrowRight aria-hidden className="size-5" />
                  </button>
                </form>
              )}
              <p id={statusId} className="mt-3 font-da-mono text-xs font-bold tracking-da-label uppercase">
                {finePrint}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaBanner;