// Shared slide primitives for the Un-othering deck.
// RW Institute design system, 1920x1080, dark-first.

const TYPE_SCALE = {
  hero: 144,       // massive display numerals / title
  title: 72,       // standard slide title
  subtitle: 44,
  body: 34,
  bodyLg: 40,
  small: 28,
  label: 26,       // section labels (uppercase, tracked)
};

const SPACING = {
  paddingTop: 100,
  paddingBottom: 100,
  paddingX: 120,
  titleGap: 52,
  itemGap: 28,
};

const RWI = {
  bg:       '#0B1D32',
  bgLow:    '#081629',
  bgLowest: '#071424',
  surface:  '#0D253F',
  surfaceHi:'#132D4A',
  bright:   '#2a3a50',
  text:     '#ffffff',
  body:     '#d3e3ff',
  muted:    '#94a3b8',
  faint:    '#64748b',
  primary:  '#F15A2E',
  primaryDim:'rgba(241,90,46,0.10)',
  secondary:'#89d1e3',
  tertiary: '#ffb877',
  borderSubtle: 'rgba(255,255,255,0.05)',
  borderAccent: 'rgba(241,90,46,0.10)',
};

const FONT_DISPLAY = "'Plus Jakarta Sans', system-ui, sans-serif";
const FONT_BODY    = "'Inter', system-ui, sans-serif";

// Constellation background overlay — the RWI signature texture
const constellationStyle = {
  backgroundImage: 'radial-gradient(circle, rgba(241,90,46,0.08) 1.5px, transparent 1.5px)',
  backgroundSize: '48px 48px',
};

// ─────────────────────────────────────────────────────────────
// Slide shell — every slide is wrapped in this
// ─────────────────────────────────────────────────────────────
function Slide({ children, bg, constellation = false, pad = true, style = {} }) {
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height: '100%',
        background: bg || RWI.bg,
        color: RWI.body,
        fontFamily: FONT_BODY,
        fontWeight: 300,
        overflow: 'hidden',
        boxSizing: 'border-box',
        ...(pad ? {
          paddingTop: SPACING.paddingTop,
          paddingBottom: SPACING.paddingBottom,
          paddingLeft: SPACING.paddingX,
          paddingRight: SPACING.paddingX,
        } : {}),
        ...style,
      }}
    >
      {constellation && (
        <div style={{
          position: 'absolute', inset: 0,
          ...constellationStyle,
          pointerEvents: 'none',
        }} />
      )}
      <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
    </div>
  );
}

// Footer corner — tiny RWI mark + slide number position
function DeckChrome({ n, total }) {
  return (
    <div style={{
      position: 'absolute',
      left: SPACING.paddingX,
      right: SPACING.paddingX,
      bottom: 48,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      fontFamily: FONT_DISPLAY,
      fontSize: 16,
      color: RWI.faint,
      letterSpacing: '0.2em',
      textTransform: 'uppercase',
      fontWeight: 500,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <img src="/articles/the-practice-of-un-othering/assets/logo-icon-orange.png" style={{ width: 22, height: 22, opacity: 0.9 }} />
        <span>RW Institute</span>
      </div>
      <div>{String(n).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
    </div>
  );
}

// Section label — signature RWI move. Uppercase, tracked, orange.
function Label({ children, style }) {
  return (
    <div style={{
      fontFamily: FONT_DISPLAY,
      fontWeight: 700,
      fontSize: TYPE_SCALE.label,
      color: RWI.primary,
      textTransform: 'uppercase',
      letterSpacing: '0.4em',
      ...style,
    }}>{children}</div>
  );
}

function Title({ children, size = TYPE_SCALE.title, style }) {
  return (
    <h1 style={{
      fontFamily: FONT_DISPLAY,
      fontWeight: 800,
      fontSize: size,
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      color: RWI.text,
      margin: 0,
      textWrap: 'pretty',
      ...style,
    }}>{children}</h1>
  );
}

function Body({ children, size = TYPE_SCALE.body, style }) {
  return (
    <p style={{
      fontFamily: FONT_BODY,
      fontWeight: 300,
      fontSize: size,
      lineHeight: 1.55,
      color: RWI.body,
      margin: 0,
      textWrap: 'pretty',
      maxWidth: 1400,
      ...style,
    }}>{children}</p>
  );
}

// Attribution (byline, source). Small, muted.
function Meta({ children, style }) {
  return (
    <div style={{
      fontFamily: FONT_BODY,
      fontWeight: 400,
      fontSize: TYPE_SCALE.small,
      color: RWI.muted,
      letterSpacing: '0.02em',
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, {
  TYPE_SCALE, SPACING, RWI, FONT_DISPLAY, FONT_BODY,
  constellationStyle, Slide, DeckChrome, Label, Title, Body, Meta,
});