Cta Stats

import { cn } from "@/lib/utils";

export interface CtaStatsProps {
  title?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  stats?: { value: string; label: string }[];
  className?: string;
}

/** Split CTA on a dark (fg-colored) panel: copy + buttons on the left, a 2×2 grid of large outcome stats divided by hairlines on the right. */
export function CtaStats({
  title = "Numbers your CFO will notice",
  description = "Average results across customers after their first 90 days on Ledgerly.",
  primary = { label: "Start free trial", href: "#trial" },
  secondary = { label: "Calculate your ROI", href: "#roi" },
  stats = [
    { value: "−21 days", label: "Days sales outstanding" },
    { value: "97%", label: "Payments auto-reconciled" },
    { value: "4 days", label: "Average month-end close" },
    { value: "6.8×", label: "First-year ROI" },
  ],
  className,
}: CtaStatsProps) {
  return (
    <section aria-labelledby="nc-ctastats-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="grid overflow-hidden rounded-da-lg bg-da-fg text-da-bg lg:grid-cols-2">
          <div className="p-8 sm:p-12">
            <h2
              id="nc-ctastats-title"
              className="font-da-display text-[clamp(1.75rem,4vw,2.75rem)] leading-tight font-extrabold tracking-da-display text-balance"
            >
              {title}
            </h2>
            <p className="mt-4 text-lg opacity-80">{description}</p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a
                href={primary.href}
                className="da-focus da-transition inline-flex h-11 items-center rounded-da-md bg-da-bg px-5 font-semibold text-da-fg hover:opacity-90"
              >
                {primary.label}
              </a>
              <a
                href={secondary.href}
                className="da-focus da-transition inline-flex h-11 items-center rounded-da-md border border-current/30 px-5 font-semibold hover:bg-da-bg/10"
              >
                {secondary.label}
              </a>
            </div>
          </div>
          <dl className="grid grid-cols-2 gap-px border-t border-current/15 bg-current/15 lg:border-t-0 lg:border-l">
            {stats.map((s) => (
              <div key={s.label} className="flex flex-col justify-center bg-da-fg p-6 sm:p-8">
                <dt className="order-2 mt-1 text-sm opacity-75">{s.label}</dt>
                <dd className="order-1 font-da-display text-[clamp(1.75rem,3.5vw,2.5rem)] font-extrabold tracking-da-display">{s.value}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

export default CtaStats;