// Roadmap.jsx — public roadmap from README
const Roadmap = () => {
  const items = [
    { s: 'in-progress', t: 'Skardi Cloud',             d: 'Fully managed workspaces — federated engine, pipelines, jobs, auth, telemetry. Waitlist open, rolling invites to design partners.' },
    { s: 'shipped',     t: 'Federated SQL engine',    d: 'DataFusion single-node federation across 12+ sources: Postgres, MySQL, SQLite, Mongo, Redis, SeekDB, Iceberg, Lance, object storage.' },
    { s: 'shipped',     t: 'Online serving',          d: 'skardi-server — pipeline YAML → REST, inferred schemas, built-in dashboard.' },
    { s: 'shipped',     t: 'Offline jobs',            d: 'Async kind: job batch execution — submit / poll / cancel. Lance + SQL-DML destinations, SQLite run ledger. #98' },
    { s: 'shipped',     t: 'Vector + full-text',      d: 'pg_knn, sqlite_knn, Lance KNN, SeekDB HNSW · pg_fts, sqlite_fts, Lance BM25.' },
    { s: 'shipped',     t: 'Inline embeddings + ONNX', d: 'candle() UDF for GGUF / Candle / remote embed APIs, and onnx_predict for model inference — both inside SQL.' },
    { s: 'shipped',     t: 'Shell verbs + aliases',   d: 'skardi run <pipeline> and user-defined verb aliases — one-line wiring into Claude Code, Cursor, any Bash-capable agent. #90' },
    { s: 'shipped',     t: 'Session auth',            d: 'Drop-in better-auth backed by SQLite; managed per-workspace in cloud.' },
    { s: 'shipped',     t: 'Observability',           d: 'OpenTelemetry traces / metrics / logs with a pre-configured Grafana stack.' },
    { s: 'planned',     t: 'Skills generator',        d: 'skardi skills generate — one Markdown skill per pipeline for Claude auto-discovery.' },
    { s: 'planned',     t: 'MCP binding',             d: 'Same pipeline YAML projected to MCP tools for non-Claude hosts.' },
    { s: 'planned',     t: 'Memory primitive',        d: 'Hybrid access + TTL + provenance + consolidation collapsed into one declarative macro.' },
    { s: 'planned',     t: 'Catalog with semantics',  d: 'NL description on catalog / table / column; agent-callable describe pipeline.' },
    { s: 'planned',     t: 'Lineage + agent identity', d: 'agent_id, session_id, tool_call_id on every write; client identity injected into SQL context vars.' },
    { s: 'planned',     t: 'Snapshot-as-branch',      d: 'Iceberg / Lance-backed; git checkout-like semantics for destructive agent experiments.' },
  ];
  const statusStyle = {
    'shipped':     { color: '#2ee89a', bg: 'rgba(46,232,154,0.1)',  border: 'rgba(46,232,154,0.25)', glyph: '✓', label: 'shipped' },
    'in-progress': { color: '#e0a81a', bg: 'rgba(224,168,26,0.1)',  border: 'rgba(224,168,26,0.25)', glyph: '◐', label: 'in progress' },
    'planned':     { color: '#8ea3c0', bg: 'rgba(125,211,252,0.06)', border: 'rgba(125,211,252,0.12)', glyph: '○', label: 'planned' },
  };
  return (
    <section style={{ padding: '100px 32px', background: '#060b14', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>// public roadmap</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 52px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.05, margin: 0,
              color: '#e6eef9', textWrap: 'balance',
            }}>Built in public. Help wanted.</h2>
          </div>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.65,
            color: '#8ea3c0', margin: 0, justifySelf: 'end', maxWidth: 460,
          }}>
            The cloud workspace, federation engine, and dual-surface pipelines are live today.
            Skills, MCP, memory, and lineage primitives are landing next — talk to us if you want
            to co-design a POC.
          </p>
        </div>

        <div style={{
          border: '1px solid rgba(125,211,252,0.08)',
          borderRadius: 12, overflow: 'hidden',
        }}>
          {items.map((item, idx) => {
            const st = statusStyle[item.s];
            return (
              <div key={item.t} style={{
                display: 'grid', gridTemplateColumns: '160px 1fr 1.4fr',
                padding: '18px 22px',
                background: idx % 2 === 0 ? '#0a1220' : '#0e1a2e',
                borderBottom: idx < items.length - 1 ? '1px solid rgba(125,211,252,0.06)' : 'none',
                alignItems: 'center', gap: 24,
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '4px 10px',
                  border: `1px solid ${st.border}`,
                  background: st.bg,
                  borderRadius: 4,
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500,
                  color: st.color, justifySelf: 'start',
                }}>
                  <span>{st.glyph}</span>{st.label}
                </div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
                  color: '#e6eef9', letterSpacing: '-0.01em',
                }}>{item.t}</div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55,
                  color: '#8ea3c0',
                }}>{item.d}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

window.Roadmap = Roadmap;