// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Narrative arc · Part 2                         ║
// ║  Plan · Stakes · After                                       ║
// ╚═══════════════════════════════════════════════════════════╝

// ── 3. Plan · "Three moves" ─────────────────────────────────
const PlanSection = () => (
  <section id="plan" style={{ borderBottom: '1px solid var(--v4-line)', padding: '72px 0' }}>
    <div className="wrap">
      <div className="section-head">
        <span className="num">§ 04</span>
        <span>The path · three moves</span>
        <span className="desc">From onboarding to working rhythm</span>
      </div>

      <div className="disp" style={{ marginTop: 40, fontSize: 'clamp(40px, 5.6vw, 76px)', lineHeight: 1, letterSpacing: '-0.025em', color: 'var(--v4-text)' }}>
        Three moves<br/>
        <span className="it">to ship security like a product.</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', marginTop: 56, border: '1px solid var(--v4-line)' }}>
        {[
          { n: '01', day: 'Step 1', t: 'Connect your surface', d: 'One read-only AWS / GCP / Azure role, your DNS, your repos. We map every asset — known, shadow, abandoned — and build the graph.', tag: 'No agents. No code change.' },
          { n: '02', day: 'Step 2', t: 'Watch the hunts run', d: 'The platform keeps scanning and organizing work so teams spend less time sorting noise.', tag: 'Signal first.' },
          { n: '03', day: 'Step 3', t: 'Ship the fix', d: 'Critical issues should arrive with enough context that teams can move from finding to action fast.', tag: 'Fix faster.' },
        ].map((m, i) => (
          <div key={i} style={{ padding: '36px 32px', borderRight: i < 2 ? '1px solid var(--v4-line)' : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 22 }}>
              <span className="disp" style={{ fontSize: 56, color: 'var(--v4-signal)', lineHeight: 1, fontWeight: 300 }}>{m.n}</span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--v4-mute)' }}>{m.day}</span>
            </div>
            <div className="disp" style={{ fontSize: 30, lineHeight: 1.1, color: 'var(--v4-text)', letterSpacing: '-0.015em' }}>
              <span className="it">{m.t}</span>
            </div>
            <div style={{ marginTop: 18, fontSize: 13.5, lineHeight: 1.7, color: 'var(--v4-dim)' }}>{m.d}</div>
            <div className="mono" style={{ marginTop: 22, paddingTop: 14, borderTop: '1px solid var(--v4-line)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--v4-signal)', textTransform: 'uppercase' }}>→ {m.tag}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 42, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div className="disp it" style={{ fontSize: 22, color: 'var(--v4-dim)', maxWidth: 560 }}>
          One read-only key. One Slack channel. A calmer Monday.
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <a href="#demo" className="btn btn-primary">Start the path →</a>
          <a href="#scan" className="btn">Free surface scan</a>
        </div>
      </div>
    </div>
  </section>
);

// ── 4. Stakes · "The cost of waiting" ──────────────────────
const StakesSection = () => (
  <section id="stakes" style={{ borderBottom: '1px solid var(--v4-line)', padding: '88px 0', background: 'var(--v4-bg-1)', position: 'relative', overflow: 'hidden' }}>
    <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(90deg, var(--v4-line) 1px, transparent 1px)', backgroundSize: '160px 100%', opacity: 0.4, pointerEvents: 'none' }}/>

    <div className="wrap" style={{ position: 'relative' }}>
      <div className="section-head">
        <span className="num">§ 05</span>
        <span>The cost of waiting</span>
        <span className="desc">Why delay hurts</span>
      </div>

      <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
        <div className="disp" style={{ fontSize: 'clamp(40px, 5.6vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.025em', color: 'var(--v4-text)' }}>
          The breach<br/>
          you don't see<br/>
          <span className="it" style={{ color: 'var(--v4-crit)' }}>is the one you'll fund.</span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {[
            { n: 'Noise', l: 'Fragmented security work slows response and decision-making.', tag: 'Operational drag' },
            { n: 'Delay', l: 'The longer context stays scattered, the longer real issues sit unresolved.', tag: 'Compounds quietly' },
            { n: 'Guessing', l: 'Teams lose time when they cannot see severity, ownership, and proof in one place.', tag: 'Avoidable' },
            { n: 'Drift', l: 'Public messaging should not outrun what the product can actually show.', tag: 'Credibility cost' },
            { n: 'Focus', l: 'The goal is less theater, more signal, and faster follow-through.', tag: 'What changes' },
          ].map((row, i) => (
            <div key={i} style={{ padding: '20px 0', borderBottom: '1px solid var(--v4-line)', display: 'grid', gridTemplateColumns: '180px 1fr 140px', gap: 18, alignItems: 'baseline' }}>
              <div className="disp" style={{ fontSize: 32, color: 'var(--v4-crit)', lineHeight: 1 }}>{row.n}</div>
              <div style={{ fontSize: 13.5, color: 'var(--v4-dim)', lineHeight: 1.5 }}>{row.l}</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.16em', color: 'var(--v4-mute)', textTransform: 'uppercase', textAlign: 'right' }}>{row.tag}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 48, padding: '28px 32px', border: '1px solid var(--v4-signal-line)', background: 'var(--v4-signal-dim)', display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
        <div className="disp it" style={{ fontSize: 22, lineHeight: 1.3, color: 'var(--v4-text)', flex: 1, minWidth: 280 }}>
          Every quarter you keep guessing is a quarter your attackers spend learning.
        </div>
        <a href="#demo" className="btn btn-primary">Stop guessing →</a>
      </div>
    </div>
  </section>
);

// ── 5. After · "What changes by Monday" ────────────────────
const AfterSection = () => (
  <section id="after" style={{ borderBottom: '1px solid var(--v4-line)', padding: '88px 0' }}>
    <div className="wrap">
      <div className="section-head">
        <span className="num">§ 06</span>
        <span>The week after</span>
        <span className="desc">What the week looks like once the workflow tightens up</span>
      </div>

      <div className="disp" style={{ marginTop: 40, fontSize: 'clamp(44px, 6vw, 84px)', lineHeight: 1, letterSpacing: '-0.025em', color: 'var(--v4-text)' }}>
        From <span className="it" style={{ color: 'var(--v4-crit)' }}>noise</span><br/>
        to <span className="it" style={{ color: 'var(--v4-signal)' }}>signal,</span><br/>
        with tighter signal.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, marginTop: 56, border: '1px solid var(--v4-line)' }}>
        <div style={{ borderRight: '1px solid var(--v4-line)' }}>
          <div className="eyebrow" style={{ padding: '16px 28px', borderBottom: '1px solid var(--v4-line)', color: 'var(--v4-crit)' }}>● Before · the week you have now</div>
          <div style={{ padding: '8px 0' }}>
            {[
              ['MON 09:14', 'Triage another pile of overnight scanner alerts'],
              ['MON 14:30', 'Severity review drifts into duplicate cleanup again'],
              ['TUE 11:00', 'Vendor call about another noisy tool'],
              ['WED', 'Another pen-test report lands. Some findings look painfully familiar.'],
              ['THU', 'Researcher emails directly. Severity gets disputed for days.'],
              ['FRI 17:55', 'Hand off the on-call. The list is longer than Monday.'],
              ['SUN 22:11', 'Refresh news. Hold breath.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ padding: '12px 28px', display: 'grid', gridTemplateColumns: '110px 1fr', gap: 16, borderBottom: i < 6 ? '1px solid var(--v4-line)' : 'none' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--v4-faint)' }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--v4-dim)', lineHeight: 1.5 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{ padding: '16px 28px', borderBottom: '1px solid var(--v4-line)', color: 'var(--v4-signal)' }}>● After · with Kensai</div>
          <div style={{ padding: '8px 0' }}>
            {[
              ['MON 09:14', 'Open Slack. A short queue. Real findings. Clear next steps.'],
              ['MON 11:00', 'Merge two. Push one into the next review step.'],
              ['TUE',       'Quarterly board prep · the dashboard is the report.'],
              ['WED',       'Pen-test scope narrows to the deltas instead of repeating old noise.'],
              ['THU',       'Researchers ship clean reports through your manifest. No email back-and-forth.'],
              ['FRI 16:30', 'Close Slack. Calendar is clear.'],
              ['SUN',       'Saturday and Sunday were Saturday and Sunday.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ padding: '12px 28px', display: 'grid', gridTemplateColumns: '110px 1fr', gap: 16, borderBottom: i < 6 ? '1px solid var(--v4-line)' : 'none' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--v4-signal)' }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--v4-text)', lineHeight: 1.5 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ marginTop: 56, textAlign: 'center' }}>
        <div className="disp it" style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', lineHeight: 1.2, color: 'var(--v4-text)', maxWidth: 720, margin: '0 auto' }}>
          You came into security to protect something. We built Kensai so you can.
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>
          <a href="#demo" className="btn btn-primary">Book your walkthrough →</a>
          <a href="#scan" className="btn">Get a free surface scan</a>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { PlanSection, StakesSection, AfterSection });