// Slides 9–17 for the Un-othering deck.

// ─── 9. Why volunteering works ──────────────────────────────
function Slide09_WhyVolunteering() {
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>03 · How volunteering helps</Label>
      <Title style={{ marginBottom: 72, maxWidth: 1600 }}>
        A reliable environment for strengthening the muscle.
      </Title>
      <div style={{ display: 'flex', gap: 32, flex: 1 }}>
        {[
          { n: '01', t: 'Proximity', d: 'People come into contact with others they would not otherwise encounter.' },
          { n: '02', t: 'A shared task', d: 'The hierarchy of helper and helped dissolves into participants in the same work.' },
          { n: '03', t: 'Enough time', d: 'Long enough for the brain to process people as individuals, not categories.' },
          { n: '04', t: 'Storytelling', d: 'Stories activate mentalizing. Mentalizing releases oxytocin. Oxytocin strengthens trust.' },
        ].map((x, i) => (
          <div key={i} style={{
            flex: 1,
            background: RWI.surface,
            border: '1px solid ' + RWI.borderAccent,
            borderRadius: 16,
            padding: '40px 36px',
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div style={{
              fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 700,
              color: RWI.primary, letterSpacing: '0.3em', textTransform: 'uppercase',
            }}>{x.n}</div>
            <div style={{
              fontFamily: FONT_DISPLAY, fontSize: 44, fontWeight: 700,
              color: RWI.text, lineHeight: 1.1, letterSpacing: '-0.02em',
            }}>{x.t}</div>
            <div style={{
              fontFamily: FONT_BODY, fontSize: 26, fontWeight: 300,
              color: RWI.body, lineHeight: 1.45,
            }}>{x.d}</div>
          </div>
        ))}
      </div>
    </Slide>
  );
}

// ─── 10. The evidence ───────────────────────────────────────
function Slide10_Evidence() {
  return (
    <Slide constellation bg={RWI.bgLow}>
      <Label style={{ marginBottom: SPACING.titleGap }}>The evidence</Label>
      <Title style={{ marginBottom: 80, maxWidth: 1600 }}>
        Decades of intergroup contact research say the same thing.
      </Title>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, flex: 1, alignContent: 'center',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 260, lineHeight: 0.9,
            color: RWI.primary, letterSpacing: '-0.05em',
          }}>500+</div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 36, fontWeight: 600, color: RWI.text,
            letterSpacing: '-0.01em',
          }}>studies aggregated in one meta-analysis</div>
          <div style={{
            fontFamily: FONT_BODY, fontSize: 26, color: RWI.muted,
          }}>Structured cross-group contact reliably reduces prejudice.</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 260, lineHeight: 0.9,
            letterSpacing: '-0.05em',
            background: 'linear-gradient(90deg, #F15A2E, #ffb877)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>⅓</div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 36, fontWeight: 600, color: RWI.text,
            letterSpacing: '-0.01em',
          }}>more change from friendship-level contact</div>
          <div style={{
            fontFamily: FONT_BODY, fontSize: 26, color: RWI.muted,
          }}>vs. casual exposure alone.</div>
        </div>
      </div>
      <div style={{
        marginTop: 24,
        fontFamily: FONT_BODY, fontStyle: 'italic', fontSize: 24, color: RWI.faint,
      }}>Source: Pettigrew &amp; Tropp meta-analysis of intergroup contact effects.</div>
    </Slide>
  );
}

// ─── 11. When designed well ─────────────────────────────────
function Slide11_Qualifier() {
  return (
    <Slide bg={RWI.bgLowest}>
      <Label style={{ marginBottom: SPACING.titleGap, color: RWI.primary }}>The qualifier</Label>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
        <div style={{ maxWidth: 1600 }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 300, fontSize: 88, lineHeight: 1.1,
            color: RWI.muted, letterSpacing: '-0.02em',
          }}>Volunteering strengthens the muscle —</div>
          <div style={{
            marginTop: 24,
            fontFamily: FONT_DISPLAY, fontWeight: 800, fontStyle: 'italic', fontSize: 168,
            color: RWI.primary, letterSpacing: '-0.04em', lineHeight: 1,
          }}>when designed well.</div>
          <div style={{
            marginTop: 64, paddingLeft: 32,
            borderLeft: '3px solid ' + RWI.primary,
            maxWidth: 1400,
          }}>
            <Body size={TYPE_SCALE.bodyLg} style={{ color: RWI.body }}>
              A volunteer day that never closes the distance between volunteer and community — that keeps one as benefactor and the other as grateful recipient — does not produce un-othering.
            </Body>
            <Body size={TYPE_SCALE.body} style={{ color: RWI.muted, marginTop: 24, fontStyle: 'italic' }}>
              In fact, it often produces the opposite.
            </Body>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ─── 12. Social REV LIVE pushback ───────────────────────────
function Slide12_Pushback() {
  const Q = (text) => (
    <div style={{
      fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontWeight: 500,
      fontSize: 36, lineHeight: 1.35, color: RWI.text, letterSpacing: '-0.015em',
      paddingLeft: 32, borderLeft: '2px solid ' + RWI.primary,
    }}>{text}</div>
  );
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>From the field</Label>
      <Title style={{ marginBottom: 64, maxWidth: 1700 }}>
        Practitioners pushed back — and they were right to.
      </Title>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, flex: 1, alignContent: 'start',
      }}>
        {Q('If you\'re asking me to stop othering, are you asking me to stop seeing?')}
        {Q('To stop naming that my community has been redlined, surveilled, underpaid, underestimated?')}
        {Q('To stop noticing who is in the room and who is not?')}
        {Q('I\'ve spent too long being told I\'m welcome on the condition that I show up like everyone else.')}
      </div>
      <Body style={{ marginTop: 40, color: RWI.muted, fontStyle: 'italic', maxWidth: 1600 }}>
        Melting pots melt. Colorblindness can mean choosing not to see the color just used to deny someone a mortgage. If un-othering meant that, the instinct to refuse it would be correct.
      </Body>
    </Slide>
  );
}

// ─── 13. What othering actually is ──────────────────────────
function Slide13_WhatItActuallyIs() {
  return (
    <Slide bg={RWI.bgLow}>
      <Label style={{ marginBottom: SPACING.titleGap }}>Where the damage lives</Label>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 400, fontSize: 64, lineHeight: 1.2,
          color: RWI.muted, letterSpacing: '-0.015em', maxWidth: 1700,
        }}>
          Othering, in the sense we teach, is
          <span style={{ textDecoration: 'line-through', color: RWI.faint, marginLeft: 16, marginRight: 16 }}>
            not the perception of difference.
          </span>
        </div>
        <div style={{ height: 48 }}/>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 144, lineHeight: 1.02,
          color: RWI.text, letterSpacing: '-0.035em', maxWidth: 1700,
        }}>
          It is the <span style={{ color: RWI.primary, fontStyle: 'italic' }}>withdrawal of moral concern</span>.
        </div>
        <div style={{
          marginTop: 72, display: 'flex', gap: 28, flexWrap: 'wrap',
        }}>
          {[
            'Walking past a “homeless” encampment without registering the people inside it.',
            'Reading about the removal of protections for trans youth and feeling nothing.',
            'Hiring from the same three schools for the fifteenth year — without noticing who we keep leaving out.',
          ].map((t, i) => (
            <div key={i} style={{
              flex: '1 1 420px',
              padding: '28px 32px',
              background: 'rgba(19,45,74,0.4)',
              border: '1px solid ' + RWI.borderAccent,
              borderRadius: 12,
              fontFamily: FONT_BODY, fontSize: 24, lineHeight: 1.45,
              color: RWI.body, fontWeight: 300,
            }}>{t}</div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// ─── 14. Belonging isn't sameness ───────────────────────────
function Slide14_Belonging() {
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>Belonging, clarified</Label>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
        <div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 300, fontSize: 80, lineHeight: 1.1,
            color: RWI.muted, letterSpacing: '-0.02em', maxWidth: 1600,
          }}>
            We are not expanding a <span style={{ textDecoration: 'line-through' }}>uniform</span>.
          </div>
          <div style={{
            marginTop: 40,
            fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 104, lineHeight: 1.04,
            color: RWI.text, letterSpacing: '-0.03em', maxWidth: 1700,
          }}>
            We are expanding the group of people we treat as
            <span style={{ color: RWI.primary }}> fully worthy of moral attention</span>.
          </div>
          <div style={{
            marginTop: 72, padding: '32px 40px',
            borderLeft: '3px solid ' + RWI.secondary,
            background: 'rgba(137,209,227,0.06)',
            maxWidth: 1400,
          }}>
            <Body size={TYPE_SCALE.bodyLg} style={{ color: RWI.body, fontStyle: 'italic' }}>
              The people inside that circle are not the same as each other. They were never supposed to be. A circle that demands sameness is not belonging.
            </Body>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ─── 15. For / To / With ────────────────────────────────────
function Slide15_ForToWith() {
  const Col = ({ word, lede, body, accent, dim }) => (
    <div style={{
      flex: 1,
      padding: '56px 44px 48px',
      background: dim ? 'rgba(19,45,74,0.25)' : RWI.surface,
      border: '1px solid ' + (dim ? RWI.borderSubtle : accent),
      borderRadius: 20,
      display: 'flex', flexDirection: 'column', gap: 24,
      opacity: dim ? 0.75 : 1,
    }}>
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 160,
        letterSpacing: '-0.04em', lineHeight: 0.95,
        color: dim ? RWI.muted : accent, fontStyle: 'italic',
      }}>{word}</div>
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: 700, fontSize: 34,
        color: dim ? RWI.body : RWI.text, letterSpacing: '-0.015em',
        lineHeight: 1.2,
      }}>{lede}</div>
      <div style={{
        fontFamily: FONT_BODY, fontWeight: 300, fontSize: 24, lineHeight: 1.5,
        color: RWI.muted,
      }}>{body}</div>
    </div>
  );
  return (
    <Slide>
      <Label style={{ marginBottom: SPACING.titleGap }}>The posture underneath</Label>
      <Title style={{ marginBottom: 64 }}>
        Doing something <span style={{ color: RWI.muted }}>for</span>, <span style={{ color: RWI.muted }}>to</span>, or <span style={{ color: RWI.primary, fontStyle: 'italic' }}>with</span> someone.
      </Title>
      <div style={{ display: 'flex', gap: 24, flex: 1 }}>
        <Col
          word="for"
          lede="Advocacy at a distance"
          body="Often practiced by people who never meet the person they claim to stand beside."
          accent={RWI.muted}
          dim
        />
        <Col
          word="to"
          lede="Charity, in its least generous form"
          body="Benefactor and beneficiary, roles fixed in place. Dignity exchanged for a donation."
          accent={RWI.muted}
          dim
        />
        <Col
          word="with"
          lede="Partnership. Mutual change."
          body="Helper and helped dissolve into participants in the same unfinished project."
          accent={RWI.primary}
        />
      </div>
    </Slide>
  );
}

// ─── 16. Building capacity for empathy ──────────────────────
function Slide16_Capacity() {
  return (
    <Slide constellation>
      <Label style={{ marginBottom: SPACING.titleGap }}>What we are actually building</Label>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
        <div style={{ maxWidth: 1700 }}>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 132, lineHeight: 1.02,
            letterSpacing: '-0.035em', color: RWI.text,
          }}>
            The capacity for <span style={{
              background: 'linear-gradient(90deg, #F15A2E, #ffb877, #89d1e3)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              fontStyle: 'italic',
            }}>empathy</span>.
          </div>
          <div style={{
            marginTop: 56, display: 'flex', gap: 20, alignItems: 'center',
            fontFamily: FONT_DISPLAY, fontSize: 34, fontWeight: 500, color: RWI.body,
          }}>
            <span>Experience by experience</span>
            <span style={{ color: RWI.primary }}>·</span>
            <span>reflection by reflection</span>
            <span style={{ color: RWI.primary }}>·</span>
            <span style={{ color: RWI.muted, fontStyle: 'italic' }}>until it becomes the default.</span>
          </div>
          <div style={{ height: 64 }}/>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
          }}>
            {[
              ['The next hiring panel', '→'],
              ['The next vendor decision', '→'],
              ['The next difficult conversation', '→'],
              ['The dinner table', ''],
            ].map(([t, arrow], i) => (
              <div key={i} style={{
                padding: '28px 24px',
                background: 'rgba(19,45,74,0.4)',
                border: '1px solid ' + RWI.borderAccent,
                borderRadius: 12,
                fontFamily: FONT_DISPLAY, fontWeight: 600, fontSize: 26,
                color: RWI.text, letterSpacing: '-0.01em',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span>{t}</span>
                <span style={{ color: RWI.primary, fontSize: 28 }}>{arrow}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ─── 17. Call to action ─────────────────────────────────────
function Slide17_Close() {
  return (
    <Slide bg={RWI.bgLowest} constellation>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32 }}>
          <img src="/articles/the-practice-of-un-othering/assets/logo-icon-orange.png" style={{ width: 32, height: 32 }} />
          <div style={{ fontFamily: FONT_DISPLAY, fontSize: 26 }}>
            <span style={{ fontWeight: 800, color: RWI.text }}>RW</span>
            <span style={{ fontWeight: 300, color: '#cbd5e1' }}> Institute</span>
          </div>
        </div>
        <Label style={{ marginBottom: 40 }}>For CSR &amp; social impact leaders</Label>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 300, fontSize: 54, lineHeight: 1.2,
          color: RWI.muted, letterSpacing: '-0.02em',
        }}>Stop asking what your volunteer day delivered to the community.</div>
        <div style={{ height: 32 }}/>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 104, lineHeight: 1.02,
          color: RWI.text, letterSpacing: '-0.035em', maxWidth: 1700,
        }}>
          Start asking what it <span style={{ color: RWI.primary, fontStyle: 'italic' }}>
            changed in the people
          </span> who showed up.
        </div>
        <Body size={TYPE_SCALE.body} style={{ marginTop: 48, color: RWI.body, maxWidth: 1500 }}>
          Design for transformation, not transaction. Build the facilitation architecture that turns an ordinary day of service into a durable shift in how people see.
        </Body>
        <div style={{
          marginTop: 48, display: 'flex', gap: 32, alignItems: 'center',
        }}>
          <div style={{
            padding: '20px 36px',
            background: 'linear-gradient(45deg, #F15A2E, #F59328)',
            borderRadius: 9999,
            fontFamily: FONT_DISPLAY, fontWeight: 700, fontSize: 26, color: '#fff',
            boxShadow: '0 10px 15px -3px rgba(241, 90, 46, 0.2)',
          }}>rw.institute</div>
          <div style={{ fontFamily: FONT_BODY, fontSize: 24, color: RWI.muted }}>
            RW Institute · research, practice, community
          </div>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, {
  Slide09_WhyVolunteering, Slide10_Evidence, Slide11_Qualifier,
  Slide12_Pushback, Slide13_WhatItActuallyIs, Slide14_Belonging,
  Slide15_ForToWith, Slide16_Capacity, Slide17_Close,
});
