// Surfaces.jsx — the three delivery surfaces: CLI / Server / Cloud
const Surfaces = () => {
  const surfaces = [
    {
      eye: '// skardi cloud',
      tag: 'WAITLIST',
      title: 'Managed workspaces, zero infra',
      body: 'Skardi Cloud runs the federated engine, pipelines, jobs, auth, and telemetry for you — multi-tenant isolation, per-workspace observability, and upgrades handled. Rolling invites; join the waitlist.',
      code: [
        { t: '# your workspace, provisioned', c: '#6b7e9a' },
        { t: '→ federated engine · online + offline pipelines', c: '#e6eef9' },
        { t: '→ better-auth sessions · OpenTelemetry built in', c: '#e6eef9' },
        { t: '', c: '' },
        { t: '# endpoints ready in minutes', c: '#6b7e9a' },
        { t: 'POST https://<ws>.skardi.cloud/<pipeline>/execute', c: '#7ef3c4' },
      ],
      href: 'Cloud.html',
      cta: 'Join the waitlist →',
    },
    {
      eye: '// skardi server',
      tag: 'SELF-HOST',
      title: 'Online serving + offline jobs, same YAML',
      body: 'Declarative pipelines served synchronously as parameterized REST endpoints. The same pipeline shape runs asynchronously as jobs — atomic commit into Lance or any read-write DB with a SQLite run ledger.',
      code: [
        { t: '# kind: pipeline — synchronous REST', c: '#6b7e9a' },
        { t: 'curl -X POST $WS/product-search/execute \\', c: '#e6eef9' },
        { t: '  -d \'{"brand": null, "max_price": 100.0}\'', c: '#e6eef9' },
        { t: '', c: '' },
        { t: '# kind: job — async commit into destination', c: '#6b7e9a' },
        { t: 'skardi job run backfill-to-lake --param from_date=2026-01-01', c: '#e6eef9' },
      ],
    },
    {
      eye: '// skardi cli',
      tag: 'AGENT-NATIVE',
      title: 'Drop into any agent with a Bash tool',
      body: 'Federated SQL across local and remote data — no server, no pre-registration. Declare pipeline verbs once, and any agent with a shell can call them. Claude Code, Cursor, custom loops.',
      code: [
        { t: '# ad-hoc SQL against any source', c: '#6b7e9a' },
        { t: 'skardi query --sql "SELECT * FROM \'s3://bucket/events.parquet\' LIMIT 10"', c: '#e6eef9' },
        { t: '', c: '' },
        { t: '# user-defined verb aliases', c: '#6b7e9a' },
        { t: 'skardi grep "turing machine computation" --limit=10', c: '#e6eef9' },
      ],
    },
  ];
  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: 64, maxWidth: 820 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>// three ways to ship</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 52px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.08, margin: 0, marginBottom: 20,
            color: '#e6eef9', textWrap: 'balance',
          }}>Cloud, self-hosted, or embedded in your agent.</h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.6,
            color: '#8ea3c0', margin: 0, maxWidth: 720,
          }}>
            A managed cloud workspace for teams that want the platform without the platform team. The same
            pipeline YAML runs synchronously as REST endpoints and asynchronously as batch jobs — and any
            of those can be called as a shell verb from any agent with a Bash tool.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {surfaces.map((s, i) => (
            <div key={s.title} style={{
              padding: 24, borderRadius: 14,
              background: '#0a1220',
              border: '1px solid rgba(125,211,252,0.08)',
              borderTop: i === 0 ? '1px solid rgba(46,232,154,0.55)' : '1px solid rgba(125,211,252,0.08)',
              display: 'flex', flexDirection: 'column',
              position: 'relative',
            }}>
              {i === 0 && (
                <span style={{
                  position: 'absolute', top: -10, right: 20,
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 600,
                  letterSpacing: '0.08em',
                  padding: '3px 10px', borderRadius: 9999,
                  background: 'linear-gradient(90deg,#2ec47a,#1a8fe0)',
                  color: '#fff',
                }}>RECOMMENDED</span>
              )}
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 14,
              }}>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
                  color: i === 0 ? '#2ee89a' : (i === 1 ? '#7ec4ff' : '#8ea3c0'),
                }}>{s.eye}</span>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 500,
                  letterSpacing: '0.08em',
                  padding: '2px 8px', borderRadius: 3,
                  border: '1px solid rgba(125,211,252,0.12)',
                  color: '#6b7e9a',
                }}>{s.tag}</span>
              </div>
              <h3 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 600,
                letterSpacing: '-0.015em', lineHeight: 1.25,
                margin: 0, marginBottom: 12, color: '#e6eef9',
              }}>{s.title}</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.6,
                margin: 0, marginBottom: 20, color: '#8ea3c0',
              }}>{s.body}</p>
              <div style={{
                padding: '14px 16px',
                background: '#060b14',
                border: '1px solid rgba(125,211,252,0.08)',
                borderRadius: 8,
                fontFamily: 'JetBrains Mono, monospace', fontSize: 12, lineHeight: 1.7,
                marginTop: 'auto',
                overflowX: 'auto',
              }}>
                {s.code.map((line, j) => (
                  <div key={j} style={{ color: line.c || '#8ea3c0', minHeight: '1em', whiteSpace: 'pre' }}>{line.t || '\u00A0'}</div>
                ))}
              </div>
              {s.href && (
                <a href={s.href} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  marginTop: 16,
                  fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
                  color: '#2ee89a', textDecoration: 'none',
                }}>{s.cta}</a>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Surfaces = Surfaces;