Features — bento, 5 tiles

import type { ReactNode } from "react";
import { FileText } from "lucide-react";
import { cn } from "@/lib/utils";

const chip = "inline-flex items-center gap-1.5 rounded border border-border bg-bg px-2.5 py-1.5 text-xs font-medium text-fg";
const lines = [["Brand workshop", "$1,800"], ["Logo, 3 rounds", "$1,200"], ["Guidelines PDF", "$600"]];

const tiles: { title: string; text: string; picture: ReactNode }[] = [
  { title: "Pay links", text: "Every invoice carries a button to pay.",
    picture: <div className="flex gap-1.5 text-center text-[11px]">{["Card", "Bank", "UPI"].map((m, i) => <span key={m} className={cn("flex-1 rounded-sm border border-border bg-bg py-1.5 text-fg-muted", i === 0 && "border-primary text-fg ring-1 ring-primary")}>{m}</span>)}</div> },
  { title: "24 currencies", text: "Bill clients abroad in their money.",
    picture: <div className="flex flex-wrap gap-2">{["USD", "EUR", "GBP", "INR"].map((c) => <span key={c} className={chip}>{c}</span>)}</div> },
  { title: "Reminders", text: "Pick the days; Fernbill does the rest.",
    picture: <div className="grid gap-2.5 text-[12.5px] text-fg">{["3 days before", "7 days late"].map((d) => <div key={d} className="flex items-center justify-between"><span>{d}</span><span className="relative h-[22px] w-[38px] rounded-full bg-primary after:absolute after:left-[19px] after:top-[3px] after:size-4 after:rounded-full after:bg-bg" /></div>)}</div> },
  { title: "Exports", text: "Year-end in one click.",
    picture: <div className="flex flex-wrap gap-2">{["Q3-income.csv", "Q3-pack.pdf"].map((f) => <span key={f} className={chip}><FileText className="size-3.5 text-primary" />{f}</span>)}</div> },
];

export function FeaturesBento5() {
  return (
    <section aria-labelledby="features-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-24">
        <div className="mb-8 grid items-end gap-4 lg:mb-12 lg:grid-cols-[1.1fr_1fr] lg:gap-12">
          <h2 id="features-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Small tools that add up to a calmer month</h2>
          <p className="text-pretty text-base leading-relaxed text-fg-muted">Each one saves you ten minutes. Together, they give you your Sundays back.</p>
        </div>

        <div className="grid gap-3.5 sm:grid-cols-2 lg:grid-cols-[1.1fr_1fr_1fr]">
          {/* Tall lead tile */}
          <article className="flex flex-col justify-between gap-4 rounded-xl border border-border bg-surface bg-gradient-to-b from-surface to-primary-soft p-[22px] sm:col-span-2 lg:col-span-1 lg:row-span-2">
            <div aria-hidden className="grid gap-2 rounded-lg border border-border bg-bg p-4 text-xs text-fg shadow-xl">
              <div className="flex justify-between"><b className="font-semibold">INV-1043</b><span className="rounded-full bg-surface-2 px-2 text-fg-muted">Draft</span></div>
              <p className="text-fg-subtle">Blue Pine Studio · Due 14 Nov</p>
              <hr className="border-border" />
              {lines.map(([a, b]) => <div key={a} className="flex justify-between"><span>{a}</span><span className="tabular-nums">{b}</span></div>)}
              <hr className="border-border" />
              <div className="flex justify-between font-semibold"><span>Total</span><span className="tabular-nums">$3,600</span></div>
              <span className="rounded bg-primary py-1.5 text-center text-[13px] font-medium text-primary-fg">Send invoice</span>
            </div>
            <div>
              <h3 className="text-base font-semibold tracking-tight text-fg">An editor that gets out of the way</h3>
              <p className="mt-1.5 text-[13.5px] leading-relaxed text-fg-muted">Lines, taxes and totals that add themselves up as you type.</p>
            </div>
          </article>

          {tiles.map((t) => (
            <article key={t.title} className="flex flex-col justify-between gap-4 rounded-xl border border-border bg-surface p-[22px]">
              <div aria-hidden>{t.picture}</div>
              <div>
                <h3 className="text-base font-semibold tracking-tight text-fg">{t.title}</h3>
                <p className="mt-1.5 text-[13.5px] leading-relaxed text-fg-muted">{t.text}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}