// ThreeGaps.jsx — data plumbed for humans leaves an agent blind, illiterate,
// and ungoverned, even once it's "connected" via MCP.
const ThreeGaps = () => {
  const gaps = [
    {
      n: '01',
      title: "Can't see it all",
      body: 'Every call returns one fragment. The agent stitches partial answers across sources and never holds the whole picture — so it fills the gaps with guesses, and the guesses are wrong.',
      mono: 'GET /data → 1 of N fragments',
    },
    {
      n: '02',
      title: "Can't understand it",
      body: 'It sees raw column names and IDs, not what they mean. status = 3 and owner_id carry no business meaning a model can reason about — the schema describes shape, never intent.',
      mono: 'owner_id: "u_8f2a" → ???',
    },
    {
      n: '03',
      title: "Can't govern it",
      body: 'Permissions blur across every source it touches. No one can say what a given agent is allowed to reach — or reconstruct what it actually did after the fact.',
      mono: 'scope: undefined · audit: none',
    },
  ];
  return (
    <section style={{ padding: '110px 32px 100px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 800, margin: '0 auto 64px', textAlign: 'center' }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 18,
          }}>// the gap</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.05, margin: 0, marginBottom: 22,
            color: '#e6eef9', textWrap: 'balance',
          }}>
            Connected isn't the same as capable.
          </h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: '#8ea3c0', margin: 0, textWrap: 'pretty',
          }}>
            You can wire an agent to your data with MCP today. But data plumbed for <em>people</em> —
            dashboards, schemas, point-to-point connectors — leaves an agent{' '}
            <span style={{color:'#e6eef9'}}>blind, illiterate, and ungoverned</span>.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(125,211,252,0.08)', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(125,211,252,0.08)' }}>
          {gaps.map((g) => (
            <div key={g.n} style={{
              padding: '40px 32px',
              background: '#0a1220',
              position: 'relative',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 52, fontWeight: 300,
                color: 'transparent',
                WebkitTextStroke: '1px rgba(224,108,108,0.4)',
                letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 22,
              }}>{g.n}</div>
              <h3 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.015em', lineHeight: 1.2,
                margin: 0, marginBottom: 14, color: '#e6eef9',
              }}>{g.title}</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
                margin: 0, marginBottom: 24, color: '#8ea3c0',
              }}>{g.body}</p>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
                padding: '8px 12px',
                background: 'rgba(224,108,108,0.06)',
                border: '1px solid rgba(224,108,108,0.18)',
                borderRadius: 6,
                color: '#e8a0a0',
                display: 'inline-block',
              }}>{g.mono}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.ThreeGaps = ThreeGaps;