Hero Proof

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

export interface HeroProofProps {
  badge?: string;
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  stats?: { value: string; label: string }[];
  logos?: string[];
  className?: string;
}

/** Centered proof-first hero on a faint grid: announcement badge, headline, CTAs, a four-stat bordered strip and a customer wordmark row. */
export function HeroProof({
  badge = "Named a Leader in the 2026 AP Automation report",
  title = "The finance platform trusted by 12,000 companies",
  description = "From first invoice to IPO, Ledgerly gives finance teams real-time visibility into cash, spend and revenue.",
  primaryCta = { label: "Get started", href: "#signup" },
  secondaryCta = { label: "Talk to sales", href: "#sales" },
  stats = [
    { value: "$48B", label: "processed annually" },
    { value: "12,000+", label: "finance teams" },
    { value: "99.99%", label: "platform uptime" },
    { value: "4.8/5", label: "on G2 (1,900 reviews)" },
  ],
  logos = ["Northwind", "Lumen Health", "Parcel", "Quanta Labs", "Heliograph", "Oakridge"],
  className,
}: HeroProofProps) {
  return (
    <section className={cn("relative isolate overflow-hidden bg-da-bg pt-20 pb-16 text-da-fg sm:pt-28", className)}>
      <div
        aria-hidden
        className="absolute inset-0 -z-10 [background-image:linear-gradient(var(--da-border)_1px,transparent_1px),linear-gradient(90deg,var(--da-border)_1px,transparent_1px)] [background-size:64px_64px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_0%,black,transparent)]"
      />
      <div className="da-container text-center">
        <a
          href="#report"
          className="da-focus da-stroke inline-flex items-center gap-2 rounded-da-pill bg-da-surface px-3 py-1 text-sm font-medium shadow-da-sm hover:border-da-border-strong"
        >
          <span className="rounded-da-pill bg-da-primary px-2 py-0.5 text-xs font-semibold text-da-primary-fg">New</span>
          {badge}
        </a>
        <h1 className="mx-auto mt-6 max-w-3xl font-da-display text-[clamp(2.5rem,6vw,4.25rem)] leading-[1.04] font-extrabold tracking-da-display text-balance">
          {title}
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-pretty text-da-muted-fg">{description}</p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={primaryCta.href}
            className="da-focus da-transition inline-flex h-12 items-center rounded-da-md bg-da-primary px-6 font-semibold text-da-primary-fg shadow-da-sm hover:bg-da-primary/90"
          >
            {primaryCta.label}
          </a>
          <a
            href={secondaryCta.href}
            className="da-focus da-transition da-stroke inline-flex h-12 items-center rounded-da-md bg-da-surface px-6 font-semibold hover:border-da-border-strong"
          >
            {secondaryCta.label}
          </a>
        </div>
        <dl className="da-stroke mx-auto mt-14 grid max-w-4xl grid-cols-2 overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm md:grid-cols-4">
          {stats.map((s, i) => (
            <div
              key={s.label}
              className={cn(
                "flex flex-col p-5",
                i > 0 && "md:border-l md:border-da-border",
                i % 2 === 1 && "border-l border-da-border md:border-l",
                i > 1 && "border-t border-da-border md:border-t-0",
              )}
            >
              <dt className="order-2 text-sm text-da-muted-fg">{s.label}</dt>
              <dd className="font-da-display text-3xl font-extrabold tracking-da-display">{s.value}</dd>
            </div>
          ))}
        </dl>
        <ul className="mt-12 flex flex-wrap items-center justify-center gap-x-10 gap-y-4" aria-label="Customers">
          {logos.map((l) => (
            <li key={l} className="font-da-display text-lg font-bold text-da-muted-fg">
              {l}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default HeroProof;