// Template figures — replace them with your own, and keep the source somewhere visible.
const stats = [
  { value: "186k", label: "invoices sent last month" },
  { value: "9.4", label: "average days to get paid" },
  { value: "24", label: "currencies supported" },
  { value: "12,400", label: "studios on Fernbill" },
];

export function HeroWithStats() {
  return (
    <section aria-labelledby="hero-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
        <div className="grid items-end gap-8 lg:grid-cols-[1.5fr_1fr] lg:gap-14">
          <div>
            <p className="text-[13px] font-medium text-primary">Fernbill for studios</p>
            <h1 id="hero-title" className="mt-5 text-balance text-4xl font-semibold leading-[1.04] tracking-tight text-fg sm:text-5xl lg:text-6xl">
              The billing desk for teams that would rather be making things.
            </h1>
          </div>
          <div className="grid gap-6">
            <p className="text-pretty text-base leading-relaxed text-fg-muted">
              Quotes, invoices, retainers and reminders in one place — with a clear view of what’s owed and when it lands.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="/signup" className="inline-flex h-11 items-center rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">Start free</a>
              <a href="/contact" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 text-[15px] font-medium text-fg transition hover:bg-surface">Talk to us</a>
            </div>
          </div>
        </div>

        <dl className="mt-12 grid grid-cols-2 border-t border-border lg:mt-16 lg:grid-cols-4">
          {stats.map((s, i) => (
            <div
              key={s.label}
              className={[
                "flex flex-col gap-1.5 border-b border-border py-5 lg:border-b-0 lg:pb-0 lg:pt-6",
                i % 2 === 1 ? "border-l pl-4" : "pr-4",
                i > 0 ? "lg:border-l lg:pl-6" : "lg:pr-6",
              ].join(" ")}
            >
              <dt className="order-2 text-[13.5px] text-fg-muted">{s.label}</dt>
              <dd className="order-1 text-3xl font-semibold tracking-tight tabular-nums text-fg lg:text-4xl">{s.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}