Features Grid

import { ArrowRight, BellRing, Building2, FileText, Globe2, Landmark, Workflow, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesGridProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  items?: { icon: LucideIcon; title: string; text: string; href: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { icon: FileText, title: "Smart invoicing", text: "Branded invoices with line items, taxes and payment links in 40 currencies.", href: "#invoicing" },
  { icon: BellRing, title: "Automated dunning", text: "Polite, escalating reminders that cut overdue balances by 38% on average.", href: "#dunning" },
  { icon: Landmark, title: "Bank reconciliation", text: "Match every transfer to its invoice with 97% automatic accuracy.", href: "#recon" },
  { icon: Workflow, title: "Approval workflows", text: "Route bills by amount, entity or vendor with full audit trails.", href: "#approvals" },
  { icon: Building2, title: "Multi-entity", text: "Consolidate subsidiaries and intercompany in a single ledger.", href: "#entities" },
  { icon: Globe2, title: "Global payments", text: "Pay and get paid via ACH, SEPA, SWIFT and cards in 120 countries.", href: "#global" },
];

/** Classic 3×2 bordered feature grid sharing hairline borders (one outer frame), each cell with a blue icon square, title, text and a “Learn more” link. */
export function FeaturesGrid({
  eyebrow = "Platform",
  title = "Everything accounts receivable needs, in one place",
  description = "Replace five point tools and a dozen spreadsheets with one connected ledger.",
  items = DEFAULT_ITEMS,
  className,
}: FeaturesGridProps) {
  return (
    <section aria-labelledby="nc-grid-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h2 id="nc-grid-title" className="mt-3 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>
        </div>
        <ul className="da-stroke mt-12 grid gap-px overflow-hidden rounded-da-lg bg-da-border sm:grid-cols-2 lg:grid-cols-3">
          {items.map((it) => (
            <li key={it.title} className="group bg-da-surface p-7 text-da-surface-fg">
              <span className="grid size-10 place-items-center rounded-da-md bg-da-accent text-da-accent-fg">
                <it.icon aria-hidden className="size-5" />
              </span>
              <h3 className="mt-5 font-da-display text-lg font-bold">{it.title}</h3>
              <p className="mt-2 text-[15px] text-da-muted-fg">{it.text}</p>
              <a
                href={it.href}
                className="da-focus da-transition mt-4 inline-flex items-center gap-1 rounded-da-sm text-sm font-semibold text-da-primary hover:gap-1.5"
              >
                Learn more<span className="sr-only"> about {it.title}</span>
                <ArrowRight aria-hidden className="size-4" />
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesGrid;