Features Bento

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

export interface FeaturesBentoProps {
  eyebrow?: string;
  title?: string;
  className?: string;
}

/** Data-driven bento grid of bordered cards: cash-flow line chart, DSO metric, approval flow, currency list and integrations — each a small realistic mock. */
export function FeaturesBento({ eyebrow = "Visibility", title = "Real-time answers to every finance question", className }: FeaturesBentoProps) {
  const card = "da-stroke rounded-da-lg bg-da-surface p-6 text-da-surface-fg";
  const line = [30, 42, 38, 55, 50, 62, 58, 71, 69, 80, 78, 92];
  const pts = line.map((v, i) => `${(i / (line.length - 1)) * 300},${100 - v}`).join(" ");
  return (
    <section aria-labelledby="nc-bento-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
        <h2
          id="nc-bento-title"
          className="mt-3 max-w-2xl font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display text-balance"
        >
          {title}
        </h2>
        <ul className="mt-12 grid gap-4 md:grid-cols-6">
          <li className={cn(card, "md:col-span-4")}>
            <h3 className="font-da-display text-lg font-bold">Cash-flow forecast</h3>
            <p className="mt-1 text-sm text-da-muted-fg">13-week rolling forecast built from open invoices and scheduled bills.</p>
            <svg aria-hidden viewBox="0 0 300 100" className="mt-6 h-40 w-full overflow-visible" preserveAspectRatio="none">
              {[25, 50, 75].map((y) => (
                <line key={y} x1="0" x2="300" y1={y} y2={y} stroke="var(--da-border)" vectorEffect="non-scaling-stroke" />
              ))}
              <polyline points={`0,100 ${pts} 300,100`} fill="color-mix(in oklab, var(--da-primary) 12%, transparent)" />
              <polyline points={pts} fill="none" stroke="var(--da-primary)" strokeWidth="2" vectorEffect="non-scaling-stroke" />
            </svg>
          </li>
          <li className={cn(card, "flex flex-col md:col-span-2")}>
            <h3 className="font-da-display text-lg font-bold">Days sales outstanding</h3>
            <p className="mt-auto pt-8 font-da-mono text-5xl font-medium tabular-nums">18.4</p>
            <p className="mt-1 text-sm font-semibold text-da-success">−9.2 days since Ledgerly</p>
          </li>
          <li className={cn(card, "md:col-span-2")}>
            <h3 className="font-da-display text-lg font-bold">Approvals</h3>
            <ol aria-hidden className="mt-5 space-y-3 text-sm">
              {[
                ["Submitted", "Maya · $12,400 AWS", "bg-da-success"],
                ["Manager", "Approved by J. Ortiz", "bg-da-success"],
                ["Finance", "Pending · D. Whitfield", "bg-da-warning"],
              ].map(([t, d, c]) => (
                <li key={t} className="flex items-center gap-3">
                  <span className={cn("size-2.5 rounded-full", c)} />
                  <span className="font-semibold">{t}</span>
                  <span className="truncate text-da-muted-fg">{d}</span>
                </li>
              ))}
            </ol>
          </li>
          <li className={cn(card, "md:col-span-2")}>
            <h3 className="font-da-display text-lg font-bold">40 currencies</h3>
            <ul aria-hidden className="mt-5 space-y-2 font-da-mono text-sm">
              {[
                ["USD", "$1,284,300"],
                ["EUR", "€412,880"],
                ["GBP", "£96,210"],
              ].map(([c, v]) => (
                <li key={c} className="flex justify-between border-b border-da-border pb-2 last:border-0">
                  <span className="text-da-muted-fg">{c}</span>
                  <span>{v}</span>
                </li>
              ))}
            </ul>
          </li>
          <li className={cn(card, "md:col-span-2")}>
            <h3 className="font-da-display text-lg font-bold">Syncs with your ERP</h3>
            <ul className="mt-5 flex flex-wrap gap-2" aria-label="Integrations">
              {["NetSuite", "SAP", "Xero", "QuickBooks", "Sage Intacct", "Salesforce"].map((n) => (
                <li key={n} className="da-stroke rounded-da-md px-2.5 py-1 text-sm font-medium">
                  {n}
                </li>
              ))}
            </ul>
          </li>
        </ul>
      </div>
    </section>
  );
}

export default FeaturesBento;