Cta Demo

"use client";

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

export interface CtaDemoProps {
  title?: string;
  description?: string;
  points?: string[];
  onSubmit?: (data: { email: string; company: string; size: string }) => void;
  className?: string;
}

/** Book-a-demo CTA: benefits list on the left, bordered form card (work email, company, team size select) on the right with an inline success state. */
export function CtaDemo({
  title = "See Ledgerly on your own numbers",
  description = "A 30-minute walkthrough with a finance specialist, tailored to your ERP and entities.",
  points = ["Live demo with your invoice volume", "Implementation plan and timeline", "ROI estimate for your team"],
  onSubmit,
  className,
}: CtaDemoProps) {
  const id = useId();
  const [done, setDone] = useState(false);
  const handle = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    onSubmit?.({ email: String(f.get("email")), company: String(f.get("company")), size: String(f.get("size")) });
    setDone(true);
  };
  const field = "da-focus da-stroke h-11 w-full rounded-da-md bg-da-surface px-3 text-da-surface-fg placeholder:text-da-muted-fg focus:border-da-primary";
  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container grid items-center gap-10 lg:grid-cols-2">
        <div>
          <h2 id={`${id}-t`} className="font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          <ul className="mt-6 space-y-3">
            {points.map((p) => (
              <li key={p} className="flex items-center gap-2.5 font-medium">
                <CheckCircle2 aria-hidden className="size-5 text-da-primary" />
                {p}
              </li>
            ))}
          </ul>
        </div>
        <div className="da-stroke rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-lg sm:p-8">
          {done ? (
            <div role="status" className="py-10 text-center">
              <CheckCircle2 aria-hidden className="mx-auto size-10 text-da-success" />
              <p className="mt-4 font-da-display text-xl font-bold">Request received</p>
              <p className="mt-1 text-da-muted-fg">A specialist will email you within one business day.</p>
            </div>
          ) : (
            <form onSubmit={handle} className="grid gap-4">
              <div>
                <label htmlFor={`${id}-e`} className="mb-1.5 block text-sm font-medium">
                  Work email
                </label>
                <input id={`${id}-e`} name="email" type="email" required autoComplete="email" placeholder="you@company.com" className={field} />
              </div>
              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label htmlFor={`${id}-c`} className="mb-1.5 block text-sm font-medium">
                    Company
                  </label>
                  <input id={`${id}-c`} name="company" required autoComplete="organization" placeholder="Northwind" className={field} />
                </div>
                <div>
                  <label htmlFor={`${id}-s`} className="mb-1.5 block text-sm font-medium">
                    Finance team size
                  </label>
                  <select id={`${id}-s`} name="size" defaultValue="2-10" className={field}>
                    <option value="1">Just me</option>
                    <option value="2-10">2–10</option>
                    <option value="11-50">11–50</option>
                    <option value="50+">50+</option>
                  </select>
                </div>
              </div>
              <button
                type="submit"
                className="da-focus da-transition mt-2 h-11 rounded-da-md bg-da-primary font-semibold text-da-primary-fg hover:bg-da-primary/90"
              >
                Book a demo
              </button>
              <p className="text-center text-xs text-da-muted-fg">By submitting you agree to our privacy policy.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

export default CtaDemo;