// Slides 1–8 for the Un-othering deck.

// ─── 1. Title ───────────────────────────────────────────────
function Slide01_Title() {
  return (
    <Slide constellation>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
          <img src="/articles/the-practice-of-un-othering/assets/logo-icon-orange.png" style={{ width: 36, height: 36 }} />
          <div style={{ fontFamily: FONT_DISPLAY, fontSize: 26, color: RWI.body }}>
            <span style={{ fontWeight: 800, color: RWI.text }}>RW</span>
            <span style={{ fontWeight: 300, color: '#cbd5e1' }}> Institute</span>
          </div>
        </div>
        <Label style={{ marginBottom: 48 }}>Research · April 2026</Label>
        <Title size={200} style={{
          letterSpacing: '-0.04em',
          lineHeight: 0.95,
        }}>
          The practice of<br/>
          <span style={{
            background: 'linear-gradient(90deg, #F15A2E 0%, #E8734A 30%, #ffb877 55%, #89d1e3 85%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            fontStyle: 'italic',
            fontWeight: 800,
          }}>un-othering</span>
        </Title>
        <div style={{
          marginTop: 56, width: 80, height: 4, background: RWI.primary,
        }} />
        <Body size={TYPE_SCALE.subtitle} style={{ marginTop: 48, color: RWI.body, maxWidth: 1200 }}>
          Rethinking what corporate volunteering is actually for.
        </Body>
      </div>

      <div style={{
        position: 'absolute', bottom: 80, left: SPACING.paddingX,
      }}>
        <Meta style={{ color: RWI.faint, fontSize: 24, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
          rw.institute
        </Meta>
      </div>
    </Slide>
  );
}

// ─── 2. The question ────────────────────────────────────────
function Slide02_Question() {
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>The premise</Label>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
        <div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 300,
            fontSize: 96, lineHeight: 1.1, color: RWI.text, letterSpacing: '-0.02em',
            maxWidth: 1500,
          }}>
            What <span style={{ fontStyle: 'italic', fontWeight: 800, color: RWI.primary }}>actually changes</span> as a result of<br/>
            corporate volunteering —
          </div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 300,
            fontSize: 96, lineHeight: 1.1, color: RWI.muted, marginTop: 24, letterSpacing: '-0.02em',
          }}>
            and what doesn't?
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ─── 3. Systemic impact is downstream of internal shift ─────
function Slide03_Downstream() {
  const Step = ({ n, label, bold }) => (
    <div style={{
      flex: 1,
      background: RWI.surface,
      border: '1px solid ' + RWI.borderAccent,
      borderRadius: 16,
      padding: '36px 36px 40px',
      display: 'flex', flexDirection: 'column', gap: 18,
      minHeight: 240,
    }}>
      <div style={{ fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 700,
        color: RWI.primary, letterSpacing: '0.3em', textTransform: 'uppercase' }}>
        Step {n}
      </div>
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: bold ? 800 : 600,
        fontSize: 36, lineHeight: 1.2, color: bold ? RWI.text : RWI.body,
        letterSpacing: '-0.015em',
      }}>{label}</div>
    </div>
  );
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>The honest answer</Label>
      <Title style={{ marginBottom: 80 }}>
        Systemic impact is <span style={{ color: RWI.primary, fontStyle: 'italic' }}>almost always</span> downstream from internal shift.
      </Title>
      <div style={{
        display: 'flex', gap: 24, alignItems: 'stretch',
      }}>
        <Step n="01" label="A person volunteers." />
        <Arrow />
        <Step n="02" label="They come home seeing differently, thinking differently." />
        <Arrow />
        <Step n="03" label="Over a decade, that reshapes how their company hires, buys, speaks, invests." bold />
      </div>
      <Body style={{ marginTop: 56, fontSize: TYPE_SCALE.body, color: RWI.muted, maxWidth: 1500 }}>
        Volunteering changes communities long-term <em style={{ color: RWI.body }}>to the extent</em> that it first changes individuals.
      </Body>
    </Slide>
  );
}
function Arrow() {
  return (
    <div style={{ alignSelf: 'center', color: RWI.primary, fontSize: 48, padding: '0 4px' }}>
      →
    </div>
  );
}

// ─── 4. Saviorism ───────────────────────────────────────────
function Slide04_Saviorism() {
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>The trap</Label>
      <div style={{ display: 'flex', gap: 80, flex: 1, alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <Title style={{ fontSize: 96, lineHeight: 1.04 }}>
            Even well-intentioned volunteers can step in as <span style={{ fontStyle: 'italic', color: RWI.primary }}>the one who came to help</span>.
          </Title>
        </div>
        <div style={{
          flex: 1,
          display: 'flex', flexDirection: 'column', gap: 24,
          paddingLeft: 48,
          borderLeft: '1px solid ' + RWI.borderSubtle,
        }}>
          <Body size={TYPE_SCALE.bodyLg} style={{ color: RWI.body }}>
            The one with something to give.
          </Body>
          <Body size={TYPE_SCALE.bodyLg} style={{ color: RWI.body }}>
            The one who can make a difference.
          </Body>
          <Body size={TYPE_SCALE.bodyLg} style={{ color: RWI.body }}>
            It is almost never conscious.
          </Body>
          <div style={{ height: 1, background: RWI.borderSubtle, margin: '12px 0' }}/>
          <Body size={TYPE_SCALE.body} style={{ color: RWI.muted, fontStyle: 'italic' }}>
            But when it's there, it reinforces the very us-and-them machinery that volunteering has the power to dismantle.
          </Body>
        </div>
      </div>
    </Slide>
  );
}

// ─── 5. Three questions ─────────────────────────────────────
function Slide05_ThreeQuestions() {
  const Q = ({ n, q }) => (
    <div style={{
      flex: 1,
      background: 'rgba(19,45,74,0.4)',
      border: '1px solid ' + RWI.borderAccent,
      borderRadius: 16, padding: 48,
      display: 'flex', flexDirection: 'column', gap: 28,
      backdropFilter: 'blur(24px)',
    }}>
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 72,
        color: RWI.primary, lineHeight: 1,
        letterSpacing: '-0.03em',
      }}>{n}</div>
      <div style={{
        fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontWeight: 500,
        fontSize: 42, lineHeight: 1.2, color: RWI.text,
        letterSpacing: '-0.015em',
      }}>{q}</div>
    </div>
  );
  return (
    <Slide constellation>
      <Label style={{ marginBottom: SPACING.titleGap }}>Three questions</Label>
      <Title style={{ marginBottom: 64 }}>
        When this language is new, three questions surface.
      </Title>
      <div style={{ display: 'flex', gap: 28, flex: 1 }}>
        <Q n="01" q="What is othering?" />
        <Q n="02" q="What is un-othering?" />
        <Q n="03" q="How does volunteering help?" />
      </div>
    </Slide>
  );
}

// ─── 6. What is othering? ───────────────────────────────────
function Slide06_WhatIsOthering() {
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>01 · What is othering?</Label>
      <div style={{ display: 'flex', gap: 96, flex: 1, alignItems: 'flex-start' }}>
        <div style={{ flex: 1.1 }}>
          <Title style={{ fontSize: 88, lineHeight: 1.06 }}>
            Not an opinion. Not a choice.<br/>
            <span style={{ color: RWI.primary, fontStyle: 'italic' }}>A neural setting.</span>
          </Title>
          <Body size={TYPE_SCALE.body} style={{ marginTop: 48, color: RWI.body, maxWidth: 760 }}>
            When the brain categorizes a person as <em>not&#8209;us</em> — by color, class, language, faith, zip code, accent, uniform, anything —
            the region responsible for <em>mentalizing</em> throttles back.
          </Body>
          <Body size={TYPE_SCALE.body} style={{ marginTop: 28, color: RWI.muted, maxWidth: 760 }}>
            We still see them. We stop processing them as fully human.
          </Body>
        </div>
        <div style={{
          width: 1, alignSelf: 'stretch', background: RWI.borderSubtle,
        }}/>
        <div style={{ flex: 0.9, paddingTop: 12 }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 700,
            color: RWI.secondary, letterSpacing: '0.3em', textTransform: 'uppercase',
            marginBottom: 32,
          }}>Evolutionary origin</div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 52, fontWeight: 600, lineHeight: 1.15, color: RWI.text,
            letterSpacing: '-0.02em',
          }}>
            Hardwired to keep our ancestors loyal to their tribe —
            because the tribe meant safety.
          </div>
          <div style={{
            marginTop: 40, padding: '24px 32px',
            borderLeft: '3px solid ' + RWI.primary,
            background: 'rgba(241,90,46,0.06)',
          }}>
            <div style={{
              fontFamily: FONT_BODY, fontStyle: 'italic', fontSize: 30, lineHeight: 1.4,
              color: RWI.body,
            }}>
              The operating system we're all running underneath the conscious mind — in every room, every day.
            </div>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ─── 7. The wall diagram ────────────────────────────────────
function Slide07_TheWall() {
  const Person = ({ label, sub, variant }) => (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
    }}>
      <div style={{
        width: 200, height: 200, borderRadius: '50%',
        background: variant === 'us' ? RWI.surface : 'rgba(19,45,74,0.3)',
        border: '2px solid ' + (variant === 'us' ? RWI.primary : RWI.muted),
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: FONT_DISPLAY, fontSize: 72, fontWeight: 800,
        color: variant === 'us' ? RWI.primary : RWI.muted,
      }}>{label}</div>
      <div style={{
        fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 600,
        color: variant === 'us' ? RWI.text : RWI.muted,
        letterSpacing: '0.1em', textTransform: 'uppercase',
      }}>{sub}</div>
    </div>
  );
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>The mechanism</Label>
      <Title style={{ marginBottom: 72 }}>
        What the brain puts between us.
      </Title>
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 56,
      }}>
        <Person label="us" sub="Mentalizing on" variant="us" />
        {/* The wall */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
          <div style={{
            width: 12, height: 320,
            background: 'repeating-linear-gradient(to bottom, ' + RWI.primary + ' 0 24px, transparent 24px 36px)',
          }}/>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 24, fontWeight: 700,
            color: RWI.primary, textTransform: 'uppercase', letterSpacing: '0.3em',
          }}>The wall</div>
        </div>
        <Person label="them" sub="Processed as category" variant="them" />
      </div>
      <Body style={{
        marginTop: 40, textAlign: 'center', alignSelf: 'center',
        color: RWI.muted, maxWidth: 1100, fontStyle: 'italic',
      }}>
        Un-othering starts with noticing that wall.
      </Body>
    </Slide>
  );
}

// ─── 8. What is un-othering? ────────────────────────────────
function Slide08_WhatIsUnothering() {
  return (
    <Slide constellation>
      <Label style={{ marginBottom: SPACING.titleGap }}>02 · What is un-othering?</Label>
      <Title style={{ fontSize: 104, lineHeight: 1.04, marginBottom: 64, maxWidth: 1600 }}>
        A muscle. <span style={{ color: RWI.muted }}>Not a mood.</span>
      </Title>
      <div style={{ display: 'flex', gap: 80, flex: 1 }}>
        <div style={{ flex: 1, paddingRight: 40, borderRight: '1px solid ' + RWI.borderSubtle }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 700,
            color: RWI.primary, letterSpacing: '0.3em', textTransform: 'uppercase',
            marginBottom: 28,
          }}>It is NOT</div>
          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            fontFamily: FONT_BODY, fontSize: TYPE_SCALE.body, lineHeight: 1.5,
            color: RWI.muted, display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            <li>— A feeling of universal love</li>
            <li>— Colorblindness</li>
            <li>— Good intentions</li>
            <li>— Cognitive information</li>
          </ul>
        </div>
        <div style={{ flex: 1.3 }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 700,
            color: RWI.secondary, letterSpacing: '0.3em', textTransform: 'uppercase',
            marginBottom: 28,
          }}>It IS</div>
          <Body size={TYPE_SCALE.bodyLg} style={{ color: RWI.text, marginBottom: 24 }}>
            The deliberate, trainable practice of keeping the mentalizing machinery <em>online</em> across group lines.
          </Body>
          <Body size={TYPE_SCALE.body} style={{ color: RWI.body }}>
            Small, specific neurological acts. Requires repetition, proximity, and structured reflection.
          </Body>
          <div style={{
            marginTop: 40, display: 'flex', gap: 24,
            fontFamily: FONT_DISPLAY, fontSize: 28, fontWeight: 600,
          }}>
            <span style={{ color: RWI.primary }}>Strengthened through practice.</span>
            <span style={{ color: RWI.faint }}>Lost through disuse.</span>
          </div>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, {
  Slide01_Title, Slide02_Question, Slide03_Downstream, Slide04_Saviorism,
  Slide05_ThreeQuestions, Slide06_WhatIsOthering, Slide07_TheWall, Slide08_WhatIsUnothering,
});
