// WhyAgents.jsx — the "three deliberate choices" narrative
const WhyAgents = () => {
  const choices = [
    {
      n: '01',
      title: 'One engine over every source',
      body: 'DataFusion-based single-node federation. An agent can JOIN a CSV against Postgres against a Lance dataset — in one query, with no glue code.',
      mono: 'JOIN csv ⋈ postgres ⋈ lance',
    },
    {
      n: '02',
      title: 'Online serving, offline jobs — one shape',
      body: 'Pipelines serve parameterized SQL synchronously as REST endpoints; jobs run the same SQL asynchronously into a durable destination with a run ledger and atomic commit. Both shipping today.',
      mono: 'kind: pipeline  |  kind: job',
    },
    {
      n: '03',
      title: 'Managed workspaces, any agent',
      body: 'Skardi Cloud runs a production-grade workspace for you — federated engine, pipelines, jobs, auth, telemetry. Every pipeline shows up as REST, a shell verb, and soon a Claude skill or MCP tool.',
      mono: 'cloud · rest · shell · skills · mcp',
    },
  ];
  return (
    <section style={{ padding: '120px 32px 100px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          maxWidth: 780, margin: '0 auto 72px', textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 18,
          }}>// why spark for agents</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.05, margin: 0, marginBottom: 24,
            color: '#e6eef9', textWrap: 'balance',
          }}>
            Agents don't lack intelligence.<br/>
            <span style={{color:'#8ea3c0'}}>They lack data autonomy.</span>
          </h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: '#8ea3c0', margin: 0, textWrap: 'pretty',
          }}>
            Hand an LLM a raw schema dump and it hallucinates. Hand it a bag of bespoke REST
            endpoints and it gets lost. Hand it a vector store and it still can't JOIN.
            The gap isn't the model — it's that today's data stack was built for humans writing
            queries, not agents calling tools.
          </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)' }}>
          {choices.map((c) => (
            <div key={c.n} style={{
              padding: '40px 32px',
              background: '#0a1220',
              position: 'relative',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 52, fontWeight: 300,
                color: 'transparent',
                WebkitTextStroke: '1px rgba(46,232,154,0.35)',
                letterSpacing: '-0.02em',
                marginBottom: 24, lineHeight: 1,
              }}>{c.n}</div>
              <h3 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.015em', lineHeight: 1.2,
                margin: 0, marginBottom: 14, color: '#e6eef9',
              }}>{c.title}</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
                margin: 0, marginBottom: 24, color: '#8ea3c0',
              }}>{c.body}</p>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
                padding: '8px 12px',
                background: 'rgba(29,168,105,0.06)',
                border: '1px solid rgba(46,232,154,0.15)',
                borderRadius: 6,
                color: '#7ef3c4',
                display: 'inline-block',
              }}>{c.mono}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.WhyAgents = WhyAgents;