// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Platform & Signature sections                 ║
// ╚═══════════════════════════════════════════════════════════╝

const SectionHead = ({ num, label, desc }) => (
  <div className="section-head">
    <span className="num">{num}</span>
    <span>{label}</span>
    {desc && <span className="desc">{desc}</span>}
  </div>
);

// ── Platform · The chassis story ─────────────────────
const PlatformSection = () => (
  <section id="platform" style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§01" label="Platform · One chassis" desc="One product shell · multiple working surfaces"/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, paddingTop: 56, paddingBottom: 64 }}>
        <div style={{ paddingRight: 56 }}>
          <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>The hybrid chassis</div>
          <h2 className="display-h" style={{ fontSize: 'clamp(40px,5vw,72px)', marginTop: 14 }}>
            Command density.<br/>
            <span className="it">Editorial calm.</span>
          </h2>
          <div style={{ marginTop: 22, fontSize: 15, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 480 }}>
            Most security tools choose between dashboard-bloat and prosumer-toy.
            Kensai runs three chassis on one substrate — Command, Forge, Spatial —
            so analysts get density, executives get signal, and graphs render where
            graphs belong.
          </div>
          <div style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid var(--v4-line)' }}>
            {[
              ['B', 'COMMAND · DEFAULT', 'Dense terminals for analysts and SOC'],
              ['A', 'FORGE · SIGNATURE', 'Editorial moments — Posture, Reports, Auth'],
              ['C', 'SPATIAL · GRAPH',   'Asset graph, correlation, reachability'],
            ].map(([k, t, sub]) => (
              <div key={k} style={{ display: 'grid', gridTemplateColumns: '40px 200px 1fr', padding: '14px 0', borderBottom: '1px solid var(--v4-line)', alignItems: 'baseline', gap: 14 }}>
                <span className="mono" style={{ color: 'var(--v4-signal)', fontSize: 14, fontWeight: 600, letterSpacing: '0.18em' }}>{k}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--v4-text)', letterSpacing: '0.18em', fontWeight: 600 }}>{t}</span>
                <span style={{ fontSize: 13, color: 'var(--v4-dim)' }}>{sub}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderLeft: '1px solid var(--v4-line)', paddingLeft: 0, position: 'relative' }}>
          <PlatformChassisDiagram/>
        </div>
      </div>
    </div>
  </section>
);

const PlatformChassisDiagram = () => (
  <div style={{ position: 'relative', height: 540 }}>
    <div style={{ position: 'absolute', inset: 0, padding: '24px 32px', display: 'flex', flexDirection: 'column' }}>
      {/* mini topbar */}
      <div style={{ height: 26, display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--v4-mono)', fontSize: 10, color: 'var(--v4-mute)', letterSpacing: '0.16em', borderBottom: '1px solid var(--v4-line)', paddingBottom: 8 }}>
        <span style={{ color: 'var(--v4-signal)' }}>◈</span>
        <span>KENSAI · v4 · QUANTA-LABS</span>
        <span style={{ flex: 1 }}/>
        <span className="dot dot-live"/>
        <span>LIVE UTC</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, marginTop: 16, flex: 1 }}>
        {[
          ['CVES', '347,593', 'signal'],
          ['COMPANIES', '10', ''],
          ['TOOLS', '7', 'signal'],
          ['CODE', '1.85M', ''],
          ['FINDINGS', 'LIVE', 'signal'],
          ['REPORTS', 'READY', ''],
        ].map(([k, v, c], i) => (
          <div key={k} style={{ padding: '14px 12px', borderRight: i < 5 ? '1px solid var(--v4-line)' : 'none', borderBottom: '1px solid var(--v4-line)' }}>
            <div className="eyebrow" style={{ fontSize: 9 }}>{k}</div>
            <div className="mono" style={{ marginTop: 8, fontSize: 24, color: c === 'signal' ? 'var(--v4-signal)' : c === 'crit' ? 'var(--v4-crit)' : 'var(--v4-text)', letterSpacing: '-0.02em' }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', flex: 1, marginTop: 0 }}>
        <div style={{ borderRight: '1px solid var(--v4-line)', padding: 14 }}>
          <div className="eyebrow">Severity · 30D</div>
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              ['CRITICAL', 2, 14, 'var(--v4-crit)'],
              ['HIGH', 7, 42, 'var(--v4-high)'],
              ['MEDIUM', 9, 188, 'var(--v4-med)'],
              ['LOW', 5, 504, 'var(--v4-low)'],
            ].map(([l, op, cl, c]) => (
              <div key={l} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 36px', alignItems: 'center', gap: 8, fontFamily: 'var(--v4-mono)', fontSize: 10 }}>
                <span style={{ color: c, letterSpacing: '0.14em', fontWeight: 600 }}>{l}</span>
                <div style={{ height: 3, background: 'var(--v4-bg-3)', position: 'relative' }}>
                  <div style={{ width: (cl / 504) * 100 + '%', height: '100%', background: c, opacity: 0.7 }}/>
                </div>
                <span style={{ color: 'var(--v4-text)', textAlign: 'right' }}>{String(op).padStart(2,'0')}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: 14 }}>
          <div className="eyebrow">Scan queue</div>
          <div style={{ marginTop: 10, fontFamily: 'var(--v4-mono)', fontSize: 10 }}>
            {[
              ['SCN-4921','api.qlabs.io','RUN', 68, 'var(--v4-signal)'],
              ['SCN-4920','qlabs/web', 'DONE', 100, 'var(--v4-mute)'],
              ['SCN-4919','pay.qlabs', 'DONE', 100, 'var(--v4-mute)'],
            ].map(r => (
              <div key={r[0]} style={{ marginBottom: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--v4-dim)' }}>
                  <span>{r[0]}</span>
                  <span style={{ color: r[4], letterSpacing: '0.1em', fontWeight: 600 }}>{r[2]}</span>
                </div>
                <div style={{ color: 'var(--v4-text)', fontSize: 11, margin: '2px 0 4px' }}>{r[1]}</div>
                <div style={{ height: 2, background: 'var(--v4-bg-3)' }}>
                  <div style={{ width: r[3] + '%', height: '100%', background: r[4] }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
    {/* Annotation labels */}
    <div style={{ position: 'absolute', top: 14, right: 14, fontFamily: 'var(--v4-mono)', fontSize: 9, color: 'var(--v4-faint)', letterSpacing: '0.18em' }}>FIG. 01 · COMMAND CHASSIS</div>
  </div>
);

// ── Signature features (Forge moments) ───────────────
const SignatureSection = () => (
  <section id="signature" style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§02" label="Signature · The forge moments" desc="Screens prospects screenshot"/>
      <div style={{ paddingTop: 48, paddingBottom: 14, maxWidth: 960 }}>
        <h2 className="display-h" style={{ fontSize: 'clamp(40px,5vw,72px)' }}>
          Six surfaces.<br/>
          <span className="it signal">One discipline.</span>
        </h2>
        <div style={{ marginTop: 18, fontSize: 15, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 640 }}>
          Posture is the dashboard. Bounty Forge is the pipeline. Auth Manifest is
          the contract. G5 Reports are the proof. Asset Graph is the territory.
          Correlation is the case file. Each one earns its real estate.
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--v4-line)' }}>
        {[
          { n:'01', k:'POSTURE', t:'The blade IS the dashboard.',
            d:'A focused posture surface beats a bloated dashboard when teams need signal, not theater.' },
          { n:'02', k:'BOUNTY FORGE', t:'Findings → submission, gate-verified.',
            d:'Five gates between hunch and HackerOne. Slop-risk scored, evidence chained, reward predicted. No more blind H1 fire-and-pray.' },
          { n:'03', k:'AUTH MANIFEST', t:'Every edge a signed contract.',
            d:'Each authorization decision in your stack, declared, diffed, and audited. Zero-trust without the slide deck.' },
          { n:'04', k:'G5 REPORT', t:'A submission worth reading.',
            d:'Narrative, evidence-anchored, and reproducible. The kind of write-up built to be clear instead of noisy.' },
          { n:'05', k:'ASSET GRAPH', t:'See your surface like an attacker.',
            d:'Reachability, blast radius, and dependency in one view. The territory, not the menu.' },
          { n:'06', k:'CORRELATION', t:'Signals rejoin into stories.',
            d:'A login anomaly, a billing IDOR, a curl from Kazakhstan. One case, one timeline, one decision.' },
        ].map((c, i) => (
          <div key={c.n} style={{
            padding: '32px 28px 28px',
            borderRight: (i % 3 !== 2) ? '1px solid var(--v4-line)' : 'none',
            borderBottom: '1px solid var(--v4-line)',
            background: 'var(--v4-bg)',
            position: 'relative', minHeight: 280,
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span className="mono" style={{ color: 'var(--v4-signal)', fontSize: 12, letterSpacing: '0.18em', fontWeight: 600 }}>{c.n}</span>
              <span className="mono" style={{ color: 'var(--v4-mute)', fontSize: 10, letterSpacing: '0.18em', fontWeight: 600 }}>{c.k}</span>
            </div>
            <div className="disp" style={{ marginTop: 16, fontSize: 28, color: 'var(--v4-text)', lineHeight: 1.18, letterSpacing: '-0.015em' }}>{c.t}</div>
            <div style={{ marginTop: 14, fontSize: 13.5, color: 'var(--v4-dim)', lineHeight: 1.6 }}>{c.d}</div>
            <div style={{ position: 'absolute', bottom: 18, left: 28, right: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <a className="mono" style={{ color: 'var(--v4-signal)', fontSize: 10.5, letterSpacing: '0.18em', borderBottom: 'none' }} href="#">EXPLORE →</a>
              <span className="mono" style={{ color: 'var(--v4-faint)', fontSize: 9, letterSpacing: '0.18em' }}>FORGE</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { SectionHead, PlatformSection, SignatureSection });