// Sources.jsx — data-sources table from README
const Sources = () => {
  const sources = [
    { type: 'CSV',           crud: 'Read',     desc: 'Local or remote CSV files' },
    { type: 'Parquet',       crud: 'Read',     desc: 'Local or remote Parquet files' },
    { type: 'JSON / NDJSON', crud: 'Read',     desc: 'Local or remote JSON files' },
    { type: 'PostgreSQL',    crud: 'Full',     desc: 'Table or catalog registration, pgvector KNN' },
    { type: 'MySQL',         crud: 'Full',     desc: 'Table or catalog registration' },
    { type: 'SQLite',        crud: 'Full',     desc: 'Table or catalog, sqlite-vec KNN, FTS' },
    { type: 'MongoDB',       crud: 'Full',     desc: 'Collections with point lookups' },
    { type: 'Redis',         crud: 'Full',     desc: 'Hashes mapped to SQL rows' },
    { type: 'SeekDB',        crud: 'Full',     desc: 'MySQL-wire CRUD, FULLTEXT FTS, HNSW VECTOR KNN' },
    { type: 'Apache Iceberg',crud: 'Read',     desc: 'Schema evolution, partition pruning' },
    { type: 'Lance',         crud: 'Read / job-write', desc: 'KNN vector search, BM25 FTS; job destination' },
    { type: 'S3 / GCS / Azure', crud: 'Read',  desc: 'CSV, Parquet, Lance from object stores' },
  ];
  return (
    <section style={{ padding: '100px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>// supported data sources</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',
          }}>Every major source. One join.</h2>
        </div>
        <div style={{
          border: '1px solid rgba(125,211,252,0.08)',
          borderRadius: 12, overflow: 'hidden',
          background: '#0a1220',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr 2.4fr',
            padding: '14px 22px',
            background: '#060b14',
            borderBottom: '1px solid rgba(125,211,252,0.08)',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
            color: '#8ea3c0',
          }}>
            <div>source</div><div>crud</div><div>description</div>
          </div>
          {sources.map((s, i) => (
            <div key={s.type} style={{
              display: 'grid', gridTemplateColumns: '1.2fr 1fr 2.4fr',
              padding: '16px 22px',
              borderBottom: i < sources.length - 1 ? '1px solid rgba(125,211,252,0.04)' : 'none',
              alignItems: 'center',
              fontFamily: 'Inter, sans-serif', fontSize: 14,
            }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#e6eef9', fontWeight: 500 }}>{s.type}</div>
              <div>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  padding: '3px 8px', borderRadius: 3,
                  background: s.crud === 'Full' ? 'rgba(46,232,154,0.1)' : 'rgba(26,143,224,0.1)',
                  color: s.crud === 'Full' ? '#2ee89a' : '#7ec4ff',
                  letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500,
                }}>{s.crud}</span>
              </div>
              <div style={{ color: '#8ea3c0', lineHeight: 1.5 }}>{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Sources = Sources;