CTA Composer

import { ArrowUp, Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CtaComposerProps {
  title?: string;
  description?: string;
  placeholder?: string;
  action?: string;
  buttonLabel?: string;
  suggestions?: string[];
  note?: string;
  className?: string;
}

/** Closing CTA shaped like a chat composer: headline, a real form whose input asks the first question, prompt suggestion chips, glow underneath. */
export function CtaComposer({
  title = "What will you ask first?",
  description = "Type a question — Nova answers it the moment your workspace is ready.",
  placeholder = "Ask Nova to summarize last week's decisions…",
  action = "#start",
  buttonLabel = "Start with this question",
  suggestions = ["Draft the release notes", "Who owns the pricing page?", "Summarize #design-crit"],
  note = "Free forever for individuals. No credit card.",
  className,
}: CtaComposerProps) {
  return (
    <section className={cn("relative isolate overflow-hidden da-section", className)}>
      <div aria-hidden className="absolute inset-x-0 bottom-0 -z-10 h-full bg-(image:--nocturne-glow)" />
      <div className="da-container flex flex-col items-center text-center">
        <h2 className="font-da-display text-3xl font-semibold tracking-da-display text-balance sm:text-5xl">{title}</h2>
        <p className="mt-4 max-w-lg text-da-muted-fg">{description}</p>

        <form action={action} className="da-stroke mt-10 w-full max-w-2xl rounded-da-lg bg-da-surface p-3 text-left shadow-da-lg">
          <label htmlFor="cta-composer-q" className="sr-only">
            Your first question
          </label>
          <textarea
            id="cta-composer-q"
            name="q"
            rows={2}
            placeholder={placeholder}
            className="block w-full resize-none bg-transparent px-2 pt-1 text-[15px] leading-relaxed text-da-fg outline-none placeholder:text-da-muted-fg"
          />
          <div className="mt-2 flex items-center justify-end gap-2">
            <span aria-hidden className="grid size-8 place-items-center rounded-full text-da-muted-fg">
              <Plus className="size-4" />
            </span>
            <button
              type="submit"
              aria-label={buttonLabel}
              className="da-focus da-transition grid size-9 place-items-center rounded-full bg-da-fg text-da-bg hover:scale-105 motion-reduce:hover:scale-100"
            >
              <ArrowUp aria-hidden className="size-4" />
            </button>
          </div>
        </form>

        <ul className="mt-5 flex flex-wrap justify-center gap-2">
          {suggestions.map((s) => (
            <li key={s}>
              <a
                href={`${action}?q=${encodeURIComponent(s)}`}
                className="da-focus da-transition da-stroke block rounded-da-pill bg-da-bg/60 px-3.5 py-1.5 text-sm text-da-muted-fg hover:border-da-border-strong hover:text-da-fg"
              >
                {s}
              </a>
            </li>
          ))}
        </ul>
        <p className="mt-6 text-xs text-da-muted-fg">{note}</p>
      </div>
    </section>
  );
}

export default CtaComposer;