Hero block

import { type ReactNode } from "react"
import { BlockEm } from "@/components/ui/block-concept"
import { HeroBlock } from "@/components/ui/hero-block"
import { ProofBlock } from "@/components/ui/proof-block"

function Frame({ children }: { children: ReactNode }) {
  return <div className="w-full overflow-hidden rounded-[14px] shadow-[0_0_0_1px_var(--border)]">{children}</div>;
}

function Ledger() {
  const rows = [
    ["Mercury", "Stripe payout · INV-2291", "$18,240.00", "Matched", "rule: payouts"],
    ["AWS", "Invoice 0923", "$4,112.37", "Matched", "vendor history"],
    ["Gusto", "Payroll · 31 Oct", "$61,904.12", "Review", "amount differs by $12.40"],
    ["Figma", "Annual · Org plan", "$2,880.00", "Matched", "rule: SaaS"],
    ["Brex", "Card settlement", "$9,377.80", "Matched", "statement"],
  ];
  return (
    <div className="grid gap-4 text-[13px]">
      <div className="grid gap-2">
        <span className="text-[var(--k-muted)]">October close</span>
        <span data-slot="block-title" data-size="3" className="tabular-nums">412 of 418 matched</span>
        <div className="h-1.5 w-full max-w-[260px] overflow-hidden rounded-full bg-[var(--k-sunken)]" aria-hidden="true"><i className="block h-full w-[98.5%] rounded-full bg-[var(--k-hi)]" /></div>
      </div>
      <div className="grid">
        {rows.map(([vendor, memo, amount, state, why]) => (
          <div key={memo} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 border-t border-[var(--k-line)] py-2.5 tabular-nums @[560px]:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto_88px]">
            <span className="truncate font-medium">{vendor} <span className="font-normal text-[var(--k-muted)]">· {memo}</span></span>
            <span className="truncate text-[var(--k-muted)] @max-[559px]:hidden">{why}</span>
            <span className="text-right">{amount}</span>
            <span className={`justify-self-end rounded-full px-2 py-0.5 text-xs @max-[559px]:hidden ${state === "Review" ? "bg-[var(--k-hi-soft)] text-[var(--k-hi)]" : "text-[var(--k-muted)]"}`}>{state}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function LedgerNote() {
  return (
    <div className="grid gap-1 p-4 text-[13px]">
      <span className="font-medium">Gusto · Payroll needs a look</span>
      <span className="text-[var(--k-muted)]">$12.40 more than the ledger. Likely: employer NI adjustment.</span>
    </div>
  );
}

const heroes: Parameters<typeof HeroBlock>[0] = { eyebrow: "Month-end close for finance teams", announcement: "New · NetSuite two-way sync", title: <>Close the books <BlockEm>in a morning</BlockEm></>, lead: "Halden matches every bank line to the ledger as it lands, so the close is a review, not a hunt.", primary: { label: "Start the trial", href: "#" }, secondary: { label: "See a close", href: "#" }, note: "14 days free · no card", proof: <Ledger />, proofTitle: "halden.app/close/october", floating: <LedgerNote />, logos: ["Ostra Freight", "Lumen Labs", "Kestrel Bio", "Northwind", "Tide Physio"], logosLabel: "Closing the books at 1,200 finance teams, including" };

export function HeroBlockDemo() {
  return <Frame><HeroBlock headingLevel={2} {...heroes} /></Frame>;
}

const proof: Parameters<typeof ProofBlock>[0] = { logos: ["Ostra Freight", "Lumen Labs", "Kestrel Bio", "Northwind", "Tide Physio"], caseStudy: { figure: "9→1", figureLabel: "days to close the books at Ostra Freight", quote: "The first month we trusted it, our auditors asked for the audit trail export instead of our spreadsheets.", person: "Ana Reyes, Financial controller", action: { label: "Read the Ostra case study", href: "#" } } };