// Comparison.jsx — "Why Skardi" capability matrix vs. today's approaches (deck p.13)
// Edit COLUMNS / ROWS below to change the table — verdicts are 'yes' | 'no' | 'partial'.
const Comparison = () => {
  const COLUMNS = [
    { key: 'skardi',      title: 'Skardi',                sub: '',                              highlight: true },
    { key: 'warehouses',  title: 'Data warehouses',       sub: 'Databricks · Snowflake' },
    { key: 'connectors',  title: 'Connectors / retrieval', sub: 'Glean · Composio · Airbyte' },
  ];
  const ROWS = [
    {
      capability: 'Agent-native (built for agent access)',
      verdicts: {
        skardi:     { mark: 'yes' },
        warehouses: { mark: 'no',      note: 'Built for BI / analysts' },
        connectors: { mark: 'partial', note: 'Integration only' },
      },
    },
    {
      capability: 'Writable + custom data (agent-defined / processed)',
      verdicts: {
        skardi:     { mark: 'yes' },
        warehouses: { mark: 'no',      note: 'Mostly read-only' },
        connectors: { mark: 'no',      note: 'Read-only sync' },
      },
    },
    {
      capability: 'Unified data-layer interface (one entry point)',
      verdicts: {
        skardi:     { mark: 'yes' },
        warehouses: { mark: 'partial', note: 'Warehouse only' },
        connectors: { mark: 'no',      note: 'Point-to-point' },
      },
    },
    {
      capability: 'Authorization checks + full traceability (the security floor)',
      verdicts: {
        skardi:     { mark: 'yes' },
        warehouses: { mark: 'partial', note: 'Table-level perms' },
        connectors: { mark: 'no',      note: 'No agent controls' },
      },
    },
  ];
  const markStyle = {
    yes:     { glyph: '✓', color: '#2ee89a' },
    no:      { glyph: '×', color: '#e07a7a' },
    partial: { glyph: '△', color: '#e0a81a' },
  };
  const gridColumns = '1.6fr repeat(3, 1fr)';
  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={{ marginBottom: 56 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>// why skardi</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',
          }}>Agent-native data platform vs. today's approaches.</h2>
        </div>

        <div style={{ overflowX: 'auto' }}>
          <div style={{
            border: '1px solid rgba(125,211,252,0.08)',
            borderRadius: 12, overflow: 'hidden',
            background: '#0a1220',
            minWidth: 760,
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: gridColumns,
              padding: '16px 22px',
              background: '#060b14',
              borderBottom: '1px solid rgba(125,211,252,0.08)',
              alignItems: 'start', gap: 16,
            }}>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700,
                color: '#e6eef9', letterSpacing: '-0.01em',
              }}>Capability</div>
              {COLUMNS.map(col => (
                <div key={col.key} style={{ textAlign: 'center' }}>
                  <div style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700,
                    color: col.highlight ? '#2ee89a' : '#e6eef9', letterSpacing: '-0.01em',
                  }}>{col.title}</div>
                  {col.sub && <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                    color: '#6b7e9a', marginTop: 4, letterSpacing: '0.02em',
                  }}>{col.sub}</div>}
                </div>
              ))}
            </div>
            {ROWS.map((row, i) => (
              <div key={row.capability} style={{
                display: 'grid', gridTemplateColumns: gridColumns,
                padding: '18px 22px',
                background: i % 2 === 0 ? '#0a1220' : '#0e1a2e',
                borderBottom: i < ROWS.length - 1 ? '1px solid rgba(125,211,252,0.04)' : 'none',
                alignItems: 'center', gap: 16,
              }}>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 500,
                  color: '#e6eef9', lineHeight: 1.45, letterSpacing: '-0.01em',
                }}>{row.capability}</div>
                {COLUMNS.map(col => {
                  const v = row.verdicts[col.key];
                  const st = markStyle[v.mark];
                  return (
                    <div key={col.key} style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                      background: col.highlight ? 'rgba(46,232,154,0.05)' : 'transparent',
                      borderRadius: 6, alignSelf: 'stretch',
                    }}>
                      <span style={{
                        fontFamily: 'JetBrains Mono, monospace', fontSize: 16, fontWeight: 700,
                        color: st.color, lineHeight: 1,
                      }}>{st.glyph}</span>
                      {v.note && <span style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.4,
                        color: '#8ea3c0',
                      }}>{v.note}</span>}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </div>

        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.6,
          color: '#8ea3c0', margin: '32px 0 0', textWrap: 'balance',
        }}>
          The only <span style={{ color: '#2ee89a', fontWeight: 600 }}>writable, governable, unified</span>{' '}
          data layer built for agents — the foundation of the agent stack.
        </p>
      </div>
    </section>
  );
};

window.Comparison = Comparison;