// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Narrative arc                                 ║
// ║  Customer-led story sections (rephrased SB7)                ║
// ╚═══════════════════════════════════════════════════════════╝

// ── 1. Tension · "What's getting in the way" ───────────────
const TensionSection = () => (
  <section id="tension" style={{ borderBottom: '1px solid var(--v4-line)', padding: '72px 0', position: 'relative', overflow: 'hidden' }}>
    <div className="wrap">
      <div className="section-head">
        <span className="num">§ 02</span>
        <span>The drag</span>
        <span className="desc">What's between you and the work that matters</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, marginTop: 56 }}>
        <div>
          <div className="disp" style={{ fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--v4-text)' }}>
            You didn't get into security<br/>
            <span className="it" style={{ color: 'var(--v4-signal)' }}>to triage duplicates.</span>
          </div>
          <div style={{ marginTop: 28, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 520 }}>
            Yet most teams spend Monday-through-Friday in dashboards built for the 2018 attack surface,
            arguing with vendors about severity, and chasing alerts that resolve to "intentional design."
            Meanwhile real exploit chains sit in plain sight — half-discovered, half-reported, never fixed.
          </div>
          <div style={{ marginTop: 24, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 520 }}>
            The cost shows up everywhere: your engineers stop reading findings.
            Your board reads breach headlines. Your researchers go quiet.
            Your auditors ask why three of last quarter's criticals are still open.
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {[
            { label: 'External · the surface', t: 'Slop tools', d: 'Generic scanners produce more noise than context.' },
            { label: 'External · the surface', t: 'Shadow assets', d: 'Parts of the perimeter often outlive the team that created them.' },
            { label: 'Internal · the team', t: 'Alert fatigue', d: 'Too much analyst time gets burned on duplicate or low-value work.' },
            { label: 'Internal · the team', t: 'Slow-to-fix', d: 'Even obvious issues stall when evidence, ownership, and remediation are split across tools.' },
            { label: 'Strategic · the room', t: 'Board pressure', d: "You're asked monthly to prove last quarter wasn't breached. You can't." },
            { label: 'Strategic · the room', t: 'Insurer math', d: 'Your premium just doubled. They want evidence, not adjectives.' },
          ].map((row, i) => (
            <div key={i} style={{ padding: '18px 0', borderBottom: '1px solid var(--v4-line)', display: 'grid', gridTemplateColumns: '160px 1fr', gap: 18 }}>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.16em', color: 'var(--v4-mute)', textTransform: 'uppercase', paddingTop: 4 }}>{row.label}</div>
              <div>
                <div className="disp" style={{ fontSize: 22, color: 'var(--v4-text)', lineHeight: 1.2 }}>
                  <span className="it">{row.t}</span>
                </div>
                <div style={{ marginTop: 6, fontSize: 13, lineHeight: 1.6, color: 'var(--v4-dim)' }}>{row.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ── 2. Guide · "How we ride with you" ──────────────────────
const GuideSection = () => (
  <section id="guide" style={{ borderBottom: '1px solid var(--v4-line)', padding: '72px 0', background: 'var(--v4-bg-1)' }}>
    <div className="wrap">
      <div className="section-head">
        <span className="num">§ 03</span>
        <span>Why us</span>
        <span className="desc">We've stood where you stand · we built the tools we wished we'd had</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, marginTop: 56, alignItems: 'start' }}>
        <div>
          <div className="disp it" style={{ fontSize: 'clamp(34px, 4.4vw, 56px)', lineHeight: 1.1, color: 'var(--v4-text)', letterSpacing: '-0.02em', maxWidth: 600 }}>
            "We were the security team that had to explain
            why the scanner missed it. <span className="signal" style={{ fontStyle: 'normal' }}>So we built the
            scanner that doesn't.</span>"
          </div>
          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--v4-bg-3)', border: '1px solid var(--v4-line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--v4-mono)', fontSize: 13, fontWeight: 600, color: 'var(--v4-signal)' }}>剣</div>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--v4-text)', fontWeight: 600 }}>KENSAI</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.16em', color: 'var(--v4-mute)' }}>EARLY SECURITY PRODUCT</div>
            </div>
          </div>

          <div style={{ marginTop: 40, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 540 }}>
            Kensai is built by people who carried the pager. Our team has shipped offensive
            with a sharp bias toward reducing noise, tightening evidence, and making security work easier to act on.
          </div>
          <div style={{ marginTop: 18, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 540 }}>
            We're not here to sell another dashboard. We're here to take the work off your team
            that doesn't need a human, and make sure the work that does shows up with the proof,
            the patch, and the path already drafted.
          </div>
        </div>

        <div style={{ border: '1px solid var(--v4-line)', background: 'var(--v4-panel)' }}>
          <div className="eyebrow" style={{ padding: '14px 20px', borderBottom: '1px solid var(--v4-line)' }}>The receipts</div>
          {[
            ['347,593', 'CVEs in the database'],
            ['1.85M', 'Lines of code counted'],
            ['7', 'Open-source security tools integrated'],
            ['10', 'Companies already using Kensai'],
            ['One shell', 'CVE, findings, assets, reports, workflows'],
            ['Early', 'Public copy kept intentionally grounded'],
          ].map(([n, l], i) => (
            <div key={i} style={{ padding: '18px 20px', borderBottom: i < 5 ? '1px solid var(--v4-line)' : 'none', display: 'flex', alignItems: 'baseline', gap: 18 }}>
              <div className="disp" style={{ fontSize: 26, color: 'var(--v4-signal)', minWidth: 110, lineHeight: 1 }}>{n}</div>
              <div style={{ fontSize: 12.5, color: 'var(--v4-dim)', lineHeight: 1.5 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { TensionSection, GuideSection });