// AI Roadmap Deck — Slide kind renderers
// Each component receives `slide` (data from data/deck.js) and `active` (bool).
// `active` is true for the slide currently in view — use to trigger one-shot animations.

const SlideShell = ({ children, kind, dark }) => (
  <div className={"slide " + (dark ? "slide-dark " : "") + "slide-" + kind}>
    {children}
  </div>
);

const Eyebrow = ({ children }) => <div className="dk-eyebrow">{children}</div>;
const SlideTitle = ({ children }) => <h2 className="dk-title">{children}</h2>;
const SlideSub = ({ children }) => <p className="dk-sub">{children}</p>;

// 1 — Cover
function CoverSlide({ slide, active }) {
  return (
    <SlideShell kind="cover" dark>
      <div className="cover-bg">
        <div className="cover-orb cover-orb-a" />
        <div className="cover-orb cover-orb-b" />
        <svg className="cover-grid" preserveAspectRatio="none" viewBox="0 0 1920 1080">
          <defs>
            <pattern id="cg" width="80" height="80" patternUnits="userSpaceOnUse">
              <path d="M 80 0 L 0 0 0 80" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#cg)" />
        </svg>
      </div>
      <div className="cover-inner">
        <img src="assets/logo.png" alt="Wellbeing Outfit" className={"cover-logo " + (active ? "in" : "")}/>
        <div className={"cover-eyebrow " + (active ? "in" : "")}>
          {slide.eyebrow.split(" ").map((w,i)=><span key={i} style={{transitionDelay:(i*60)+"ms"}}>{w}&nbsp;</span>)}
        </div>
        <h1 className={"cover-title " + (active ? "in" : "")}>{slide.title}</h1>
        <p className={"cover-sub " + (active ? "in" : "")}>{slide.sub}</p>
        <div className={"cover-meta " + (active ? "in" : "")}>{slide.meta}</div>
      </div>
    </SlideShell>
  );
}

// 2 — Four-quad
function FourQuadSlide({ slide, active }) {
  return (
    <SlideShell kind="quad">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <div className="quad-grid">
        {slide.quads.map((q, i) => (
          <div key={i} className={"quad-card " + (active ? "in" : "")} style={{transitionDelay: (i*100)+"ms"}}>
            <div className="quad-num">0{i+1}</div>
            <h4>{q.label}</h4>
            <p>{q.body}</p>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 3 — Counters
function Counter({ value, active, delay }) {
  const [shown, setShown] = useState("0");
  useEffect(() => {
    if (!active) { setShown("0"); return; }
    const numeric = String(value).match(/^(\d+)/);
    if (!numeric) { setShown(value); return; }
    const target = parseInt(numeric[1], 10);
    const suffix = String(value).slice(numeric[1].length);
    const start = performance.now();
    const dur = 1100;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start - delay) / dur);
      if (p < 0) { raf = requestAnimationFrame(tick); return; }
      const eased = 1 - Math.pow(1 - p, 3);
      setShown(Math.round(target * eased) + suffix);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, value, delay]);
  return <span>{shown}</span>;
}

function CountersSlide({ slide, active }) {
  return (
    <SlideShell kind="counters">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      {slide.sub && <SlideSub>{slide.sub}</SlideSub>}
      <div className="counters-grid">
        {slide.counters.map((c, i) => (
          <div key={i} className={"counter-card t-"+c.tone+" " + (active ? "in" : "")} style={{transitionDelay: (i*120)+"ms"}}>
            <div className="counter-big">
              <Counter value={c.big} active={active} delay={i*120 + 200} />
            </div>
            <div className="counter-unit">{c.unit}</div>
            <div className="counter-cap">{c.caption}</div>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 4 — Pillar three
function PillarThreeSlide({ slide, active }) {
  return (
    <SlideShell kind="pillar-three">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      {slide.sub && <SlideSub>{slide.sub}</SlideSub>}
      <div className="pillar-layout">
        <div className={"pillar-lead " + (active?"in":"")}>{slide.lead}</div>
        <div className="pillar-grid">
          {slide.pillars.map((p, i) => (
            <div key={i} className={"pillar-card " + (active?"in":"")} style={{transitionDelay:(i*120+150)+"ms"}}>
              <div className="pillar-num">{i+1}</div>
              <div className="pillar-body">
                <h4>{p.title}</h4>
                <p>{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </SlideShell>
  );
}

// 5 — Risk cards
function RiskCardsSlide({ slide, active }) {
  return (
    <SlideShell kind="risk">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <div className="risk-grid">
        {slide.risks.map((r, i) => (
          <div key={i} className={"risk-card " + (active?"in":"")} style={{transitionDelay:(i*100)+"ms"}}>
            <div className="risk-mark">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M12 2L1 22h22L12 2z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
                <path d="M12 9v6M12 18v0.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="risk-body">
              <h4>{r.h}</h4>
              <p>{r.b}</p>
            </div>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 6 — Tool grid (current)
function ToolGridSlide({ slide, active }) {
  return (
    <SlideShell kind="tool-grid">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      {slide.sub && <SlideSub>{slide.sub}</SlideSub>}
      <div className="tg-grid">
        {slide.groups.map((g, i) => (
          <div key={i} className={"tg-group t-"+(g.tone||"neutral")+" " + (active?"in":"")} style={{transitionDelay:(i*70)+"ms"}}>
            <div className="tg-label">
              {g.tone === "danger" && <span className="tg-flag" title="Ungoverned">⚠</span>}
              {g.tone === "warn" && <span className="tg-flag warn" title="Watch">●</span>}
              {g.label}
            </div>
            <ul>
              {g.items.map(it => <li key={it}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 7 — Recommended table
function RecTableSlide({ slide, active }) {
  return (
    <SlideShell kind="rec-table">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      {slide.sub && <SlideSub>{slide.sub}</SlideSub>}
      <div className="rt-table">
        {slide.rows.map((r, i) => (
          <div key={i} className={"rt-row " + (active?"in":"")} style={{transitionDelay:(i*80)+"ms"}}>
            <div className="rt-tag">{r.tag}</div>
            <div className="rt-tool">{r.tool}</div>
            <div className="rt-note">{r.note}</div>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 8 — Tool rationale
function ToolRationaleSlide({ slide, active }) {
  return (
    <SlideShell kind="tool-rationale">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <div className="tr-grid">
        {slide.cards.map((c, i) => (
          <div key={i} className={"tr-card " + (active?"in":"")} style={{transitionDelay:(i*80)+"ms"}}>
            <div className="tr-name">{c.name}</div>
            <p>{c.body}</p>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 9 — Flow problem
function FlowProblemSlide({ slide, active }) {
  return (
    <SlideShell kind="flow-problem">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      {slide.sub && <SlideSub>{slide.sub}</SlideSub>}
      <div className="fp-flow">
        {slide.steps.map((s, i) => (
          <React.Fragment key={i}>
            <div className={"fp-step " + (active?"in":"")} style={{transitionDelay:(i*100)+"ms"}}>
              <div className="fp-num">{i+1}</div>
              <div className="fp-h">{s.n}</div>
              <div className="fp-t">{s.t}</div>
            </div>
            {i < slide.steps.length-1 && (
              <div className={"fp-arrow " + (active?"in":"")} style={{transitionDelay:(i*100+50)+"ms"}}>→</div>
            )}
          </React.Fragment>
        ))}
      </div>
      <div className={"fp-warn " + (active?"in":"")} style={{transitionDelay:"800ms"}}>
        <span className="fp-warn-i">⚠</span>
        <span>{slide.warn}</span>
      </div>
      <div className={"fp-foot " + (active?"in":"")} style={{transitionDelay:"950ms"}}>{slide.foot}</div>
    </SlideShell>
  );
}

// 10 — Future brief
function FutureBriefSlide({ slide, active }) {
  return (
    <SlideShell kind="future-brief">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <SlideSub>{slide.sub}</SlideSub>
      <div className="fb-layout">
        <div className={"fb-brief " + (active?"in":"")}>
          <div className="fb-brief-h">Daily intelligence brief</div>
          <ul>
            {slide.brief.map((b, i) => (
              <li key={i} className={active?"in":""} style={{transitionDelay:(i*120+200)+"ms"}}>{b}</li>
            ))}
          </ul>
        </div>
        <div className="fb-side">
          <div className={"fb-bigstat " + (active?"in":"")}>
            <div className="n">{slide.bigStat.n}</div>
            <div className="l">{slide.bigStat.l}</div>
          </div>
          <div className="fb-powered">
            <div className="fb-powered-h">Powered by</div>
            {slide.powered.map((p, i) => (
              <div key={i} className={"fb-pchip " + (active?"in":"")} style={{transitionDelay:(i*100+400)+"ms"}}>
                <strong>{p.name}</strong> <span>{p.note}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </SlideShell>
  );
}

// 11 — Risk flow (recording)
function RiskFlowSlide({ slide, active }) {
  return (
    <SlideShell kind="risk-flow">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <div className="rf-flow">
        {slide.flow.map((s, i) => (
          <React.Fragment key={i}>
            <div className={"rf-step " + (s.danger?"d ":"") + (active?"in":"")} style={{transitionDelay:(i*120)+"ms"}}>
              <div className="rf-h">{s.n}</div>
              <div className="rf-t">{s.t}</div>
            </div>
            {i < slide.flow.length-1 && <div className={"rf-arrow " + (active?"in":"")} style={{transitionDelay:(i*120+60)+"ms"}}>→</div>}
          </React.Fragment>
        ))}
      </div>
      <div className="rf-issues">
        {slide.issues.map((it, i) => (
          <div key={i} className={"rf-issue " + (active?"in":"")} style={{transitionDelay:(i*100+700)+"ms"}}>
            <h4>{it.h}</h4>
            <p>{it.b}</p>
          </div>
        ))}
      </div>
      <div className={"rf-fix " + (active?"in":"")} style={{transitionDelay:"1200ms"}}>{slide.fix}</div>
    </SlideShell>
  );
}

// Badges row
const Badges = ({ items }) => (
  <div className="dk-badges">
    {items.map((b, i) => <span key={i} className="dk-badge">{b}</span>)}
  </div>
);

// 12 — Before/after (proposal writer)
function BeforeAfterSlide({ slide, active }) {
  return (
    <SlideShell kind="before-after">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <div className="ba-head">
        <SlideTitle>{slide.title}</SlideTitle>
        <Badges items={slide.badges} />
      </div>
      <div className="ba-grid">
        <div className="ba-col now">
          <div className="ba-col-h">Now</div>
          <ol>
            {slide.now.map((n, i) => (
              <li key={i} className={active?"in":""} style={{transitionDelay:(i*60)+"ms"}}>
                <span className="ba-li-n">{i+1}</span>{n}
              </li>
            ))}
          </ol>
        </div>
        <div className="ba-arrow">
          <div className={"ba-arrow-line " + (active?"in":"")}/>
          <div className={"ba-arrow-head " + (active?"in":"")}>→</div>
          <div className={"ba-arrow-label " + (active?"in":"")}>Future</div>
        </div>
        <div className="ba-col future">
          <div className="ba-col-h">Future</div>
          {slide.future.map((f, i) => {
            const isLast = i === slide.future.length - 1;
            return (
              <React.Fragment key={i}>
                <div className={"ba-fcard " + (isLast?"gate ":"") + (active?"in":"")} style={{transitionDelay:(i*100+400)+"ms"}}>
                  {!isLast && <div className="ba-fcard-step">{i+1}</div>}
                  {isLast && <div className="ba-fcard-step gate">✓</div>}
                  <div className="ba-fcard-body">
                    <strong>{f.name}</strong>
                    <span>{f.note}</span>
                  </div>
                </div>
                {!isLast && <div className={"ba-fcascade " + (active?"in":"")} style={{transitionDelay:(i*100+460)+"ms"}}/>}
              </React.Fragment>
            );
          })}
        </div>
      </div>
      <div className={"ba-foot " + (active?"in":"")}>{slide.foot}</div>
    </SlideShell>
  );
}

// 13 — Win pipeline
function WinPipelineSlide({ slide, active }) {
  return (
    <SlideShell kind="win-pipeline">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <div className="ba-head">
        <SlideTitle>{slide.title}</SlideTitle>
        <Badges items={slide.badges} />
      </div>
      <div className="wp-layout">
        <div className={"wp-bigstat " + (active?"in":"")}>
          <div className="n"><Counter value={slide.bigStat.n} active={active} delay={300}/></div>
          <div className="l">{slide.bigStat.l}</div>
        </div>
        <div className="wp-pipe-wrap">
          <div className="wp-pipe-h">Automated pipeline</div>
          <div className="wp-pipe">
            {slide.pipeline.map((p, i) => (
              <React.Fragment key={i}>
                <div className={"wp-node " + (active?"in":"")} style={{transitionDelay:(i*150+300)+"ms"}}>{p}</div>
                {i < slide.pipeline.length-1 && <div className={"wp-link " + (active?"in":"")} style={{transitionDelay:(i*150+400)+"ms"}}/>}
              </React.Fragment>
            ))}
          </div>
        </div>
        <div className={"wp-bullets " + (active?"in":"")}>
          <div className="wp-bullets-h">What Clay monitors to build LP3's daily call list</div>
          <ul>
            {slide.bullets.map((b, i) => (
              <li key={i} className={active?"in":""} style={{transitionDelay:(i*80+800)+"ms"}}>{b}</li>
            ))}
          </ul>
        </div>
      </div>
    </SlideShell>
  );
}

// 14 — Chain (slide pack)
function ChainSlide({ slide, active }) {
  return (
    <SlideShell kind="chain">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <div className="ba-head">
        <SlideTitle>{slide.title}</SlideTitle>
        <Badges items={slide.badges} />
      </div>
      <div className="chain-row">
        {slide.chain.map((c, i) => (
          <React.Fragment key={i}>
            <div className={"chain-node " + (c.auto?"auto ":"") + (c.gate?"gate ":"") + (active?"in":"")} style={{transitionDelay:(i*100)+"ms"}}>
              <div className="chain-n">{c.gate ? "✓" : i+1}</div>
              <div className="chain-h">{c.n}</div>
              <div className="chain-t">{c.t}</div>
              {c.auto && <div className="chain-auto-tag">auto</div>}
              {c.gate && <div className="chain-gate-tag">human</div>}
            </div>
            {i < slide.chain.length-1 && <div className={"chain-link " + ((c.auto && slide.chain[i+1]?.auto)?"auto ":"") + (active?"in":"")} style={{transitionDelay:(i*100+60)+"ms"}}/>}
          </React.Fragment>
        ))}
      </div>
      <div className="chain-notes">
        {slide.notes.map((n, i) => (
          <div key={i} className={"chain-note " + (n.warn?"warn ":"") + (active?"in":"")} style={{transitionDelay:(i*120+800)+"ms"}}>
            <h4>{n.warn?"⚠ ":""}{n.h}</h4>
            <p>{n.b}</p>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 15 — Gotchas
function GotchasSlide({ slide, active }) {
  return (
    <SlideShell kind="gotchas">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <div className="got-grid">
        {slide.cards.map((c, i) => (
          <div key={i} className={"got-card " + (active?"in":"")} style={{transitionDelay:(i*100)+"ms"}}>
            <div className="got-num">0{i+1}</div>
            <h4>{c.h}</h4>
            <p>{c.b}</p>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 16 — Programme
function ProgrammeSlide({ slide, active }) {
  return (
    <SlideShell kind="programme">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <SlideSub>{slide.sub}</SlideSub>
      <div className="prog-stack">
        <div className={"prog-spine " + (active?"in":"")}/>
        {slide.layers.map((l, i) => (
          <div key={i} className={"prog-row " + (active?"in":"")} style={{transitionDelay:(i*120)+"ms"}}>
            <div className="prog-num">{l.n}</div>
            <div className="prog-body">
              <h4>{l.h}</h4>
              <p>{l.b}</p>
            </div>
            <div className="prog-when">{l.w}</div>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 17–21 — Layer detail
function LayerDetailSlide({ slide, active }) {
  return (
    <SlideShell kind="layer-detail">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <div className="ld-head">
        <div className={"ld-bignum " + (active?"in":"")}>{slide.layerNumber}</div>
        <div>
          <SlideTitle>{slide.title}</SlideTitle>
          <SlideSub>{slide.sub}</SlideSub>
        </div>
      </div>
      <div className="ld-grid">
        <div className={"ld-col " + (active?"in":"")}>
          <div className="ld-col-h">Key deliverables</div>
          <ul className="ld-deliv">
            {slide.deliverables.map((d, i) => (
              <li key={i} className={active?"in":""} style={{transitionDelay:(i*60+200)+"ms"}}>
                <span className="ld-check">✓</span>{d}
              </li>
            ))}
          </ul>
        </div>
        <div className={"ld-col " + (active?"in":"")}>
          <div className="ld-col-h">How it works</div>
          <ul className="ld-how">
            {slide.how.map((h, i) => (
              <li key={i} className={active?"in":""} style={{transitionDelay:(i*60+400)+"ms"}}>
                <span className="ld-step">{i+1}</span>{h}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </SlideShell>
  );
}

// 22 — Innovation
function InnovationSlide({ slide, active }) {
  return (
    <SlideShell kind="innovation">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <SlideSub>{slide.sub}</SlideSub>
      <div className="innov-grid">
        {slide.quads.map((q, i) => (
          <div key={i} className={"innov-card " + (active?"in":"")} style={{transitionDelay:(i*120)+"ms"}}>
            <h4>{q.h}</h4>
            <ul>
              {q.items.map((it, j) => <li key={j}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 23 — Investment
function InvestmentSlide({ slide, active }) {
  return (
    <SlideShell kind="investment">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <SlideSub>{slide.sub}</SlideSub>
      <div className="inv-table">
        <div className="inv-row head">
          <div>Phase</div><div>Effort</div><div>Fees</div><div>Timeline</div>
        </div>
        {slide.rows.map((r, i) => (
          <div key={i} className={"inv-row " + (active?"in":"")} style={{transitionDelay:(i*70)+"ms"}}>
            <div className="inv-phase">{r[0]}</div>
            <div>{r[1]}</div>
            <div className="inv-fee">{r[2]}</div>
            <div className="inv-when">{r[3]}</div>
          </div>
        ))}
      </div>
      <div className={"inv-foot " + (active?"in":"")}><strong>{slide.foot1}</strong></div>
      <div className={"inv-foot sub " + (active?"in":"")}>{slide.foot2}</div>
    </SlideShell>
  );
}

// 24 — Next steps
function NextStepsSlide({ slide, active }) {
  return (
    <SlideShell kind="next-steps">
      <Eyebrow>{slide.eyebrow}</Eyebrow>
      <SlideTitle>{slide.title}</SlideTitle>
      <div className="ns-list">
        {slide.steps.map((s, i) => (
          <div key={i} className={"ns-row " + (active?"in":"")} style={{transitionDelay:(i*100)+"ms"}}>
            <div className="ns-when">{s.when}</div>
            <div className="ns-body">
              <h4>{s.h}</h4>
              <p>{s.b}</p>
            </div>
          </div>
        ))}
      </div>
    </SlideShell>
  );
}

// 25 — Closing
function ClosingSlide({ slide, active }) {
  return (
    <SlideShell kind="closing" dark>
      <div className="cover-bg">
        <div className="cover-orb cover-orb-a" />
        <div className="cover-orb cover-orb-b" />
      </div>
      <div className="closing-inner">
        <h1 className={"closing-big " + (active?"in":"")}>{slide.big}</h1>
        <p className={"closing-line " + (active?"in":"")}>{slide.line1}</p>
        <p className={"closing-line2 " + (active?"in":"")}>{slide.line2}</p>
        <div className={"closing-sig " + (active?"in":"")}>{slide.sig}</div>
        <div className={"closing-foot " + (active?"in":"")}>{slide.foot}</div>
      </div>
    </SlideShell>
  );
}

// Dispatcher
function DeckSlide({ slide, active }) {
  switch (slide.kind) {
    case "cover": return <CoverSlide slide={slide} active={active}/>;
    case "four-quad": return <FourQuadSlide slide={slide} active={active}/>;
    case "counters": return <CountersSlide slide={slide} active={active}/>;
    case "pillar-three": return <PillarThreeSlide slide={slide} active={active}/>;
    case "risk-cards": return <RiskCardsSlide slide={slide} active={active}/>;
    case "tool-grid": return <ToolGridSlide slide={slide} active={active}/>;
    case "rec-table": return <RecTableSlide slide={slide} active={active}/>;
    case "tool-rationale": return <ToolRationaleSlide slide={slide} active={active}/>;
    case "flow-problem": return <FlowProblemSlide slide={slide} active={active}/>;
    case "future-brief": return <FutureBriefSlide slide={slide} active={active}/>;
    case "risk-flow": return <RiskFlowSlide slide={slide} active={active}/>;
    case "before-after": return <BeforeAfterSlide slide={slide} active={active}/>;
    case "win-pipeline": return <WinPipelineSlide slide={slide} active={active}/>;
    case "chain": return <ChainSlide slide={slide} active={active}/>;
    case "gotchas": return <GotchasSlide slide={slide} active={active}/>;
    case "programme": return <ProgrammeSlide slide={slide} active={active}/>;
    case "layer-detail": return <LayerDetailSlide slide={slide} active={active}/>;
    case "innovation": return <InnovationSlide slide={slide} active={active}/>;
    case "investment": return <InvestmentSlide slide={slide} active={active}/>;
    case "next-steps": return <NextStepsSlide slide={slide} active={active}/>;
    case "closing": return <ClosingSlide slide={slide} active={active}/>;
    default: return <SlideShell kind="x"><div>Unknown: {slide.kind}</div></SlideShell>;
  }
}

window.DeckSlide = DeckSlide;