// TerminalShowcase.jsx — CLI alias demo with the pipeline underneath
const TerminalShowcase = () => {
  const [tab, setTab] = React.useState('grep');
  const tabs = {
    write: {
      cmd: "skardi write --slug=entity/alan-turing --title=\"Alan Turing\" \\\n  --page_type=entity --content='...'",
      out: [
        { t: '→ embedding via candle(all-MiniLM-L6-v2)', c: '#8ea3c0' },
        { t: '→ FTS index updated', c: '#8ea3c0' },
        { t: '✓ wrote entity/alan-turing (1 row, 23ms)', c: '#7ef3c4' },
      ],
      aliasFile: 'ctx.yaml',
      alias: 'aliases:\n  write: run wiki-write\n    --slug=$1 --title=$2 --page_type=$3 --content=$4',
      pipelineFile: 'pipelines/wiki-write.yaml',
      pipeline: [
        { t: 'kind: pipeline', c: '#7ec4ff' },
        { t: 'name: wiki-write', c: '#e6eef9' },
        { t: 'params:', c: '#7ec4ff' },
        { t: '  - { name: slug,      type: text, required: true }', c: '#c4d2e2' },
        { t: '  - { name: title,     type: text, required: true }', c: '#c4d2e2' },
        { t: '  - { name: page_type, type: text, required: true }', c: '#c4d2e2' },
        { t: '  - { name: content,   type: text, required: true }', c: '#c4d2e2' },
        { t: 'sql: |', c: '#7ec4ff' },
        { t: '  INSERT INTO wiki_pages', c: '#e6eef9' },
        { t: '    (slug, title, page_type, content, embedding)', c: '#c4d2e2' },
        { t: '  VALUES', c: '#e6eef9' },
        { t: '    (:slug, :title, :page_type, :content,', c: '#c4d2e2' },
        { t: '     candle(:content))', c: '#7ef3c4' },
        { t: '  ON CONFLICT(slug) DO UPDATE SET', c: '#e6eef9' },
        { t: '    title = excluded.title,', c: '#c4d2e2' },
        { t: '    content = excluded.content,', c: '#c4d2e2' },
        { t: '    embedding = excluded.embedding,', c: '#c4d2e2' },
        { t: '    updated_at = now()', c: '#c4d2e2' },
      ],
    },
    grep: {
      cmd: 'skardi grep "turing machine computation" --limit=10',
      out: [
        { t: '→ hybrid search: RRF(sqlite_fts, sqlite_knn)', c: '#8ea3c0' },
        { t: '', c: '' },
        { t: '┌────────────────────────────┬────────┬──────────┐', c: '#3a5578' },
        { t: '│ slug                       │ score  │ page_type│', c: '#8ea3c0' },
        { t: '├────────────────────────────┼────────┼──────────┤', c: '#3a5578' },
        { t: '│ entity/alan-turing         │ 0.9421 │ entity   │', c: '#c4d2e2' },
        { t: '│ concept/halting-problem    │ 0.8812 │ concept  │', c: '#c4d2e2' },
        { t: '│ concept/lambda-calculus    │ 0.7634 │ concept  │', c: '#c4d2e2' },
        { t: '└────────────────────────────┴────────┴──────────┘', c: '#3a5578' },
        { t: '3 rows · 41ms · sqlite_knn + sqlite_fts', c: '#6b7e9a' },
      ],
      aliasFile: 'ctx.yaml',
      alias: 'aliases:\n  grep: run wiki-search-hybrid --q=$1 --limit',
      pipelineFile: 'pipelines/wiki-search-hybrid.yaml',
      pipeline: [
        { t: 'kind: pipeline', c: '#7ec4ff' },
        { t: 'name: wiki-search-hybrid', c: '#e6eef9' },
        { t: 'params:', c: '#7ec4ff' },
        { t: '  - { name: q,     type: text, required: true }', c: '#c4d2e2' },
        { t: '  - { name: limit, type: int,  default: 10 }', c: '#c4d2e2' },
        { t: 'sql: |', c: '#7ec4ff' },
        { t: '  WITH fts AS (', c: '#e6eef9' },
        { t: '    SELECT slug, page_type,', c: '#c4d2e2' },
        { t: '           sqlite_fts(content, :q) AS s', c: '#7ef3c4' },
        { t: '    FROM wiki_pages ORDER BY s DESC LIMIT 50', c: '#c4d2e2' },
        { t: '  ), knn AS (', c: '#e6eef9' },
        { t: '    SELECT slug, page_type,', c: '#c4d2e2' },
        { t: '           sqlite_knn(embedding, candle(:q)) AS s', c: '#7ef3c4' },
        { t: '    FROM wiki_pages ORDER BY s ASC LIMIT 50', c: '#c4d2e2' },
        { t: '  )', c: '#e6eef9' },
        { t: '  SELECT slug, page_type,', c: '#c4d2e2' },
        { t: '         rrf(fts.s, knn.s) AS score', c: '#7ef3c4' },
        { t: '  FROM fts FULL OUTER JOIN knn USING (slug, page_type)', c: '#c4d2e2' },
        { t: '  ORDER BY score DESC LIMIT :limit', c: '#c4d2e2' },
      ],
    },
    open: {
      cmd: 'skardi open entity/alan-turing',
      out: [
        { t: '# Alan Turing', c: '#7ef3c4' },
        { t: '', c: '' },
        { t: 'British mathematician, computer scientist, logician,', c: '#c4d2e2' },
        { t: 'and cryptanalyst. Formalised the concepts of', c: '#c4d2e2' },
        { t: 'algorithm and computation with the Turing machine...', c: '#c4d2e2' },
        { t: '', c: '' },
        { t: '// updated 2026-04-21 · 2.3 KB · 1 backlink', c: '#6b7e9a' },
      ],
      aliasFile: 'ctx.yaml',
      alias: 'aliases:\n  open: run wiki-open --slug=$1',
      pipelineFile: 'pipelines/wiki-open.yaml',
      pipeline: [
        { t: 'kind: pipeline', c: '#7ec4ff' },
        { t: 'name: wiki-open', c: '#e6eef9' },
        { t: 'params:', c: '#7ec4ff' },
        { t: '  - { name: slug, type: text, required: true }', c: '#c4d2e2' },
        { t: 'format: markdown', c: '#7ec4ff' },
        { t: 'sql: |', c: '#7ec4ff' },
        { t: '  SELECT title, page_type, content,', c: '#e6eef9' },
        { t: '         updated_at, size_bytes,', c: '#c4d2e2' },
        { t: '         (SELECT count(*) FROM wiki_backlinks b', c: '#c4d2e2' },
        { t: '          WHERE b.target = p.slug) AS backlinks', c: '#c4d2e2' },
        { t: '  FROM wiki_pages p', c: '#c4d2e2' },
        { t: '  WHERE slug = :slug', c: '#7ef3c4' },
      ],
    },
    log: {
      cmd: 'skardi log --event_type=ingest --slug=entity/alan-turing --message="..."',
      out: [
        { t: '✓ logged · event_id = 0x8f3a1c...', c: '#7ef3c4' },
        { t: '  agent_id    = claude-sonnet-4',         c: '#8ea3c0' },
        { t: '  session_id  = sess_10472',              c: '#8ea3c0' },
        { t: '  tool_call   = skardi.log',              c: '#8ea3c0' },
        { t: '  timestamp   = 2026-04-21T13:02:14.442Z',c: '#8ea3c0' },
      ],
      aliasFile: 'ctx.yaml',
      alias: 'aliases:\n  log: run wiki-log\n    --event_type=$1 --slug=$2 --message=$3',
      pipelineFile: 'pipelines/wiki-log.yaml',
      pipeline: [
        { t: 'kind: pipeline', c: '#7ec4ff' },
        { t: 'name: wiki-log', c: '#e6eef9' },
        { t: 'params:', c: '#7ec4ff' },
        { t: '  - { name: event_type, type: text, required: true }', c: '#c4d2e2' },
        { t: '  - { name: slug,       type: text, required: true }', c: '#c4d2e2' },
        { t: '  - { name: message,    type: text, required: true }', c: '#c4d2e2' },
        { t: 'sql: |', c: '#7ec4ff' },
        { t: '  INSERT INTO wiki_events (', c: '#e6eef9' },
        { t: '    event_id, agent_id, session_id,', c: '#c4d2e2' },
        { t: '    tool_call_id, event_type, slug,', c: '#c4d2e2' },
        { t: '    message, timestamp', c: '#c4d2e2' },
        { t: '  ) VALUES (', c: '#e6eef9' },
        { t: '    gen_random_id(),', c: '#c4d2e2' },
        { t: '    $agent_id, $session_id, $tool_call_id,', c: '#7ef3c4' },
        { t: '    :event_type, :slug, :message, now()', c: '#c4d2e2' },
        { t: '  ) RETURNING event_id', c: '#e6eef9' },
      ],
    },
  };
  const active = tabs[tab];
  const tabList = [
    { id: 'write', label: 'write' },
    { id: 'grep',  label: 'grep (hybrid)' },
    { id: 'open',  label: 'open' },
    { id: 'log',   label: 'log' },
  ];
  return (
    <section style={{ padding: '80px 32px 120px', background: '#060b14' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '420px 1fr', gap: 64, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>// demo · cli aliases</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 42, fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, marginBottom: 20,
              color: '#e6eef9',
            }}>Any pipeline, any verb your agent needs.</h2>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.65,
              color: '#8ea3c0', margin: 0, marginBottom: 28,
            }}>
              User-defined aliases let you project any SQL pipeline as the exact shell verb your
              agent wants to reach for — <span style={{color:'#c4d2e2'}}>grep</span>,{' '}
              <span style={{color:'#c4d2e2'}}>open</span>, <span style={{color:'#c4d2e2'}}>write</span>,{' '}
              <span style={{color:'#c4d2e2'}}>log</span>, or anything else you'd want in your
              agent's vocabulary. One pipeline YAML, one alias line, and the binary changes shape
              to match the task.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {tabList.map((t) => (
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  textAlign: 'left',
                  padding: '10px 14px',
                  borderRadius: 6,
                  background: tab === t.id ? 'rgba(46,232,154,0.08)' : 'transparent',
                  border: `1px solid ${tab === t.id ? 'rgba(46,232,154,0.25)' : 'rgba(125,211,252,0.06)'}`,
                  color: tab === t.id ? '#2ee89a' : '#c4d2e2',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
                  cursor: 'pointer',
                  transition: 'all 150ms ease-out',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{ color: tab === t.id ? '#2ee89a' : '#6b7e9a' }}>$</span>
                  skardi {t.label}
                </button>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{
            background: '#0a1220',
            borderRadius: 12,
            border: '1px solid rgba(125,211,252,0.1)',
            boxShadow: '0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(46,232,154,0.08)',
            overflow: 'hidden',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '12px 16px',
              background: '#060b14',
              borderBottom: '1px solid rgba(125,211,252,0.08)',
            }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e04141' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e0a81a' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#1da869' }} />
              <span style={{ marginLeft: 16, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#8ea3c0' }}>
                what the agent sees
              </span>
              <span style={{ flex: 1 }} />
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                padding: '3px 8px', borderRadius: 3,
                background: 'rgba(46,232,154,0.1)', color: '#2ee89a',
                letterSpacing: '0.06em', fontWeight: 500,
              }}>● LIVE</span>
            </div>
            <div style={{
              padding: '22px 24px',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 13, lineHeight: 1.75,
              color: '#e6eef9', minHeight: 220,
            }}>
              <div style={{ color: '#6b7e9a', marginBottom: 10 }}># agent calls skardi via shell</div>
              <div style={{ whiteSpace: 'pre-wrap', marginBottom: 14 }}>
                <span style={{ color: '#2ee89a' }}>$ </span>{active.cmd}
              </div>
              {active.out.map((line, j) => (
                <div key={j} style={{ color: line.c || '#8ea3c0', minHeight: '1em', whiteSpace: 'pre' }}>{line.t || '\u00A0'}</div>
              ))}
            </div>
          </div>

          {/* what's running underneath: alias + pipeline YAML */}
          <div style={{
            background: '#0a1220',
            borderRadius: 12,
            border: '1px solid rgba(125,211,252,0.1)',
            overflow: 'hidden',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 16px',
              background: '#060b14',
              borderBottom: '1px solid rgba(125,211,252,0.08)',
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7ec4ff" strokeWidth="1.6">
                <polyline points="16 18 22 12 16 6" />
                <polyline points="8 6 2 12 8 18" />
              </svg>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#c4d2e2', letterSpacing: '0.04em' }}>
                what's running underneath
              </span>
              <span style={{ flex: 1 }} />
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                padding: '3px 8px', borderRadius: 3,
                background: 'rgba(126,196,255,0.1)', color: '#7ec4ff',
                letterSpacing: '0.06em', fontWeight: 500,
              }}>PIPELINE + SQL</span>
            </div>

            <div style={{
              padding: '14px 24px 10px',
              borderBottom: '1px dashed rgba(125,211,252,0.08)',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12.5, lineHeight: 1.7,
            }}>
              <div style={{
                fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
                color: '#6b7e9a', marginBottom: 6,
              }}>// {active.aliasFile}</div>
              {active.alias.split('\n').map((line, j) => (
                <div key={j} style={{ color: '#c4d2e2', whiteSpace: 'pre' }}>{line}</div>
              ))}
            </div>

            <div style={{
              padding: '12px 24px 22px',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12.5, lineHeight: 1.7,
            }}>
              <div style={{
                fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
                color: '#6b7e9a', marginBottom: 6,
              }}>// {active.pipelineFile}</div>
              {active.pipeline.map((line, j) => (
                <div key={j} style={{ color: line.c || '#c4d2e2', whiteSpace: 'pre', minHeight: '1em' }}>{line.t}</div>
              ))}
            </div>
          </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.TerminalShowcase = TerminalShowcase;