// slides-risk.jsx — Data exposure risk slide (Axis 1)

function RiskScenario({ tag, tagColor, title, body, footChip, footChipColor, stat, statLabel, statColor, border }) {
  return (
    <div style={{
      background: C.white, borderRadius: 28, padding: 48,
      borderTop: `10px solid ${border}`,
      display: 'flex', flexDirection: 'column', gap: 24,
      boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 10px 26px rgba(16,50,63,0.06)'
    }}>
      <div style={{
        display: 'inline-flex', alignSelf: 'flex-start', padding: '8px 18px',
        background: tagColor, color: C.cream, borderRadius: 999,
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
        letterSpacing: '0.16em', textTransform: 'uppercase', fontSize: 19
      }}>{tag}</div>

      <div style={{ fontSize: 38, fontWeight: 700, color: C.tealInk, letterSpacing: '-0.015em', lineHeight: 1.12 }}>{title}</div>

      <div style={{ fontSize: 27, color: 'rgba(16,50,63,0.7)', lineHeight: 1.4, textWrap: 'pretty' }}>{body}</div>

      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24 }}>
        <div>
          <div style={{ fontSize: 86, fontWeight: 800, color: statColor, lineHeight: 1, letterSpacing: '-0.03em' }}>{stat}</div>
          <div style={{
            marginTop: 10, fontSize: 20, color: 'rgba(16,50,63,0.6)', maxWidth: 320,
            textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600,
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', lineHeight: 1.25
          }}>{statLabel}</div>
        </div>
        {footChip &&
        <div style={{
          padding: '12px 18px', background: footChipColor, borderRadius: 14,
          fontSize: 19, lineHeight: 1.35, color: C.tealInk, fontWeight: 600, maxWidth: 360, textWrap: 'pretty'
        }}>{footChip}</div>
        }
      </div>
    </div>);

}

function S_DataRisk({ num, total }) {
  return (
    <Slide bg={C.cream} label="16 Data Risk">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <h1 style={{
          fontSize: 76, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.04,
          margin: 0, color: C.tealInk, textWrap: 'balance'
        }}>Where does the data <span style={{ color: C.coral }}>actually go?</span></h1>
      </div>

      <div style={{ marginTop: 48, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'stretch' }}>
        <RiskScenario
          tag="Scenario A — Write & leave"
          border={C.teal}
          title={<>Claude writes the script,<br />then steps away.</>}
          body={<>The Python script runs <strong>locally on my machine</strong>. The model is gone by the time it executes — it never sees a single row of employee data.</>}
          stat="0"
          statLabel="Employee records sent to the model"
          statColor={C.teal} />
        
        <RiskScenario
          tag="Scenario B — In the loop"
          border={C.coral}
          title={<>Claude triggers it, watches output,<br />and uses judgment.</>}
          body={<>Claude Code runs locally, but the model is remote. The script executes on my machine — yet <strong>anything Claude reads is sent to Anthropic's API</strong> for inference.</>}
          stat="0"
          statLabel="Data retention · no training on our data"
          statColor={C.coral}
          footChip="Covered by Anthropic's commercial terms"
          footChipColor={C.aqua} />
        
      </div>

      <div style={{
        marginTop: 36, background: C.teal, color: C.cream, borderRadius: 22,
        padding: '30px 44px', display: 'flex', alignItems: 'center', gap: 28
      }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
          letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 20,
          color: C.peach, whiteSpace: 'nowrap'
        }}>Our mitigation</div>
        <div style={{ width: 2, height: 44, background: 'rgba(243,236,223,0.25)' }} />
        <div style={{ fontSize: 32, fontWeight: 600, lineHeight: 1.25, textWrap: 'pretty' }}>
          In this loop, <span style={{ color: C.peach }}>we</span> control what Claude reads — exposure is a decision we make, not an accident.
        </div>
      </div>

      <Chrome num={num} total={total} />
    </Slide>);

}

Object.assign(window, { RiskScenario, S_DataRisk });

// ─── Risk thesis — the formula ───────────────────────────────────────────
function RiskFactor({ op, term, title, body, accent, dial }) {
  return (
    <div style={{ display: 'flex', alignItems: 'stretch', gap: 28, flex: 1 }}>
      {op &&
      <div style={{
        alignSelf: 'center', fontSize: 90, fontWeight: 300, lineHeight: 1,
        color: 'rgba(243,236,223,0.45)', fontFamily: '"DM Sans",system-ui,sans-serif'
      }}>×</div>
      }
      <div style={{
        flex: 1, background: 'rgba(243,236,223,0.06)', border: `1px solid rgba(243,236,223,0.14)`,
        borderTop: `8px solid ${accent}`, borderRadius: 24, padding: '36px 34px',
        display: 'flex', flexDirection: 'column', gap: 16
      }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
          letterSpacing: '0.16em', fontSize: 21, fontWeight: 700, color: accent
        }}>{term}</div>
        <div style={{ fontSize: 38, fontWeight: 700, color: C.cream, lineHeight: 1.1, letterSpacing: '-0.015em' }}>{title}</div>
        <div style={{ fontSize: 24, lineHeight: 1.4, color: 'rgba(243,236,223,0.72)', textWrap: 'pretty' }}>{body}</div>

        <div style={{ marginTop: 'auto', paddingTop: 24 }}>
          <div style={{
            position: 'relative', height: 8, borderRadius: 999,
            background: 'rgba(243,236,223,0.14)'
          }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, bottom: 0, width: `${dial}%`,
              background: accent, borderRadius: 999
            }} />
            <div style={{
              position: 'absolute', top: '50%', left: `${dial}%`, transform: 'translate(-50%,-50%)',
              width: 26, height: 26, borderRadius: '50%', background: accent,
              border: `4px solid ${C.tealDeep}`, boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
            }} />
          </div>
          <div style={{
            marginTop: 12, display: 'flex', justifyContent: 'space-between',
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
            letterSpacing: '0.14em', fontSize: 17, fontWeight: 600, color: 'rgba(243,236,223,0.5)'
          }}>
            <span>Low</span>
            <span>High</span>
          </div>
        </div>
      </div>
    </div>);

}

function S_RiskThesis({ num, total }) {
  return (
    <Slide bg={C.tealDeep} ink={C.cream} label="The risk thesis">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.22em',
          fontSize: 24, color: C.peach, fontWeight: 600,
          display: 'flex', alignItems: 'center', gap: 16
        }}>
          <Star size={20} color={C.peach} />
          The risk thesis
        </div>
        <h1 style={{
          fontSize: 72, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.04,
          margin: 0, color: C.cream, textWrap: 'balance'
        }}>Risk isn't one number — it's a <span style={{ color: C.peach }}>product.</span></h1>
      </div>

      <div style={{
        marginTop: 40, display: 'flex', alignItems: 'center', gap: 26, flexWrap: 'wrap',
        fontSize: 46, fontWeight: 700, color: C.cream, letterSpacing: '-0.01em', whiteSpace: 'nowrap'
      }}>
        <span>Risk</span>
        <span style={{ color: 'rgba(243,236,223,0.5)', fontWeight: 300 }}>=</span>
        <span style={{ color: C.aqua }}>Sensitivity</span>
        <span style={{ color: 'rgba(243,236,223,0.5)', fontWeight: 300 }}>×</span>
        <span style={{ color: C.coralSoft }}>Blast&nbsp;radius</span>
        <span style={{ color: 'rgba(243,236,223,0.5)', fontWeight: 300 }}>×</span>
        <span style={{ color: C.peach }}>Autonomy</span>
      </div>

      <div style={{ marginTop: 36, flex: 1, display: 'flex', alignItems: 'stretch', gap: 8 }}>
        <RiskFactor
          term="Sensitivity"
          title="What Claude reads"
          body="How private is the data flowing into the model — public schema, or employee payroll?"
          accent={C.aqua}
          dial={38} />
        
        <RiskFactor
          op
          term="Blast radius"
          title="What it can do"
          body="If it goes wrong, how far does it reach — a local file, or a write to production?"
          accent={C.coralSoft}
          dial={62} />
        
        <RiskFactor
          op
          term="Autonomy"
          title="No checkpoint"
          body="How much it acts on its own before a human reviews — suggestion, or unattended execution?"
          accent={C.peach}
          dial={25} />
        
      </div>

      <div style={{
        marginTop: 32, fontSize: 30, fontWeight: 500, lineHeight: 1.35,
        color: 'rgba(243,236,223,0.78)', maxWidth: 1640, textWrap: 'pretty'
      }}>
        These aren't one AI switch you flip on or off — they're <span style={{ color: C.peach, fontWeight: 700 }}>three dials</span> I turn up or down on <em style={{ fontStyle: 'normal', color: C.aqua }}>every workflow</em>. Risk gets re-factored per instance: drive any one dial toward zero and the product collapses with it.
      </div>

      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>);

}

Object.assign(window, { RiskFactor, S_RiskThesis });

// ─── ERP demo video ──────────────────────────────────────────────────────
function S_ERPDemo({ num, total }) {
  return (
    <VideoSlide
      num={num} total={total}
      title="The ERP, live."
      src="assets/video-4-erp-demo.mp4"
      label="ERP demo video" />);


}

// ─── ERP risk — opens a new section (placeholder) ───────────────────────
function S_ERPRisk({ num, total }) {
  const cats = [
  { t: 'Software & development', d: 'Bugs, regressions, and the discipline of shipping our own code.' },
  { t: 'Security', d: 'Auth, secrets, and who can reach what.' },
  { t: 'Row-level security (RLS)', d: 'Making sure each user only sees the rows they should.' },
  { t: 'Code & deployment', d: 'Reviews, rollbacks, and what happens when a deploy goes wrong.' }];

  return (
    <Slide bg={C.cream} label="ERP Risk">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.2em',
          fontSize: 24, color: C.coral, fontWeight: 700,
          display: 'flex', alignItems: 'center', gap: 16
        }}>
          <Star size={20} color={C.coral} />
          Risk · A new section
        </div>
        <h1 style={{
          fontSize: 72, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.04,
          margin: 0, color: C.tealInk, textWrap: 'balance'
        }}>The ERP opens a whole <span style={{ color: C.coral }}>new class of risk.</span></h1>
        <p style={{
          fontSize: TYPE_SCALE.lead, lineHeight: 1.3, margin: 0, maxWidth: 1300,
          color: 'rgba(16,50,63,0.7)', textWrap: 'pretty'
        }}>
          Reading data was one thing. Owning the software is another — these are the dimensions we now have to manage.
        </p>
      </div>

      <div style={{ marginTop: 48, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 28 }}>
        {cats.map((c, i) =>
        <div key={c.t} style={{
          background: C.white, borderRadius: 22, padding: '32px 36px',
          borderLeft: `8px solid ${C.coral}`,
          display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center',
          boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 8px 22px rgba(16,50,63,0.05)'
        }}>
            <div style={{ fontSize: 34, fontWeight: 700, color: C.tealInk, letterSpacing: '-0.01em', lineHeight: 1.1 }}>{c.t}</div>
            <div style={{ fontSize: 24, color: 'rgba(16,50,63,0.65)', lineHeight: 1.35, textWrap: 'pretty' }}>{c.d}</div>
          </div>
        )}
      </div>

      <div style={{
        marginTop: 28, fontSize: 25, color: 'rgba(16,50,63,0.55)', fontStyle: 'italic', textWrap: 'pretty'
      }}>

      </div>

      <Chrome num={num} total={total} />
    </Slide>);

}

Object.assign(window, { S_ERPDemo, S_ERPRisk });