// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Asset graph + Integrations + Pricing + CTA    ║
// ╚═══════════════════════════════════════════════════════════╝

// ── ASSET GRAPH (spatial chassis preview) ────────────
const GraphSection = () => {
  const nodes = React.useMemo(() => {
    const seed = (s) => { let x = s; return () => { x = (x * 9301 + 49297) % 233280; return x / 233280; }; };
    const r = seed(7);
    const n = [];
    const tiers = [
      { y: 90,  count: 4, kind: 'EXT' },
      { y: 200, count: 7, kind: 'API' },
      { y: 310, count: 10,kind: 'SVC' },
      { y: 420, count: 14,kind: 'DB' },
    ];
    let id = 0;
    tiers.forEach(t => {
      for (let i = 0; i < t.count; i++) {
        const x = 60 + (i + 0.5) * (940 / t.count) + (r() - 0.5) * 30;
        n.push({ id: id++, x, y: t.y + (r() - 0.5) * 20, kind: t.kind, hot: r() > 0.86, crit: r() > 0.94 });
      }
    });
    return n;
  }, []);
  const edges = React.useMemo(() => {
    const seed = (s) => { let x = s; return () => { x = (x * 9301 + 49297) % 233280; return x / 233280; }; };
    const r = seed(13);
    const e = [];
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        if (Math.abs(nodes[i].y - nodes[j].y) > 60 && Math.abs(nodes[i].y - nodes[j].y) < 130 && r() < 0.18) e.push([i, j]);
      }
    }
    return e;
  }, [nodes]);
  return (
    <section style={{ borderBottom: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)' }}>
      <div className="wrap">
        <SectionHead num="§06" label="Spatial · Asset graph" desc="Asset graph product surface"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', paddingTop: 48, paddingBottom: 48, gap: 32 }}>
          <div>
            <h2 className="display-h" style={{ fontSize: 'clamp(36px,4.5vw,60px)' }}>
              See your surface<br/>
              <span className="it">like an attacker.</span>
            </h2>
            <div style={{ marginTop: 18, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)' }}>
              The Asset Graph maps every endpoint, repo, secret, and trust
              edge into a single navigable territory. Hot nodes glow. Critical
              paths burn. Reachability is scored, not assumed.
            </div>
            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid var(--v4-line)' }}>
              {[
                ['GRAPH', 'ASSET CONTEXT'],
                ['LIVE', 'PRODUCT SURFACE'],
                ['RISK', 'REACHABILITY'],
                ['FLOW', 'DEPENDENCIES'],
              ].map(([n, l], i) => (
                <div key={l} style={{ padding: '14px 0', borderBottom: '1px solid var(--v4-line)', borderRight: (i % 2 === 0) ? '1px solid var(--v4-line)' : 'none', paddingLeft: i % 2 === 0 ? 0 : 18, paddingRight: i % 2 === 0 ? 18 : 0 }}>
                  <div className="disp" style={{ fontSize: 30, color: 'var(--v4-text)' }}>{n}</div>
                  <div className="eyebrow" style={{ fontSize: 9, marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ border: '1px solid var(--v4-line)', background: 'var(--v4-bg)', position: 'relative' }}>
            <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--v4-line)', display: 'flex', gap: 12, alignItems: 'baseline', fontFamily: 'var(--v4-mono)', fontSize: 10 }}>
              <span style={{ color: 'var(--v4-signal)', letterSpacing: '0.16em', fontWeight: 600 }}>ASSET GRAPH · KENSAI</span>
              <span style={{ flex: 1 }}/>
              <span className="kbd">+</span><span className="kbd">−</span>
              <span className="kbd">F</span><span style={{ color: 'var(--v4-mute)' }}>fit</span>
            </div>
            <svg width="100%" viewBox="0 0 1000 500" style={{ display: 'block' }}>
              {/* tier labels */}
              {[['EXTERNAL', 90], ['API', 200], ['SERVICES', 310], ['DATA', 420]].map(([l, y]) => (
                <g key={l}>
                  <line x1="40" x2="960" y1={y - 30} y2={y - 30} stroke="var(--v4-line)" strokeWidth="0.7" strokeDasharray="2 4"/>
                  <text x="46" y={y - 36} fontFamily="var(--v4-mono)" fontSize="8" letterSpacing="2.6" fill="var(--v4-faint)">{l}</text>
                </g>
              ))}
              {edges.map(([a, b], i) => (
                <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
                      stroke={nodes[a].crit || nodes[b].crit ? 'rgba(239,106,90,0.4)' : nodes[a].hot || nodes[b].hot ? 'rgba(232,200,125,0.3)' : 'rgba(255,255,255,0.06)'}
                      strokeWidth="0.7"/>
              ))}
              {nodes.map(n => (
                <g key={n.id}>
                  <circle cx={n.x} cy={n.y} r={n.crit ? 5 : n.hot ? 4 : 2.5}
                          fill={n.crit ? 'var(--v4-crit)' : n.hot ? 'var(--v4-signal)' : 'var(--v4-text)'}
                          opacity={n.crit ? 1 : n.hot ? 0.9 : 0.6}/>
                  {n.crit && <circle cx={n.x} cy={n.y} r="9" fill="none" stroke="var(--v4-crit)" strokeWidth="0.6" opacity="0.6"/>}
                </g>
              ))}
            </svg>
            <div style={{ padding: '8px 14px', borderTop: '1px solid var(--v4-line)', display: 'flex', gap: 18, alignItems: 'center', fontFamily: 'var(--v4-mono)', fontSize: 9.5, color: 'var(--v4-mute)', letterSpacing: '0.14em' }}>
              <span><span style={{ color: 'var(--v4-text)' }}>● </span>ASSET</span>
              <span><span style={{ color: 'var(--v4-signal)' }}>● </span>HOT</span>
              <span><span style={{ color: 'var(--v4-crit)' }}>● </span>CRITICAL PATH</span>
              <span style={{ flex: 1 }}/>
              <span>FIG. 06 · SPATIAL CHASSIS</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── INTEGRATIONS / MCP ───────────────────────────────
const IntegrationsSection = () => (
  <section style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§07" label="Platform · MCP Suite · Integrations" desc="Wire Kensai into anything"/>
      <div style={{ paddingTop: 48, paddingBottom: 56 }}>
        <h2 className="display-h" style={{ fontSize: 'clamp(36px,4.5vw,60px)', maxWidth: 980 }}>
          Speak <span className="it signal">MCP.</span> Speak SARIF.<br/>
          Speak <span className="it">whatever your stack speaks.</span>
        </h2>
        <div style={{ marginTop: 20, fontSize: 14.5, color: 'var(--v4-dim)', lineHeight: 1.7, maxWidth: 720 }}>
          The Kensai MCP Suite turns the platform into a tool any LLM can call —
          Claude, ChatGPT, Cursor, Copilot, your in-house agent. SARIF in, JSON
          out. Findings, scans, hunts, governance, billing — all addressable.
        </div>

        <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', borderTop: '1px solid var(--v4-line)', borderLeft: '1px solid var(--v4-line)' }}>
          {[
            'GITHUB','GITLAB','BITBUCKET','JIRA','LINEAR','SLACK','PAGERDUTY','OPSGENIE',
            'SPLUNK','DATADOG','SENTRY','ELASTIC','SUMOLOGIC','SNYK','SEMGREP','TRIVY',
            'AWS','GCP','AZURE','CLOUDFLARE','VERCEL','FASTLY','OKTA','AUTH0',
            'HACKERONE','BUGCROWD','INTIGRITI','YESWEHACK','CLAUDE','OPENAI','CURSOR','MCP',
          ].map(b => (
            <div key={b} style={{ padding: '22px 14px', borderRight: '1px solid var(--v4-line)', borderBottom: '1px solid var(--v4-line)', textAlign: 'center', fontFamily: 'var(--v4-mono)', fontSize: 10.5, letterSpacing: '0.18em', fontWeight: 600, color: 'var(--v4-dim)', cursor: 'pointer' }}>{b}</div>
          ))}
        </div>

        {/* Code snippet */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', marginTop: 40, gap: 0, border: '1px solid var(--v4-line)' }}>
          <div style={{ padding: '24px 26px', borderRight: '1px solid var(--v4-line)' }}>
            <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>MCP · /findings.list</div>
            <div className="disp" style={{ fontSize: 24, color: 'var(--v4-text)', marginTop: 10, lineHeight: 1.3 }}>
              "Hey Claude, what bled overnight?"
            </div>
            <div style={{ fontSize: 13, color: 'var(--v4-dim)', marginTop: 12, lineHeight: 1.6 }}>
              Your AppSec lead can ask plain-English questions of the platform. Kensai responds with structured findings, gates, and remediation steps — auditable, attributable, and never made up.
            </div>
          </div>
          <pre style={{ margin: 0, padding: '22px 26px', fontFamily: 'var(--v4-mono)', fontSize: 11.5, color: 'var(--v4-dim)', background: 'var(--v4-bg)', overflow: 'auto', lineHeight: 1.65 }}>
{`$ kensai mcp call findings.list \\
    --tenant quanta-labs \\
    --since '6h ago' \\
    --severity '>=high'

`}<span style={{ color: 'var(--v4-mute)' }}>{`# 4 findings · gate-verified
`}</span>{`F-1824  `}<span style={{ color: 'var(--v4-crit)' }}>CRITICAL</span>{`  G3  SQL injection · /api/users/login
F-1819  `}<span style={{ color: 'var(--v4-crit)' }}>CRITICAL</span>{`  G3  RCE deserialization · /jobs/run
F-1823  `}<span style={{ color: 'var(--v4-high)' }}>HIGH    </span>{`  G5  IDOR · /orgs/:id/billing
F-1822  `}<span style={{ color: 'var(--v4-high)' }}>HIGH    </span>{`  G3  Path traversal · /files/:name

`}<span style={{ color: 'var(--v4-mute)' }}>{`# evidence: oci://kensai-evidence/F-1824/poc.har
# autofix: PR #4421 opened · qlabs/api
# bounty:  review path available when a finding is ready`}</span>{`
`}<span style={{ color: 'var(--v4-signal)' }}>● next: type 'forge F-1824' to advance to G4</span></pre>
        </div>
      </div>
    </div>
  </section>
);

// ── PRICING ──────────────────────────────────────────
const PricingSection = () => (
  <section id="pricing" style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§08" label="Commercial · Pricing" desc="Pay for posture · not seats"/>
      <div style={{ paddingTop: 48, paddingBottom: 16 }}>
        <h2 className="display-h" style={{ fontSize: 'clamp(40px,5vw,72px)' }}>
          One platform.<br/>
          <span className="it">Three intensities.</span>
        </h2>
        <div style={{ marginTop: 18, fontSize: 14.5, color: 'var(--v4-dim)', lineHeight: 1.7, maxWidth: 720 }}>
          Kensai prices on assets monitored and bounty submissions, not on seats.
          Add as many engineers as you want. We win when you ship fixes, not
          when you hire reviewers.
        </div>
      </div>

      <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--v4-line)' }}>
        {[
          { t:'OPERATOR',   sub:'Single-team', price:'Custom', unit:'', desc:'Early access for focused teams.', cta:'Start the conversation' },
          { t:'ENTERPRISE', sub:'Multi-team · default',  price:'Custom',unit:'', desc:'Broader product rollout, integrations, and workflow support.', cta:'Talk to sales', accent:true },
          { t:'SOVEREIGN',  sub:'Regulated · public sector', price:'Custom',  unit:'',     desc:'Deployment shape discussed directly, based on need.', cta:'Request brief' },
        ].map((p, i) => (
          <div key={p.t} style={{
            padding: '28px 28px 32px',
            borderRight: i < 2 ? '1px solid var(--v4-line)' : 'none',
            borderBottom: '1px solid var(--v4-line)',
            background: p.accent ? 'rgba(232,200,125,0.025)' : 'var(--v4-bg)',
            position: 'relative',
          }}>
            {p.accent && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'var(--v4-signal)' }}/>}
            <div className="eyebrow" style={{ color: p.accent ? 'var(--v4-signal)' : 'var(--v4-mute)' }}>{p.t}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--v4-dim)', marginTop: 6, letterSpacing: '0.14em' }}>{p.sub}</div>
            <div style={{ marginTop: 22, display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span className="disp" style={{ fontSize: 56, color: 'var(--v4-text)' }}>{p.price}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--v4-mute)', letterSpacing: '0.14em' }}>{p.unit}</span>
            </div>
            <div style={{ marginTop: 14, fontSize: 13, color: 'var(--v4-dim)', lineHeight: 1.6, minHeight: 60 }}>{p.desc}</div>
            <a className={'btn ' + (p.accent ? 'btn-primary' : '')} href="#demo" style={{ marginTop: 22 }}>{p.cta} →</a>
            <div style={{ marginTop: 24, borderTop: '1px solid var(--v4-line)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                ['G1–G5 gates', '✓'], ['Dual-engine scans', '✓'],
                ['Auto Hunts', i ? '✓' : 'Limited'], ['MCP Suite', i ? '✓' : '—'],
                ['Bounty Forge', i ? '✓' : 'Read-only'], ['SSO · SCIM', i ? '✓' : '—'],
                ['Audit · SIEM', i ? '✓' : '—'], ['BYOK · Sovereign', i === 2 ? '✓' : '—'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--v4-mono)', fontSize: 10.5 }}>
                  <span style={{ color: 'var(--v4-mute)', letterSpacing: '0.1em' }}>{k}</span>
                  <span style={{ color: v === '✓' ? 'var(--v4-signal)' : 'var(--v4-faint)', fontWeight: 600 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── BIG FINALE / CTA ─────────────────────────────────
const FinaleSection = () => (
  <section id="demo" style={{ borderBottom: '1px solid var(--v4-line)', position: 'relative', overflow: 'hidden' }}>
    <div aria-hidden style={{
      position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
      fontFamily: 'var(--v4-jp)', fontSize: 720, fontWeight: 400,
      color: 'var(--v4-text)', opacity: 0.025, lineHeight: 0.8, pointerEvents: 'none',
    }}>剣</div>
    <div className="wrap" style={{ position: 'relative', paddingTop: 120, paddingBottom: 120, textAlign: 'center' }}>
      <div className="eyebrow" style={{ color: 'var(--v4-signal)', marginBottom: 26 }}>Ready when you are</div>
      <h2 className="display-h" style={{ fontSize: 'clamp(56px, 9vw, 144px)', maxWidth: 1100, margin: '0 auto' }}>
        Find what <span className="it">matters.</span><br/>
        <span className="signal it">Fix what's critical.</span>
      </h2>
      <div style={{ marginTop: 28, fontSize: 16, color: 'var(--v4-dim)', lineHeight: 1.6, maxWidth: 640, margin: '28px auto 0' }}>
        A 30-minute scoping call. We bring a live hunt against a sandboxed
        replica of your surface. You leave with three real findings — yours
        to keep, whether you sign or not.
      </div>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 40 }}>
        <a className="btn btn-primary" href="#" style={{ padding: '14px 24px', fontSize: 12 }}>Book demo →</a>
        <a className="btn" href="#platform" style={{ padding: '14px 24px', fontSize: 12 }}>Tour the platform</a>
        <a className="btn" href="#docs" style={{ padding: '14px 24px', fontSize: 12 }}>Read the docs</a>
      </div>

      <div className="mono" style={{ marginTop: 80, display: 'flex', justifyContent: 'center', gap: 28, fontSize: 10, color: 'var(--v4-faint)', letterSpacing: '0.18em' }}>
        <span>347,593 CVEs</span><span>·</span>
        <span>1.85M LOC</span><span>·</span>
        <span>7 OSS TOOLS</span><span>·</span>
        <span>10 COMPANIES</span><span>·</span>
        <span>FEDRAMP MODERATE</span>
      </div>
    </div>
  </section>
);

Object.assign(window, { GraphSection, IntegrationsSection, PricingSection, FinaleSection });