// Capabilities.jsx — feature grid from README "What's already in the box"
const Capabilities = () => {
  const groups = [
    {
      eye: '// engine',
      title: 'Engine',
      items: [
        ['Federated SQL', 'Postgres, MySQL, SQLite, MongoDB, Redis, SeekDB, Iceberg, Lance, S3/GCS/Azure, Parquet, CSV, JSON — all joinable in one query.'],
        ['Register by table or catalog', 'Expose a single named table, or load an entire database as a DataFusion catalog. One config line either way.'],
        ['Vector search', 'Native KNN via Lance, pg_knn (pgvector), sqlite_knn (sqlite-vec), SeekDB HNSW.'],
        ['Full-text search', 'Lance BM25 inverted indexes, pg_fts, sqlite_fts, SeekDB native FULLTEXT.'],
        ['Inline embeddings', 'candle() UDF runs inside SQL — content + vector stay on the same row, atomically.'],
        ['Hybrid search + ONNX', 'RRF merge of FTS + KNN in plain SQL, plus inline model predictions via onnx_predict.'],
      ],
    },
    {
      eye: '// agent-facing surfaces',
      title: 'Agent surfaces',
      items: [
        ['Declarative REST', 'YAML → parameterized HTTP endpoint with inferred request / response schema and a built-in dashboard.'],
        ['Batch jobs', 'Async pipelines commit to Lance or a DB destination with a SQLite run ledger and submit / poll / cancel.'],
        ['Shell verbs + aliases', 'skardi grep "…" → run wiki-search-hybrid. Collapses multi-line SQL into agent-ergonomic verbs.'],
        ['Auto knowledge base skill', 'One command turns a directory of docs into a hybrid-search RAG — wired as a skardi grep verb for Claude Code or Cursor.'],
      ],
    },
    {
      eye: '// ops',
      title: 'Ops & Cloud',
      items: [
        ['Managed on Skardi Cloud', 'A fully managed workspace — federated engine, pipelines, jobs, auth, telemetry — no infra team required. Waitlist is open.'],
        ['Session auth', 'Drop-in via better-auth, backed by a managed Postgres or SQLite.'],
        ['Observability', 'OpenTelemetry traces / metrics / logs with a pre-configured Grafana stack — per-workspace in cloud.'],
      ],
    },
  ];
  return (
    <section style={{ padding: '100px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 820, marginBottom: 64 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>// what's already in the box</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 52px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.08, margin: 0,
            color: '#e6eef9', textWrap: 'balance',
          }}>Federation, vectors, FTS, embeddings, jobs — shipping today.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 56 }}>
          {groups.map((g) => (
            <div key={g.title}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 24 }}>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
                  color: '#2ee89a',
                }}>{g.eye}</span>
                <span style={{ flex: 1, height: 1, background: 'rgba(125,211,252,0.1)' }} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
                {g.items.map(([h, body]) => (
                  <div key={h} style={{
                    padding: '20px 22px', borderRadius: 10,
                    background: '#0a1220',
                    border: '1px solid rgba(125,211,252,0.08)',
                  }}>
                    <h4 style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 600,
                      margin: 0, marginBottom: 8, color: '#e6eef9', letterSpacing: '-0.01em',
                    }}>{h}</h4>
                    <p style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55,
                      margin: 0, color: '#8ea3c0',
                    }}>{body}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Capabilities = Capabilities;