// Docs page — quickstart + MCP guide + API ref in one scrollable surface

const DocsPage = () => {
  const [active, setActive] = React.useState('quickstart');
  return (
    <PageShell active="Docs">
      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 220px', minHeight: 'calc(100vh - 160px)' }}>
        {/* Sidebar */}
        <div style={{ borderRight: `1px solid ${FH.border}`, padding: '32px 24px', position: 'sticky', top: 0, alignSelf: 'start' }}>
          <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 18 }}>◆ DOCS</div>
          {[
            ['GETTING STARTED', [['quickstart', 'Quickstart · 5 min'], ['install', 'Install the SDK'], ['auth', 'Authentication']]],
            ['MCP', [['mcp', 'Why MCP'], ['mcp-config', 'Config snippets'], ['mcp-clients', 'Client compatibility']]],
            ['API REFERENCE', [['api', 'Overview'], ['tools', 'Tool catalogue · 47'], ['errors', 'Errors & rate limits'], ['webhooks', 'Webhooks']]],
            ['GUIDES', [['ingest', 'Ingest cadence'], ['classify', 'Event classification'], ['historic', 'Historical backfill']]],
          ].map(([h, items]) => (
            <div key={h} style={{ marginBottom: 22 }}>
              <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.16em', marginBottom: 8 }}>{h}</div>
              {items.map(([id, label]) => (
                <a key={id} href={`#${id}`} onClick={() => setActive(id)} style={{
                  display: 'block', padding: '5px 8px', fontSize: 12,
                  color: active === id ? FH.accent : FH.ink2,
                  background: active === id ? FH.bg2 : 'transparent',
                  borderLeft: active === id ? `2px solid ${FH.accent}` : '2px solid transparent',
                  textDecoration: 'none', marginLeft: -8,
                }}>{label}</a>
              ))}
            </div>
          ))}
        </div>

        {/* Main */}
        <div style={{ padding: '52px 48px', maxWidth: 760 }}>
          <div id="quickstart">
            <div style={{ fontSize: 11, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 12 }}>◆ QUICKSTART</div>
            <div style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 64, lineHeight: 1, letterSpacing: '-0.025em' }}>
              From <em style={{ color: FH.accent }}>zero to first call</em> in five minutes.
            </div>
            <div style={{ marginTop: 22, fontSize: 15, color: FH.ink2, lineHeight: 1.6 }}>
              Get a key, drop the MCP config in your client, call any of 47 tools.
              Works in Claude Desktop, Cursor, Zed, Continue, and any client that speaks MCP.
            </div>
          </div>

          {/* Step blocks */}
          {[
            ['01', 'Get an API key', 'Sign up at firmhound.com — 14 day trial, no card. Your key shows up in the dashboard under Keys.', null],
            ['02', 'Install the MCP server', 'One npm package, no native deps. Works on macOS, Linux, Windows.', `npm i -g @firmhound/mcp\nfirmhound --version  # 4.2.0`],
            ['03', 'Configure your client', 'Drop this into your client\'s mcp.json (Claude Desktop, Cursor, Zed all use the same shape).', `{\n  "mcpServers": {\n    "firmhound": {\n      "command": "firmhound",\n      "args": ["serve"],\n      "env": { "FIRMHOUND_KEY": "fh_live_..." }\n    }\n  }\n}`],
            ['04', 'Make your first call', 'Restart your client. The 47 tools appear in the tool list. Try one:', `await mcp.call("search_8k_events", {\n  query: "CFO departure",\n  item_type: "5.02",\n  since: "2026-04-01"\n})`],
          ].map(([n, title, body, code]) => (
            <div key={n} style={{
              marginTop: 40, paddingTop: 28, borderTop: `1px solid ${FH.border}`,
              display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
            }}>
              <div style={{ color: FH.accent, fontFamily: '"JetBrains Mono", monospace', fontSize: 14 }}>{n}</div>
              <div>
                <div style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 28, color: FH.ink, marginBottom: 10 }}>{title}</div>
                <div style={{ fontSize: 14, color: FH.ink2, lineHeight: 1.6 }}>{body}</div>
                {code && (
                  <pre style={{
                    margin: '18px 0 0', padding: '16px 18px',
                    background: FH.bg2, border: `1px solid ${FH.border}`,
                    fontSize: 12, color: FH.ink, lineHeight: 1.6,
                    fontFamily: '"JetBrains Mono", monospace',
                    overflow: 'auto',
                  }}>{code}</pre>
                )}
              </div>
            </div>
          ))}

          {/* MCP section */}
          <div id="mcp" style={{ marginTop: 80, paddingTop: 40, borderTop: `2px solid ${FH.borderHi}` }}>
            <div style={{ fontSize: 11, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 12 }}>◆ MCP GUIDE</div>
            <div style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 56, lineHeight: 1, letterSpacing: '-0.02em' }}>
              Why MCP, and how we use it.
            </div>
            <div style={{ marginTop: 18, fontSize: 14, color: FH.ink2, lineHeight: 1.65 }}>
              MCP — the Model Context Protocol — is a small, open spec for letting LLM-driven
              clients call tools and read resources from external servers. We expose every
              Firmhound product as an MCP server, so any compatible client can use the tools
              without bespoke glue code. Below, a list of clients we've tested.
            </div>
            <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: FH.border, border: `1px solid ${FH.border}` }}>
              {[
                ['Claude Desktop', '✓ tested', '0.7+'],
                ['Cursor',         '✓ tested', '0.40+'],
                ['Zed',            '✓ tested', '0.150+'],
                ['Continue.dev',   '✓ tested', '0.9+'],
                ['Cline',          '✓ tested', '3.2+'],
                ['Custom client',  'works',    'JSON-RPC 2.0 over stdio'],
              ].map(([c, s, v]) => (
                <div key={c} style={{
                  padding: '14px 18px', background: FH.bg,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <div>
                    <div style={{ color: FH.ink, fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 18 }}>{c}</div>
                    <div style={{ color: FH.ink3, fontSize: 11, marginTop: 2 }}>{v}</div>
                  </div>
                  <div style={{ color: FH.accent, fontSize: 11, fontFamily: '"JetBrains Mono", monospace', letterSpacing: '0.08em' }}>{s}</div>
                </div>
              ))}
            </div>
          </div>

          {/* API ref */}
          <div id="api" style={{ marginTop: 80, paddingTop: 40, borderTop: `2px solid ${FH.borderHi}` }}>
            <div style={{ fontSize: 11, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 12 }}>◆ API REFERENCE</div>
            <div style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 56, lineHeight: 1, letterSpacing: '-0.02em' }}>
              47 tools, three groups.
            </div>
            <div style={{ marginTop: 18, fontSize: 14, color: FH.ink2, lineHeight: 1.65 }}>
              Each tool is a JSON-schema-described function. Inputs are validated client-side
              and server-side. Outputs are pre-classified, normalized, and stable across calls.
            </div>
            <div id="tools" style={{ marginTop: 28 }}>
              {[
                ['SEC', [
                  ['search_8k_events',     '{ query, item_type, since, ticker? }', 'Returns classified 8-K events'],
                  ['get_filing',           '{ accession }',                          'Full filing with parsed sections'],
                  ['xbrl_facts',           '{ ticker, concept, period }',            'Normalized XBRL value'],
                  ['proxy_directors',      '{ ticker, year? }',                      'Board roster from DEF 14A'],
                ]],
                ['FED', [
                  ['fr_proposed_rules',    '{ agency?, since, deadline_before? }',   'Federal Register proposed rules'],
                  ['bls_release',          '{ series_id, since? }',                  'BLS release values + units'],
                  ['stock_act_trades',     '{ chamber?, member?, since }',           'Senator/rep disclosed trades'],
                  ['lda_filings',          '{ registrant?, year? }',                 'Lobby disclosures'],
                  ['sbir_awards',          '{ agency?, phase?, since }',             'SBIR/STTR Phase I/II grants'],
                ]],
                ['COMMERCIAL', [
                  ['faa_aircraft',         '{ tail }',                               'Aircraft registration & history'],
                  ['ct_trials',            '{ sponsor?, status?, condition? }',      'ClinicalTrials.gov records'],
                  ['irs_990',              '{ ein }',                                'Form 990 filings'],
                ]],
              ].map(([group, tools]) => (
                <div key={group} style={{ marginBottom: 22 }}>
                  <div style={{ fontSize: 10, color: FH.accent, letterSpacing: '0.18em', padding: '10px 0', borderBottom: `1.5px solid ${FH.borderHi}` }}>{group}</div>
                  {tools.map(([n, sig, desc]) => (
                    <div key={n} style={{
                      display: 'grid', gridTemplateColumns: '220px 1fr 200px',
                      columnGap: 18, padding: '12px 0',
                      borderBottom: `1px solid ${FH.border}`, alignItems: 'baseline',
                    }}>
                      <div style={{ color: FH.ink, fontFamily: '"JetBrains Mono", monospace', fontSize: 13 }}>{n}</div>
                      <div style={{ color: FH.ink3, fontFamily: '"JetBrains Mono", monospace', fontSize: 11 }}>{sig}</div>
                      <div style={{ color: FH.ink2, fontSize: 12 }}>{desc}</div>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right rail — quick links */}
        <div style={{ borderLeft: `1px solid ${FH.border}`, padding: '52px 24px', position: 'sticky', top: 0, alignSelf: 'start' }}>
          <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 14 }}>ON THIS PAGE</div>
          {[
            ['Quickstart', '#quickstart'],
            ['MCP guide', '#mcp'],
            ['API reference', '#api'],
            ['Tool catalogue', '#tools'],
          ].map(([l, h]) => (
            <a key={l} href={h} style={{ display: 'block', fontSize: 12, color: FH.ink2, padding: '4px 0', textDecoration: 'none' }}>{l}</a>
          ))}
          <div style={{ marginTop: 24, padding: 16, background: FH.bg2, border: `1px solid ${FH.border}` }}>
            <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.16em', marginBottom: 8 }}>NEED HELP?</div>
            <div style={{ fontSize: 12, color: FH.ink2, lineHeight: 1.5, marginBottom: 10 }}>Real engineers respond within 24h.</div>
            <a href="about.html#contact" style={{ fontSize: 11, color: FH.accent, letterSpacing: '0.1em', textDecoration: 'none' }}>EMAIL SUPPORT ↗</a>
          </div>
        </div>
      </div>
    </PageShell>
  );
};

window.DocsPage = DocsPage;