function WorkforcePage() {
  return (
    <>
      <section className="section-tight pt-16">
        <Container>
          <Eyebrow>Agent Workforce</Eyebrow>
          <h1 className="m-display mt-3 max-w-3xl">Your construction platform's digital labour force — metered, budgeted, auditable.</h1>
          <p className="m-lede mt-5 max-w-2xl">Every tool call is metered. Every token is priced. Every credit is debited atomically against a ledger that preserves balance-after in the same database transaction.</p>
        </Container>
      </section>

      <section className="pb-8">
        <Container><CreditLedgerMock /></Container>
      </section>

      <section className="section">
        <Container>
          <div className="grid lg:grid-cols-2 gap-6">
            <div className="card p-6">
              <Eyebrow>Rate card</Eyebrow>
              <h3 className="m-title mt-2">Standard pricing · per call</h3>
              <table className="w-full mt-4 text-[13px]">
                <tbody className="divide-y-hairline">
                  {[
                    ['Tool call', '20 credits'],
                    ['Input tokens', '10 credits / 1k · ceil-rounded'],
                    ['Output tokens', '10 credits / 1k · ceil-rounded'],
                    ['Vision (photo tag)', '50 / 40 / 10 per call / 1k in / 1k out'],
                  ].map(r => (
                    <tr key={r[0]}>
                      <td className="py-2.5" style={{ color: 'var(--fg2)' }}>{r[0]}</td>
                      <td className="py-2.5 text-right font-mono">{r[1]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <p className="text-[12.5px] mt-4" style={{ color: 'var(--fg2)' }}>Failures are priced too — tokens were paid to the provider.</p>
            </div>
            <div className="card p-6">
              <Eyebrow>Credit packs</Eyebrow>
              <h3 className="m-title mt-2">Stripe Checkout · idempotent on session ID</h3>
              <div className="mt-4 space-y-3">
                {[
                  ['Starter', '10,000 credits', '$20', ''],
                  ['Growth', '50,000 credits', '$90', '10% off'],
                  ['Scale', '250,000 credits', '$400', '20% off'],
                ].map(p => (
                  <div key={p[0]} className="flex items-center justify-between p-3 rounded" style={{ background: 'var(--bg-muted)' }}>
                    <div>
                      <div className="text-[14px] font-semibold">{p[0]}</div>
                      <div className="text-[12px]" style={{ color: 'var(--fg2)' }}>{p[1]}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-[15px] font-semibold">{p[2]}</div>
                      {p[3] && <div className="text-[11px]" style={{ color: 'var(--success-fg)' }}>{p[3]}</div>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Container>
      </section>

      <section className="section" style={{ background: 'var(--bg-muted)' }}>
        <Container>
          <SectionHeading eyebrow="Phases" title="Shipped incrementally. Honestly." lede="The commercial loop is live end-to-end today: metering → pricing → live debit → Stripe top-ups → tenant + sub-budgets → invoice CSV → trust layer on every LLM boundary. Phase 5 (outcome billing) is in Deferred — we'll build it when the signal fires." />
          <div className="mt-10 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              ['1', 'Metering & observation', 'AgentInvocation + AgentAction aggregates. Wired into AgentRuntime + MCP. Feature-flag gated (off by default).', true],
              ['2a', 'Credit ledger + rate card', 'Append-only ledger with balance_after snapshot. Stateless pricer. Atomic debit in the same DB tx.', true],
              ['2b', 'Stripe top-ups', 'CreditPack catalog · BillingProviderInterface::createTopUpCheckoutSession · idempotent webhook.', true],
              ['3a', 'Budgets + alerts + forecast', 'TenantBudget: monthly cap, observe/enforce mode, thresholds at 50/80/100%. Linear forecast. 402 on enforce.', true],
              ['3b', 'Sub-budgets + invoices', 'Per-user ENFORCED, per-module observation. CSV one row per ledger tx (15 columns). Current-usage endpoint.', true],
              ['4a', 'Trust layer v1', 'PII scrub · two-tier injection detector · pluggable toxicity. Sanitize-first, rarely-block by design.', true],
              ['5', 'Outcome billing', 'Pay for successful agent outcomes, not token input. Deferred until usage signals land.', false],
            ].map(p => (
              <div key={p[0]} className="card p-5">
                <div className="flex items-center justify-between">
                  <div className="w-8 h-8 rounded-md grid place-items-center font-mono text-[13px]" style={{ background: p[3] ? 'var(--brand-tint)' : 'var(--bg-muted)', color: p[3] ? 'var(--brand)' : 'var(--fg2)' }}>{p[0]}</div>
                  <Badge tone={p[3] ? 'success' : 'default'}>{p[3] ? 'Shipped' : 'Planned'}</Badge>
                </div>
                <div className="text-[14.5px] font-semibold mt-3">{p[1]}</div>
                <p className="text-[13px] mt-1.5" style={{ color: 'var(--fg2)' }}>{p[2]}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section className="section">
        <Container>
          <div className="grid lg:grid-cols-12 gap-10 items-start">
            <div className="lg:col-span-5">
              <Eyebrow>Trust layer</Eyebrow>
              <h2 className="m-headline mt-3">Sanitize-first. Rarely-block. Always audited.</h2>
              <p className="m-lede mt-4">Three filters: regex PII scrubber · two-tier prompt-injection detector · pluggable toxicity provider (OpenAI Moderations by default, Null fallback). Per-violation `Allow · Sanitize · Block` policy. Injection only hard-blocks on the 12-pattern red list. Toxicity defaults to annotate-and-allow.</p>
              <Checklist items={[
                'Audit split: TrustLayerSummary (authoritative counters) + TrustLayerEvent (sampled detail — Critical always)',
                'Wired into AgentRuntime (inbound + outbound) and MCP (inbound + outbound)',
                'ContentSource gates injection detection to untrusted sources only',
                'Typed exceptions map to HTTP 400/413/422',
              ]} />
            </div>
            <div className="lg:col-span-7"><TrustLayerMock /></div>
          </div>
        </Container>
      </section>

      <CTABand />
    </>
  );
}
Object.assign(window, { WorkforcePage });