function ModulesPage() {
  const first = [
    { icon: 'FolderKanban', title: 'Project Management', status: 'Shipped', body: 'Projects · tasks · milestones · attachments · activity. Four aggregates, nine AI tools, platform-wide Decisions recorder.', tools: ['list_projects','get_project','create_task','find_overdue_tasks','summarize_project','what_changed_since','what_is_at_risk','list_open_items','record_decision'] },
    { icon: 'ClipboardList', title: 'Daily Logs', status: 'Shipped', body: 'One log per (project, date). Draft-history stack for reversible re-draft. Medium-stakes preview before save. Finalisation one-way.', tools: ['add_log_input','draft_daily_log','update_daily_log_field','finalize_daily_log','query_daily_logs','summarize_daily_logs'] },
    { icon: 'Camera', title: 'Photos', status: 'Shipped', body: 'Gallery with AI auto-tagging. Three tag sources: ai_suggested · human_confirmed · human_added. Per-tag confidence, model footer, confirm/reject.', tools: ['find_photos'] },
    { icon: 'Flag', title: 'RFIs', status: 'Shipped', body: 'Capture → draft → send to counterparty. Scoped magic-link auth for external reviewers — architects answer without creating an account.', tools: ['draft_rfi','send_rfi','reply_to_rfi'] },
    { icon: 'FileCheck', title: 'Submittals', status: 'Designed', body: 'Commercial-pilot blocker, Phase 1 specified. Architect approves before materials ship. State machine + approval trail + revision stack.', tools: ['draft_submittal','route_submittal','approve_submittal'] },
    { icon: 'Clock', title: 'Background agents', status: 'In build', body: 'Scheduled read-only agents. Weekly digests, daily at-risk scans, RFI aging. Read-only enforced at the message bus; 2,500 cr/mo default cap; severity-gated email.', tools: ['weekly_project_digest','daily_at_risk_scan','open_rfi_aging','recent_decisions','safety_photo_digest'] },
  ];
  const platform = [
    { icon: 'Sparkles', title: 'Assistant', body: 'The conversational surface. One command bar across the app. `/api/ai/converse` SSE endpoint; legacy per-agent route retired (410 Gone).' },
    { icon: 'Activity', title: 'Agent Workforce', body: 'Metering + credit ledger + budgets + trust layer. Phases 1, 2a, 2b, 3a, 3b, 4a shipped. Phase 5 (outcome billing) in Deferred.' },
    { icon: 'Store', title: 'Marketplace', body: 'OAuth2 apps + scopes + reviews. Deny-by-default on app-authenticated requests.' },
    { icon: 'Database', title: 'BYOS Storage', body: 'Bring your own S3-compatible bucket, per tenant. Verify-canary probe on save. Enterprise-only plan gate.' },
    { icon: 'Lock', title: 'OIDC SSO', body: 'Per-tenant connections · PKCE · JWKS cache · break-glass audit. Four enforcement modes.' },
    { icon: 'Webhook', title: 'Webhooks', body: 'HMAC-signed POST. Async transport in prod. Retry policy. Per-tenant subscriptions.' },
  ];
  return (
    <>
      <section className="section-tight pt-16">
        <Container>
          <Eyebrow>Modules · marketplace</Eyebrow>
          <h1 className="m-display mt-3 max-w-3xl">Turn modules on by tenant. Or write your own.</h1>
          <p className="m-lede mt-5 max-w-2xl">Every module in SyncBuild is a package — first-party or third-party — that registers tools, routes, and events through the module SDK. Nothing in `packages/module-*` ever imports `App\\`.</p>
        </Container>
      </section>

      <section className="pb-8">
        <Container>
          <div className="flex items-center gap-2 mb-6">
            <div className="sb-eyebrow">First-party modules</div>
            <div className="h-px flex-1" style={{ background: 'var(--border)' }} />
          </div>
          <div className="grid lg:grid-cols-2 gap-4">
            {first.map(m => (
              <div key={m.title} className="card p-6">
                <div className="flex items-start gap-3">
                  <div className="w-9 h-9 rounded-md grid place-items-center" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
                    <Icon name={m.icon} size={18} />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <div className="text-[16px] font-semibold">{m.title}</div>
                      <Badge tone={m.status === 'Shipped' ? 'success' : 'brand'}>{m.status}</Badge>
                    </div>
                    <p className="text-[13.5px] mt-1.5" style={{ color: 'var(--fg2)' }}>{m.body}</p>
                    <div className="mt-3 flex flex-wrap gap-1.5">
                      {m.tools.map(t => <span key={t} className="tag-pill" style={{ fontSize: 11, fontFamily: 'var(--sb-font-mono)' }}>{t}</span>)}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section className="section">
        <Container>
          <div className="flex items-center gap-2 mb-6">
            <div className="sb-eyebrow">Platform modules</div>
            <div className="h-px flex-1" style={{ background: 'var(--border)' }} />
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {platform.map(m => <FeatureCard key={m.title} icon={m.icon} title={m.title}>{m.body}</FeatureCard>)}
          </div>
        </Container>
      </section>

      <section className="section" style={{ background: 'var(--bg-muted)' }}>
        <Container>
          <SectionHeading eyebrow="Build your own" title="Third-party modules follow the same shape." lede="Self-contained package. No App\\ deps. Registers tools, routes, and events through the SDK contracts." />
          <div className="mt-10 card p-0 overflow-hidden" style={{ fontFamily: 'var(--sb-font-mono)' }}>
            <div className="px-4 py-2 border-b flex items-center justify-between text-[12px]" style={{ borderColor: 'var(--border)', background: 'var(--bg-muted)' }}>
              <span>packages/module-hello/src/HelloModule.php</span><span style={{ color: 'var(--fg2)' }}>php</span>
            </div>
            <pre className="p-5 text-[12.5px] overflow-x-auto leading-relaxed" style={{ color: 'var(--fg1)' }}>{`final class HelloModule implements ModuleInterface
{
    public function manifest(): ModuleManifest
    {
        return new ModuleManifest(
            name: 'hello',
            version: '0.1.0',
            tools: [HelloTool::class],
            routes: __DIR__ . '/../config/routes.yaml',
            events: [GreetingRecorded::class => SendGreetingEmail::class],
        );
    }
}`}</pre>
          </div>
        </Container>
      </section>

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