Cta Trust

import { ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CtaTrustProps {
  title?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  logos?: string[];
  assurances?: string[];
  className?: string;
}

/** Centered CTA inside a bordered panel: headline, two buttons, a line of compliance assurances with shield icons, and a strip of customer wordmarks below a hairline. */
export function CtaTrust({
  title = "Join 4,000+ finance teams on Ledgerly",
  description = "Get paid faster, close sooner and give your auditors everything they need.",
  primary = { label: "Start free trial", href: "#trial" },
  secondary = { label: "Book a demo", href: "#demo" },
  logos = ["Northwind", "Lumen Health", "Parcel", "Brightline", "Kestrel"],
  assurances = ["SOC 2 Type II", "99.99% uptime", "Cancel anytime"],
  className,
}: CtaTrustProps) {
  return (
    <section aria-labelledby="nc-trust-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke rounded-da-lg bg-da-surface px-6 py-14 text-center text-da-surface-fg shadow-da-md sm:px-12">
          <h2
            id="nc-trust-title"
            className="mx-auto max-w-2xl font-da-display text-[clamp(1.75rem,4vw,2.75rem)] leading-tight font-extrabold tracking-da-display text-balance"
          >
            {title}
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-lg text-da-muted-fg">{description}</p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <a
              href={primary.href}
              className="da-focus da-transition inline-flex h-11 items-center rounded-da-md bg-da-primary px-5 font-semibold text-da-primary-fg hover:bg-da-primary/90"
            >
              {primary.label}
            </a>
            <a
              href={secondary.href}
              className="da-focus da-stroke da-transition inline-flex h-11 items-center rounded-da-md bg-da-surface px-5 font-semibold hover:border-da-border-strong hover:bg-da-surface-2"
            >
              {secondary.label}
            </a>
          </div>
          <ul className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-da-muted-fg">
            {assurances.map((a) => (
              <li key={a} className="flex items-center gap-1.5">
                <ShieldCheck aria-hidden className="size-4 text-da-success" />
                {a}
              </li>
            ))}
          </ul>
          <ul aria-label="Customers" className="mt-10 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 border-t border-da-border pt-8">
            {logos.map((l) => (
              <li key={l} className="font-da-display text-lg font-extrabold tracking-da-display text-da-muted-fg">
                {l}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

export default CtaTrust;