// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Defense + Offense + Bounty + Hunts            ║
// ╚═══════════════════════════════════════════════════════════╝

// ── DEFENSE: Findings, Scans, CVE, SBOM ──────────────
const DefenseSection = () => (
  <section id="defense" style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§03" label="Defense · Find · Verify · Fix" desc="Signal-first workflow, evidence-forward"/>
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.4fr', paddingTop: 48, paddingBottom: 56 }}>
        <div style={{ paddingRight: 40 }}>
          <h2 className="display-h" style={{ fontSize: 'clamp(36px,4.5vw,64px)' }}>
            Every finding,<br/>
            <span className="it">earned through five gates.</span>
          </h2>
          <div style={{ marginTop: 22, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)' }}>
            Other tools dump noise into a queue and call it a workflow. Kensai runs every signal through five gates — Discover,
            Reproduce, Exploit, Impact, Submit — before a human ever sees
            it. What lands in your queue is exploitable, evidenced, and
            ready to fix.
          </div>
          <div style={{ marginTop: 32 }}>
            {[
              ['G1 · DISCOVER',  'Surface scan picks it up.',           'active'],
              ['G2 · REPRODUCE', 'Second pass confirms it.',             'active'],
              ['G3 · EXPLOIT',   'Working evidence is captured.',        'active'],
              ['G4 · IMPACT',    'Blast radius is reasoned through.',    'active'],
              ['G5 · SUBMIT',    'Report or ticket is ready.',           'active'],
            ].map(([k, t, n]) => (
              <div key={k} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 90px', alignItems: 'baseline', gap: 14, padding: '12px 0', borderBottom: '1px solid var(--v4-line)' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--v4-signal)', letterSpacing: '0.16em', fontWeight: 600 }}>{k}</span>
                <span style={{ fontSize: 13, color: 'var(--v4-text)' }}>{t}</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--v4-mute)', letterSpacing: '0.14em', textAlign: 'right' }}>{n}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Findings table mock */}
        <div style={{ borderLeft: '1px solid var(--v4-line)', borderTop: '1px solid var(--v4-line)', borderRight: '1px solid var(--v4-line)', borderBottom: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)' }}>
          <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--v4-line)', display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--v4-mono)', fontSize: 10.5 }}>
            <span style={{ color: 'var(--v4-signal)', letterSpacing: '0.16em', fontWeight: 600 }}>FINDINGS</span>
            <span style={{ color: 'var(--v4-mute)', letterSpacing: '0.1em' }}>live queue · evidence-first</span>
            <span style={{ flex: 1 }}/>
            <span className="kbd">↑↓</span>
            <span className="kbd">A</span>
            <span style={{ color: 'var(--v4-mute)' }}>advance</span>
          </div>
          <table className="k">
            <thead>
              <tr><th>ID</th><th>SEV</th><th>TITLE</th><th>ASSET</th><th>GATE</th><th>SLOP</th><th>BOUNTY</th></tr>
            </thead>
            <tbody>
              {[
                ['F-1824','crit','SQL injection · /api/users/login','api.qlabs.io','G3','0.14','public program'],
                ['F-1823','high','IDOR on /orgs/:id/billing',         'api.qlabs.io','G5','0.08','—'],
                ['F-1822','high','Path traversal /files/:name',       'qlabs/web',   'G3','0.22','public program'],
                ['F-1821','med', 'Weak JWT signature on /auth',       'auth.qlabs',  'G4','0.11','—'],
                ['F-1820','med', 'YAML deserialization · sdk-py',     'qlabs/sdk-py','G2','0.31','—'],
                ['F-1819','crit','RCE via deserialization · /jobs',   'api.qlabs.io','G3','0.09','public program'],
                ['F-1818','high','Open redirect · /oauth/callback',   'auth.qlabs',  'G2','0.18','—'],
                ['F-1817','low', 'Verbose error leaks stack trace',   'status.qlabs','G1','0.42','—'],
                ['F-1815','high','Race condition · /payments/capture','pay.qlabs',   'G4','0.14','public program'],
                ['F-1814','crit','SSRF to metadata · /webhooks',      'api.qlabs.io','G5','0.06','public program'],
              ].map(r => (
                <tr key={r[0]}>
                  <td>{r[0]}</td>
                  <td><span className={'sev sev-' + r[1]}>{r[1].toUpperCase()}</span></td>
                  <td className="t" style={{ fontFamily: 'var(--v4-sans)', fontSize: 12.5 }}>{r[2]}</td>
                  <td>{r[3]}</td>
                  <td className="signal">{r[4]}</td>
                  <td style={{ color: parseFloat(r[5]) < 0.2 ? 'var(--v4-signal)' : 'var(--v4-dim)' }}>{r[5]}</td>
                  <td className={r[6] === '—' ? '' : 'signal'} style={{ fontSize: 10, letterSpacing: '0.06em' }}>{r[6]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Defense capabilities row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--v4-line)' }}>
        {[
          ['DUAL-ENGINE SCANS', 'Blitz finds. Deep verifies. Two passes, one verdict — false-positive rate near zero.'],
          ['CVE INTEL',         'Live correlation against your SBOM. The day a CVE drops, you know if you bleed.'],
          ['SBOM · AUTOFIX',    'Patches generated, tested, opened as PRs. Your dependency tree, automatically pruned.'],
          ['CORRELATION',       'Anomalies stitched into cases. One timeline per attacker, not per signal.'],
        ].map(([k, d], i) => (
          <div key={k} style={{ padding: '24px 24px 28px', borderRight: i < 3 ? '1px solid var(--v4-line)' : 'none', borderBottom: '1px solid var(--v4-line)' }}>
            <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>{k}</div>
            <div style={{ marginTop: 12, fontSize: 13, color: 'var(--v4-dim)', lineHeight: 1.6 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── OFFENSE: Auto Hunts (live demo strip) ────────────
const OffenseSection = () => (
  <section id="offense" style={{ borderBottom: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)' }}>
    <div className="wrap">
      <SectionHead num="§04" label="Offense · Autonomous hunts" desc="Governed hunt workflows"/>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', paddingTop: 48, paddingBottom: 60 }}>
        {/* live hunt strip */}
        <div style={{ paddingRight: 48 }}>
          <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>● HUNT-02 · IN PROGRESS</div>
          <h2 className="display-h" style={{ fontSize: 'clamp(36px,4.5vw,60px)', marginTop: 12 }}>
            Hunt workflows.<br/>
            <span className="it">Running with guardrails.</span>
          </h2>
          <div style={{ marginTop: 18, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 540 }}>
            Kensai runs continuous autonomous campaigns against your surface
            with governed offensive workflows. Scope-bounded, reviewable, and designed to keep signal moving instead of creating more noise.
          </div>

          <div style={{ marginTop: 28, border: '1px solid var(--v4-line)', background: 'var(--v4-bg)' }}>
            <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--v4-line)', display: 'flex', gap: 12, alignItems: 'baseline', fontFamily: 'var(--v4-mono)', fontSize: 10.5 }}>
              <span style={{ color: 'var(--v4-signal)', fontWeight: 600, letterSpacing: '0.16em' }}>HUNT-02</span>
              <span style={{ color: 'var(--v4-text)' }}>Auth manifest sweep · demo tenant</span>
              <span style={{ flex: 1 }}/>
              <span style={{ color: 'var(--v4-mute)' }}>DEEP-03 · DEEP-04</span>
              <span style={{ color: 'var(--v4-signal)', fontWeight: 600 }}>RUNNING</span>
            </div>
            <div style={{ fontFamily: 'var(--v4-mono)', fontSize: 11, color: 'var(--v4-dim)', padding: '14px 14px' }}>
              {[
                ['14:21:06', 'agent', 'DEEP-03 enumerate · auth surface in /api/auth/*'],
                ['14:21:18', 'note',  'JWT signing key derives from APP_SECRET — checking entropy'],
                ['14:21:42', 'find',  'F-1821 candidate · weak JWT signature on /auth/refresh'],
                ['14:22:01', 'verify','DEEP-04 reproduce · token forgery succeeds in verification'],
                ['14:22:04', 'gate',  'G3 EXPLOIT · evidence chain captured'],
                ['14:22:08', 'next',  'computing impact radius · evidence continues'],
              ].map((r, i) => (
                <div key={i} style={{ padding: '4px 0', display: 'flex', gap: 14 }}>
                  <span style={{ color: 'var(--v4-mute)', minWidth: 64 }}>{r[0]}</span>
                  <span style={{ color: r[1] === 'find' ? 'var(--v4-crit)' : r[1] === 'gate' ? 'var(--v4-signal)' : 'var(--v4-mute)', minWidth: 56, letterSpacing: '0.14em', fontWeight: 600 }}>{r[1].toUpperCase()}</span>
                  <span style={{ color: 'var(--v4-text)' }}>{r[2]}</span>
                </div>
              ))}
              <div style={{ padding: '8px 0 0', display: 'flex', gap: 14 }}>
                <span style={{ color: 'var(--v4-signal)', minWidth: 64 }}>14:22:09</span>
                <span style={{ color: 'var(--v4-signal)', minWidth: 56, letterSpacing: '0.14em', fontWeight: 600 }}>►_</span>
              </div>
            </div>
            <div style={{ padding: '10px 14px', borderTop: '1px solid var(--v4-line)', display: 'flex', gap: 14, alignItems: 'center', fontFamily: 'var(--v4-mono)', fontSize: 10 }}>
              <div style={{ flex: 1, height: 3, background: 'var(--v4-bg-3)' }}>
                <div style={{ width: 'active', height: '100%', background: 'var(--v4-signal)' }}/>
              </div>
              <span style={{ color: 'var(--v4-signal)', minWidth: 32, textAlign: 'right', fontWeight: 600 }}>active</span>
              <a href="#" className="mono" style={{ color: 'var(--v4-text)', borderBottom: 'none', letterSpacing: '0.14em', fontSize: 10 }}>VIEW LIVE →</a>
            </div>
          </div>
        </div>

        {/* governance card */}
        <div style={{ borderLeft: '1px solid var(--v4-line)', paddingLeft: 32 }}>
          <div className="eyebrow">Governance · Always armed</div>
          <div className="disp" style={{ marginTop: 10, fontSize: 26, lineHeight: 1.25, color: 'var(--v4-text)' }}>
            Autonomous, <span className="it">never unaccountable.</span>
          </div>
          <div style={{ marginTop: 16, fontSize: 13, color: 'var(--v4-dim)', lineHeight: 1.6 }}>
            Every hunt is bounded by a written policy: scope, budget, blast
            radius, evidence retention, kill-switch latency. We log every
            agent action and ship the audit trail to your SIEM.
          </div>
          <div style={{ marginTop: 22, border: '1px solid var(--v4-line)' }}>
            {[
              ['MAX CONCURRENT HUNTS',  'set by policy', 'ok'],
              ['DAILY BUDGET CAP',      'bounded',      'ok'],
              ['OUT-OF-SCOPE BLOCK',    'ENFORCED', 'ok'],
              ['HUMAN APPROVAL · G5',   'REQUIRED', 'ok'],
              ['KILL SWITCH',           'ARMED',    'ok'],
              ['EVIDENCE RETENTION',    'policy-set',  'ok'],
              ['DUAL-ENGINE',           'ENFORCED', 'ok'],
              ['POLICY BREACH',         'none claimed publicly', 'ok'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', alignItems: 'center', padding: '10px 14px', borderBottom: '1px solid var(--v4-line)' }}>
                <span className="mono" style={{ fontSize: 9.5, color: 'var(--v4-mute)', letterSpacing: '0.16em', flex: 1 }}>{k}</span>
                <span className="mono" style={{ fontSize: 10.5, color: 'var(--v4-signal)', letterSpacing: '0.1em', fontWeight: 600 }}>{v}</span>
                <span style={{ marginLeft: 12, width: 6, height: 6, borderRadius: 3, background: 'var(--v4-ok)' }}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── BOUNTY FORGE ────────────────────────────────────
const BountySection = () => (
  <section id="bounty" style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§05" label="Bounty · The Forge" desc="Product direction, not fake payout theater"/>
      <div style={{ paddingTop: 48, paddingBottom: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div>
          <h2 className="display-h" style={{ fontSize: 'clamp(40px,5vw,72px)' }}>
            Findings <span className="it">become</span><br/>
            <span className="signal it">submissions.</span>
          </h2>
        </div>
        <div style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--v4-dim)' }}>
          The Bounty Forge is the bridge between a finding and a clean submission workflow. Evidence can be chained, reviewed, and advanced without pretending there is public bounty performance we cannot verify yet.
        </div>
      </div>

      {/* programs table */}
      <div style={{ marginTop: 24, border: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)' }}>
        <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--v4-line)', fontFamily: 'var(--v4-mono)', fontSize: 10.5, display: 'flex', gap: 12 }}>
          <span style={{ color: 'var(--v4-signal)', letterSpacing: '0.16em', fontWeight: 600 }}>PROGRAM WORKFLOW</span>
          <span style={{ color: 'var(--v4-mute)' }}>illustrative routing surface</span>
          <span style={{ flex: 1 }}/>
          <span style={{ color: 'var(--v4-mute)' }}>public platforms · reviewed manually</span>
        </div>
        <table className="k">
          <thead>
            <tr><th>PROGRAM</th><th>PLATFORM</th><th>SCOPE</th><th style={{textAlign:'right'}}>MAX</th><th style={{textAlign:'right'}}>SUBMITTED</th><th style={{textAlign:'right'}}>PAID·90D</th><th style={{textAlign:'right'}}>ACCEPT</th><th style={{textAlign:'right'}}>SLOP</th></tr>
          </thead>
          <tbody>
            {[
              ['Program A',  'Public platform',  'API + web scope',  'see platform',  'active', '—', '—', 'review'],
              ['Program B',  'Public platform',  'product surface',  'see platform',  'active', '—', '—', 'review'],
              ['Program C',  'Public platform',  'selected scope',   'see platform',  'active', '—', '—', 'review'],
              ['Program D',  'Public platform',  'selected scope',   'see platform',  'active', '—', '—', 'review'],
              ['Program E',  'Public platform',  'selected scope',   'see platform',  'active', '—', '—', 'review'],
              ['Program F',  'Public platform',  'selected scope',   'see platform',  'active', '—', '—', 'review'],
              ['Program G',  'Public platform',  'selected scope',   'see platform',  'active', '—', '—', 'review'],
            ].map(r => (
              <tr key={r[0]}>
                <td className="t" style={{ fontFamily: 'var(--v4-sans)', fontWeight: 600 }}>{r[0]}</td>
                <td>{r[1]}</td>
                <td style={{ fontSize: 11 }}>{r[2]}</td>
                <td className="signal" style={{ textAlign: 'right' }}>{r[3]}</td>
                <td className="t" style={{ textAlign: 'right' }}>{r[4]}</td>
                <td className="signal" style={{ textAlign: 'right' }}>{r[5]}</td>
                <td style={{ textAlign: 'right' }}>{r[6]}</td>
                <td style={{ textAlign: 'right', color: parseFloat(r[7]) < 0.2 ? 'var(--v4-signal)' : 'var(--v4-dim)' }}>{r[7]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--v4-line)', borderLeft: '1px solid var(--v4-line)', borderRight: '1px solid var(--v4-line)', borderBottom: '1px solid var(--v4-line)', marginTop: 32, background: 'var(--v4-bg-1)' }}>
        {[
          ['347,593', 'CVES INDEXED'],
          ['1.85M',   'LINES OF CODE'],
          ['7',       'OSS TOOLS INTEGRATED'],
          ['10',      'COMPANIES USING KENSAI'],
        ].map(([n, l], i) => (
          <div key={l} style={{ padding: '24px 22px', borderRight: i < 3 ? '1px solid var(--v4-line)' : 'none' }}>
            <div className="eyebrow">{l}</div>
            <div className="mono" style={{ marginTop: 10, fontSize: 36, color: 'var(--v4-text)', letterSpacing: '-0.02em' }}>{n}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { DefenseSection, OffenseSection, BountySection });
