// Projects page — featured large, then grid
const Projects = ({ onNav }) => {
  const grid = [
    ['zero-touch-engineering', 'MCP tooling for infrastructure automation. 38 tools, one shell.', ['mcp', 'bash', 'python'], 142, 'running'],
    ['ragas-recipes', 'Copy-paste evaluation harnesses for common RAG patterns.', ['python', 'ragas'], 87, 'running'],
    ['granite-local', 'IBM Granite served from your laptop with a one-command installer.', ['ollama', 'rust'], 63, 'paused'],
    ['prompt-ci', 'Treat prompts like code: diff, test, rollback.', ['python', 'gh-actions'], 94, 'running'],
    ['lf-cookbook', 'Langfuse patterns I actually use in production.', ['python', 'langfuse'], 41, 'archived'],
    ['mcp-inspector', 'A terminal UI for watching MCP messages in real time.', ['rust', 'tui'], 58, 'running'],
  ];

  return (
    <PageShell topPath="~/lab" topCurrent="./ls -la" nav="projects" onNav={onNav}>
      <section style={{ padding: '44px 0 24px' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--brass)', marginBottom: 12 }}>~/lab/</div>
        <h1 style={{ fontFamily: 'var(--mono)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.03em', margin: 0, color: 'var(--fg)', textTransform: 'uppercase' }}>
          # Lab
        </h1>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--fg-dim)', marginTop: 12, maxWidth: 600, lineHeight: 1.7 }}>
          Build-in-public projects. Each has a companion post; each runs on my machine
          before it gets pushed.
        </div>
      </section>

      <section style={{ padding: '0 0 36px' }}>
        <SectionHead cmd="cat featured/README.md" file="~/lab/the-claw-machine" />
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0,
          border: '1px solid var(--rule)',
        }}>
          <div style={{ padding: 28, borderRight: '1px solid var(--rule)' }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--brass)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>
              ◉ featured project
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 30, fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)', marginBottom: 12 }}>
              The Claw Machine
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--fg-dim)', lineHeight: 1.75, marginBottom: 20 }}>
              A multi-agent orchestrator that tries, fails, and retries with different
              strategies until it retrieves what you asked for. Written to understand
              how failure compounds.
            </div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 20, flexWrap: 'wrap' }}>
              {['python', 'claude', 'langfuse', 'mcp', 'pytest'].map(t => <Tag key={t}>{t}</Tag>)}
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-dimmer)', lineHeight: 2 }}>
              → <span style={{ color: 'var(--brass)' }}>github.com/mjenkins/the-claw-machine</span><br/>
              → 284 stars · 12 contributors · MIT<br/>
              → companion post: <span style={{ color: 'var(--brass)' }}>the agentic loop</span>
            </div>
          </div>
          <div style={{ background: 'var(--ink-3)', padding: 20, fontFamily: 'var(--mono)', fontSize: 11, lineHeight: 1.9, color: 'var(--fg-dim)', overflow: 'hidden' }}>
            <div style={{ color: 'var(--brass)' }}>$ pip install claw-machine</div>
            <div style={{ color: 'var(--fg-dimmer)', marginBottom: 12 }}>installing claw-machine-0.4.1...</div>
            <div>from claw import Machine</div>
            <div>from claw.tools import slack, calendar</div>
            <div>&nbsp;</div>
            <div>m = Machine(</div>
            <div>&nbsp;&nbsp;goal=<span style={{ color: '#7a8f5a' }}>"summarize tuesday's standup"</span>,</div>
            <div>&nbsp;&nbsp;tools=[slack, calendar],</div>
            <div>&nbsp;&nbsp;budget=<span style={{ color: '#b85c3a' }}>0.05</span>,  <span style={{ color: 'var(--fg-dimmer)' }}># dollars</span></div>
            <div>)</div>
            <div>result = m.run()</div>
            <div style={{ color: 'var(--fg-dimmer)' }}># → ok · 3 steps · $0.012</div>
          </div>
        </div>
      </section>

      <section style={{ padding: '0 0 60px' }}>
        <SectionHead cmd="ps aux | grep projects" count={grid.length} file="~/lab/" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--rule)' }}>
          {grid.map((p, i) => (
            <div key={p[0]} style={{
              padding: 22,
              borderRight: (i + 1) % 3 !== 0 ? '1px solid var(--rule)' : 'none',
              borderBottom: i < grid.length - 3 ? '1px solid var(--rule)' : 'none',
              fontFamily: 'var(--mono)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <span style={{ color: p[4] === 'running' ? '#7a8f5a' : p[4] === 'paused' ? 'var(--brass)' : 'var(--fg-dimmer)', fontSize: 10 }}>●</span>
                <span style={{ fontSize: 10, color: 'var(--fg-dimmer)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{p[4]}</span>
                <span style={{ flex: 1 }} />
                <span style={{ fontSize: 10, color: 'var(--fg-dimmer)' }}>{p[3]}★</span>
              </div>
              <div style={{ fontSize: 15, color: 'var(--brass)', fontWeight: 600, marginBottom: 8 }}>{p[0]}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-dim)', lineHeight: 1.6, marginBottom: 14 }}>{p[1]}</div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                {p[2].map(t => <Tag key={t}>{t}</Tag>)}
              </div>
            </div>
          ))}
        </div>
      </section>
    </PageShell>
  );
};

window.Projects = Projects;