// gubertech/slides.jsx
// Generated by deck-gen — narrative-first, custom per case.
// Primitives (SlideFrame, DeckTitle, CornerNum, CornerLabel, Sig,
//   CountUp, entry, useSlideActive, TYPE_SCALE,
//   SPACING, FONT_SANS, FONT_MONO) come from /shared/primitives.jsx

// ── SlideCover (index 0) ──────────────────────────────────────────────────
function SlideCover({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(0);
  return (
    <SlideFrame c={c} deckBg>
      <CornerNum c={c} index={1} total={total} />

      {/* Eyebrow line */}
      <div style={{
        position: 'absolute', left: 80, top: 200,
        fontFamily: FONT_MONO, fontSize: 13, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: c.primary,
        display: 'flex', alignItems: 'center', gap: 16,
        ...entry('fade', { tick, delay: 160, duration: 560 }),
      }}>
        <span style={{ display: 'inline-block', width: 42, height: 1, background: 'currentColor', opacity: 0.62 }} />
        <span>{t('cover.eyebrow')}</span>
      </div>

      {/* Main title */}
      <div style={{
        position: 'absolute', left: 80, top: 260,
        ...entry('rise', { tick, delay: 240, duration: 880 }),
      }}>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 760,
          fontSize: 174, lineHeight: 0.88,
          letterSpacing: '-0.055em',
          color: c.fg,
        }}>{t('cover.line1')}</div>
        <div style={{
          marginTop: 8,
          fontFamily: FONT_SANS, fontWeight: 340,
          fontSize: 174, lineHeight: 0.88,
          letterSpacing: '-0.055em',
          color: c.fgMuted,
        }}>
          <span style={{ color: c.primary, fontStyle: 'italic' }}>{t('cover.line2a')}</span>
          {' '}{t('cover.line2b')}
        </div>
      </div>

      {/* Tagline */}
      <div style={{
        position: 'absolute', left: 80, bottom: 136,
        fontFamily: FONT_MONO, fontSize: 14,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: c.fgMuted,
        ...entry('fade-up', { tick, delay: 500, duration: 600 }),
      }}>
        {t('cover.tagline')}
      </div>

      {/* Divider */}
      <div style={{
        position: 'absolute', left: 80, right: 80, bottom: 104,
        height: 1, background: 'rgba(244,246,250,0.22)',
        transformOrigin: 'left',
        ...entry('sweep-x', { tick, delay: 600, duration: 900 }),
      }} />

      {/* Footer */}
      <div style={{
        position: 'absolute', left: 80, right: 80, bottom: 56,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: FONT_MONO, fontSize: 13, fontWeight: 700,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: c.fgMuted,
        ...entry('fade-up', { tick, delay: 700, duration: 700 }),
      }}>
        <span>{t('cover.footer_name')}</span>
        <span>{t('cover.footer_year')}</span>
        <span>{t('cover.footer_location')}</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {t('cover.footer_cta')}
          <span style={{ display: 'inline-block', width: 28, height: 1, background: c.fgMuted }} />
        </span>
      </div>
    </SlideFrame>
  );
}

// ── SlideRole (index 1) ───────────────────────────────────────────────────
function SlideRole({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(1);
  const rows = t('role.rows');
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('role.corner')} />
      <CornerNum c={c} index={2} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('role.eyebrow')}
        line1={t('role.line1')}
        line2={t('role.line2')}
      />

      {/* Role table */}
      <div style={{
        position: 'absolute', right: 96, top: 220,
        width: 760,
        display: 'flex', flexDirection: 'column', gap: 0,
        ...entry('fade-up', { tick, delay: 300, duration: 700 }),
      }}>
        {Array.isArray(rows) && rows.map((row, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '160px 1fr',
            borderTop: `1px solid ${c.rule}`,
            paddingTop: 28, paddingBottom: 28,
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: c.fgDim,
              paddingTop: 6,
            }}>{row.k}</div>
            <div>
              <div style={{
                fontFamily: FONT_SANS, fontWeight: 500,
                fontSize: TYPE_SCALE.lead,
                letterSpacing: '-0.02em', lineHeight: 1.05,
                color: c.fg,
              }}>{row.v}</div>
              {row.note && (
                <div style={{
                  marginTop: 8,
                  fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
                  color: c.fgDim, letterSpacing: '0.08em',
                }}>{row.note}</div>
              )}
            </div>
          </div>
        ))}
        <div style={{ borderTop: `1px solid ${c.rule}` }} />
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideContext (index 2) ────────────────────────────────────────────────
function SlideContext({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(2);
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('context.corner')} />
      <CornerNum c={c} index={3} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('context.eyebrow')}
        line1={t('context.line1')}
        line2={t('context.line2')}
      />

      {/* Central context block */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: 'translate(-50%, -40%)',
        textAlign: 'center',
        maxWidth: 900,
        ...entry('fade-up', { tick, delay: 280, duration: 800 }),
      }}>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 300,
          fontSize: TYPE_SCALE.subtitle,
          letterSpacing: '-0.03em', lineHeight: 1.2,
          color: c.fgMuted,
          fontStyle: 'italic',
        }}>
          "{t('context.summary')}"
        </div>
        <div style={{
          marginTop: 40,
          fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
          color: c.fgDim, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>{t('context.timeline')}</div>
      </div>

      {/* Verdict */}
      <div style={{
        position: 'absolute', right: 96, bottom: 140,
        textAlign: 'right',
        ...entry('fade', { tick, delay: 500, duration: 600 }),
      }}>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 600,
          fontSize: TYPE_SCALE.lead,
          letterSpacing: '-0.025em',
          color: c.fg,
        }}>{t('context.verdict_line1')}</div>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 400,
          fontSize: TYPE_SCALE.lead,
          letterSpacing: '-0.025em',
          color: c.primary,
          fontStyle: 'italic',
        }}>{t('context.verdict_line2')}</div>
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideProblem (index 3) ────────────────────────────────────────────────
function SlideProblem({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(3);
  const rows = t('problem.rows');
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('problem.corner')} />
      <CornerNum c={c} index={4} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('problem.eyebrow')}
        line1={t('problem.line1')}
        line2={t('problem.line2')}
      />

      {/* Root cause */}
      <div style={{
        position: 'absolute', left: 96, top: 420,
        display: 'flex', alignItems: 'center', gap: 20,
        ...entry('fade-up', { tick, delay: 220, duration: 600 }),
      }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: c.fgDim,
        }}>{t('problem.root_label')}</div>
        <div style={{ width: 1, height: 20, background: c.rule }} />
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 600,
          fontSize: TYPE_SCALE.body,
          color: c.accent,
          letterSpacing: '-0.015em',
        }}>{t('problem.root_text')}</div>
      </div>

      {/* Problem rows */}
      <div style={{
        position: 'absolute', left: 96, right: 96, bottom: 112,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {Array.isArray(rows) && rows.map((row, i) => (
          <div key={i} style={{
            border: `1px solid ${c.rule}`,
            padding: '32px 36px',
            display: 'flex', flexDirection: 'column', gap: 16,
            ...entry('fade-up', { tick, delay: 320 + i * 120, duration: 700 }),
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: 11,
              letterSpacing: '0.20em', textTransform: 'uppercase',
              color: i === 0 ? c.primary : c.accent,
            }}>{row.tag}</div>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 500,
              fontSize: TYPE_SCALE.small,
              letterSpacing: '-0.02em', lineHeight: 1.25,
              color: c.fg,
            }}>{row.headline}</div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            }}>
              {Array.isArray(row.steps) && row.steps.map((step, j) => (
                <React.Fragment key={j}>
                  <span style={{
                    fontFamily: FONT_MONO, fontSize: 11,
                    color: c.fgDim, letterSpacing: '0.06em',
                  }}>{step}</span>
                  {j < row.steps.length - 1 && (
                    <span style={{ color: c.fgDim, fontSize: 12 }}>→</span>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        ))}
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideBefore (index 4) ─────────────────────────────────────────────────
function SlideBefore({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(4);
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('before.corner')} />
      <CornerNum c={c} index={5} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('before.eyebrow')}
        line1={t('before.line1')}
        line2={t('before.line2')}
      />

      {/* Placeholder area */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 380, bottom: 112,
        border: `1.5px dashed ${c.rule}`,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        gap: 16,
        ...entry('fade', { tick, delay: 300, duration: 600 }),
      }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: TYPE_SCALE.small,
          color: c.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>
          Screenshots · adicionar em assets/img/
        </div>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 300,
          fontSize: TYPE_SCALE.body,
          color: c.fgDim, fontStyle: 'italic',
        }}>
          {t('before.placeholder_hint')}
        </div>
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideProcess (index 5) ────────────────────────────────────────────────
function SlideProcess({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(5);
  const steps = t('process.steps');
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('process.corner')} />
      <CornerNum c={c} index={6} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('process.eyebrow')}
        line1={t('process.line1')}
        line2={t('process.line2')}
      />

      {/* Steps */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 380, bottom: 112,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        {Array.isArray(steps) && steps.map((step, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '72px 1fr',
            alignItems: 'start', gap: 32,
            borderTop: `1px solid ${c.rule}`,
            paddingTop: 24, paddingBottom: 24,
            ...entry('fade-up', { tick, delay: 200 + i * 100, duration: 700 }),
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.lead,
              fontWeight: 700, color: c.primary,
              letterSpacing: '-0.02em',
            }}>{step.n}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{
                fontFamily: FONT_SANS, fontWeight: 500,
                fontSize: TYPE_SCALE.small,
                letterSpacing: '-0.02em', lineHeight: 1.15,
                color: c.fg,
              }}>{step.t}</div>
              <div style={{
                fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
                color: c.fgDim, letterSpacing: '0.06em',
                lineHeight: 1.5,
              }}>{step.sub}</div>
            </div>
          </div>
        ))}
        <div style={{ borderTop: `1px solid ${c.rule}` }} />
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideInsight (index 6) ────────────────────────────────────────────────
function SlideInsight({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(6);
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('insight.corner')} />
      <CornerNum c={c} index={7} total={total} />

      {/* Eyebrow */}
      <div style={{
        position: 'absolute', left: 96, top: 88,
        fontFamily: FONT_MONO, fontSize: 13, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: c.primary,
        display: 'flex', alignItems: 'center', gap: 16,
        ...entry('fade', { tick, duration: 500 }),
      }}>
        <span style={{ width: 42, height: 1, background: 'currentColor', opacity: 0.62 }} />
        <span>{t('insight.eyebrow')}</span>
      </div>

      {/* Central stat */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '46%',
        transform: 'translate(-50%, -50%)',
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 700,
          fontSize: TYPE_SCALE.display,
          letterSpacing: '-0.05em', lineHeight: 0.88,
          color: c.primary,
          ...entry('rise', { tick, delay: 100, duration: 900 }),
        }}>
          <CountUp value={t('insight.stat')} tick={tick} duration={1000} />
        </div>
        <div style={{
          marginTop: 24,
          fontFamily: FONT_SANS, fontWeight: 500,
          fontSize: TYPE_SCALE.lead,
          letterSpacing: '-0.025em', lineHeight: 1.2,
          color: c.fg,
          maxWidth: 800,
          ...entry('fade-up', { tick, delay: 300, duration: 700 }),
        }}>
          {t('insight.headline')}
        </div>
        <div style={{
          marginTop: 12,
          fontFamily: FONT_SANS, fontWeight: 300,
          fontSize: TYPE_SCALE.body,
          color: c.fgMuted, fontStyle: 'italic',
          maxWidth: 680,
          margin: '12px auto 0',
          ...entry('fade', { tick, delay: 500, duration: 700 }),
        }}>
          {t('insight.sub')}
        </div>
      </div>

      {/* Evidence pair */}
      <div style={{
        position: 'absolute', left: 96, right: 96, bottom: 112,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[t('insight.evidence1'), t('insight.evidence2')].map((ev, i) => (
          <div key={i} style={{
            borderTop: `1px solid ${c.rule}`,
            paddingTop: 20,
            display: 'flex', gap: 20, alignItems: 'flex-start',
            ...entry('fade-up', { tick, delay: 500 + i * 120, duration: 600 }),
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: c.fgDim, paddingTop: 4, minWidth: 80,
            }}>{ev.label}</div>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 400,
              fontSize: TYPE_SCALE.body, lineHeight: 1.35,
              color: c.fgMuted,
            }}>{ev.body}</div>
          </div>
        ))}
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideWork (index 7) ───────────────────────────────────────────────────
function SlideWork({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(7);
  const items = t('work.items');
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('work.corner')} />
      <CornerNum c={c} index={8} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('work.eyebrow')}
        line1={t('work.line1')}
        line2={t('work.line2')}
      />

      {/* Deliverables grid */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 380, bottom: 112,
        display: 'grid',
        gridTemplateColumns: `repeat(${Math.min(items.length, 3)}, 1fr)`,
        gap: 20,
        alignContent: 'start',
      }}>
        {Array.isArray(items) && items.map((item, i) => (
          <div key={i} style={{
            border: `1px solid ${c.rule}`,
            padding: '32px 36px',
            display: 'flex', flexDirection: 'column', gap: 12,
            ...entry('fade-up', { tick, delay: 200 + i * 80, duration: 700 }),
          }}>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 500,
              fontSize: TYPE_SCALE.body,
              letterSpacing: '-0.02em',
              color: c.fg,
            }}>{item.label}</div>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
              color: c.fgDim, letterSpacing: '0.06em',
              lineHeight: 1.5,
            }}>{item.sub}</div>
          </div>
        ))}
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideOutcomes (index 8) ───────────────────────────────────────────────
function SlideOutcomes({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(8);
  const cells = t('outcomes.cells');
  const colors = [c.primary, c.accent, c.fg, c.fgMuted];
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('outcomes.corner')} />
      <CornerNum c={c} index={9} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('outcomes.eyebrow')}
        line1={t('outcomes.line1')}
        line2={t('outcomes.line2')}
      />

      {/* Cells */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 380, bottom: 112,
        display: 'grid',
        gridTemplateColumns: `repeat(${Math.min(cells.length, 3)}, 1fr)`,
        gap: 2,
      }}>
        {Array.isArray(cells) && cells.map((cell, i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: 'column',
            justifyContent: 'center',
            padding: '40px 48px',
            border: `1px solid ${c.rule}`,
            gap: 14,
            ...entry('fade-up', { tick, delay: 200 + i * 100, duration: 800 }),
          }}>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 700,
              fontSize: TYPE_SCALE.hero,
              letterSpacing: '-0.05em', lineHeight: 0.9,
              color: colors[i] || c.fg,
            }}>
              <CountUp value={cell.v} tick={tick} delay={i * 120} />
            </div>
            <div>
              <div style={{
                fontFamily: FONT_SANS, fontWeight: 500,
                fontSize: TYPE_SCALE.body,
                color: c.fg, letterSpacing: '-0.01em',
              }}>{cell.label}</div>
              <div style={{
                marginTop: 6,
                fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
                color: c.fgDim, letterSpacing: '0.06em',
              }}>{cell.sub}</div>
            </div>
          </div>
        ))}
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideLearnings (index 9) ──────────────────────────────────────────────
function SlideLearnings({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(9);
  const items = t('learnings.items');
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label={t('learnings.corner')} />
      <CornerNum c={c} index={10} total={total} />

      <DeckTitle c={c} tick={tick}
        eyebrow={t('learnings.eyebrow')}
        line1={t('learnings.line1')}
        line2={t('learnings.line2')}
      />

      {/* Learnings cards */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 380, bottom: 112,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2,
      }}>
        {Array.isArray(items) && items.map((item, i) => (
          <div key={i} style={{
            borderTop: `3px solid ${i === 0 ? c.primary : i === 1 ? c.accent : c.fgDim}`,
            paddingTop: 32, paddingRight: 40,
            display: 'flex', flexDirection: 'column', gap: 20,
            ...entry('fade-up', { tick, delay: 200 + i * 120, duration: 700 }),
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.subtitle,
              fontWeight: 700, color: c.fgDim,
              letterSpacing: '-0.02em',
            }}>{item.n}</div>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 600,
              fontSize: TYPE_SCALE.small,
              letterSpacing: '-0.02em', lineHeight: 1.25,
              color: c.fg,
            }}>{item.t}</div>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 300,
              fontSize: TYPE_SCALE.body, lineHeight: 1.4,
              color: c.fgMuted,
            }}>{item.body}</div>
          </div>
        ))}
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideRecap (index 10) ─────────────────────────────────────────────────
function SlideRecap({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(10);
  const items = t('recap.items');
  return (
    <SlideFrame c={c} deckBg>
      <CornerLabel c={c} label={t('recap.corner')} />
      <CornerNum c={c} index={11} total={total} />

      {/* Eyebrow */}
      <div style={{
        position: 'absolute', left: 96, top: 88,
        fontFamily: FONT_MONO, fontSize: 13, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: c.primary,
        display: 'flex', alignItems: 'center', gap: 16,
        ...entry('fade', { tick, duration: 500 }),
      }}>
        <span style={{ width: 42, height: 1, background: 'currentColor', opacity: 0.62 }} />
        <span>{t('recap.eyebrow')}</span>
      </div>

      {/* 3-column grid */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 180, bottom: 112,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
      }}>
        {Array.isArray(items) && items.map((item, i) => (
          <div key={i} style={{
            borderLeft: i > 0 ? `1px solid ${c.rule}` : 'none',
            paddingLeft: i > 0 ? 60 : 0,
            paddingRight: i < items.length - 1 ? 60 : 0,
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            gap: 24,
            ...entry('fade-up', { tick, delay: 100 + i * 140, duration: 800 }),
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
              color: c.fgDim, letterSpacing: '0.16em',
            }}>{item.n}</div>
            <div style={{
              fontFamily: FONT_SANS, fontWeight: 600,
              fontSize: TYPE_SCALE.title,
              letterSpacing: '-0.04em', lineHeight: 0.92,
              color: c.fg,
              whiteSpace: 'pre-line',
            }}>
              {item.headline.split(item.accent_word).map((part, j, arr) => (
                <React.Fragment key={j}>
                  {part}
                  {j < arr.length - 1 && (
                    <span style={{ color: c.primary, fontStyle: 'italic' }}>{item.accent_word}</span>
                  )}
                </React.Fragment>
              ))}
            </div>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
              color: c.fgDim, letterSpacing: '0.06em',
              lineHeight: 1.6,
            }}>{item.sub}</div>
          </div>
        ))}
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── SlideCTA (index 11) ───────────────────────────────────────────────────
function SlideCTA({ c, total }) {
  const t = useT();
  const { tick } = useSlideActive(11);
  const contacts = t('cta.contacts');
  return (
    <SlideFrame c={c} deckBg>
      <CornerLabel c={c} label={t('cta.corner')} />
      <CornerNum c={c} index={12} total={total} />

      {/* Main line */}
      <div style={{
        position: 'absolute', left: 96, top: 240,
        ...entry('rise', { tick, delay: 80, duration: 1000 }),
      }}>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 700,
          fontSize: TYPE_SCALE.display,
          letterSpacing: '-0.05em', lineHeight: 0.86,
          color: c.fg,
        }}>{t('cta.line1')}</div>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 300,
          fontSize: TYPE_SCALE.display,
          letterSpacing: '-0.05em', lineHeight: 0.86,
          color: c.fgMuted, fontStyle: 'italic',
        }}>{t('cta.line2')}</div>
      </div>

      {/* Contacts */}
      <div style={{
        position: 'absolute', right: 96, bottom: 140,
        display: 'flex', flexDirection: 'column', gap: 0,
        minWidth: 480,
        ...entry('fade-up', { tick, delay: 400, duration: 700 }),
      }}>
        {Array.isArray(contacts) && contacts.map((contact, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '120px 1fr',
            borderTop: `1px solid ${c.rule}`,
            paddingTop: 18, paddingBottom: 18,
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: c.fgDim, paddingTop: 3,
            }}>{contact.k}</div>
            {contact.href ? (
              <a href={contact.href} target="_blank" rel="noreferrer" style={{
                fontFamily: FONT_SANS, fontWeight: 400,
                fontSize: TYPE_SCALE.body,
                color: c.fg, textDecoration: 'none',
                transition: 'color 150ms',
              }}
              onMouseEnter={(e) => e.target.style.color = c.primary}
              onMouseLeave={(e) => e.target.style.color = c.fg}
              >{contact.v}</a>
            ) : (
              <div style={{
                fontFamily: FONT_SANS, fontWeight: 400,
                fontSize: TYPE_SCALE.body, color: c.fg,
              }}>{contact.v}</div>
            )}
          </div>
        ))}
        <div style={{ borderTop: `1px solid ${c.rule}` }} />
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

// ── Export ────────────────────────────────────────────────────────────────
Object.assign(window, {
  SlideCover, SlideRole, SlideContext, SlideProblem, SlideBefore,
  SlideProcess, SlideInsight, SlideWork, SlideOutcomes,
  SlideLearnings, SlideRecap, SlideCTA,
  PALETTES: {
    dark:  window.DECK_CONFIG.palette.dark,
    light: window.DECK_CONFIG.palette.light,
  },
});