/* global React */
const { useState, useEffect } = React;

// ============================================================
// DESIGN TOKENS
// ============================================================
const TYPE_SCALE = {
  display: 132,
  title: 72,
  subtitle: 44,
  body: 32,
  small: 24,
  eyebrow: 14
};
const SPACING = {
  paddingX: 120,
  paddingTop: 96,
  paddingBottom: 96,
  titleGap: 56,
  itemGap: 28
};
const COLOR = {
  bg: "#fcfcfc",
  bgWarm: "#f5f1ea",
  bgDark: "#0a0a0a",
  surface: "#ffffff",
  ink: "#000000",
  inkSoft: "#1a1a1a",
  muted: "#666666",
  hairline: "rgba(0,0,0,0.12)",
  hairlineLight: "rgba(255,255,255,0.18)"
};

const SERIF = "'Louize', Georgia, serif";
const SANS = "'Outfit', system-ui, sans-serif";
const MONO = "'IBM Plex Mono', ui-monospace, monospace";

const TOTAL = 20;

// ============================================================
// SHARED PRIMITIVES
// ============================================================

const Slide = ({ children, bg = COLOR.bg, ink = COLOR.ink, style = {}, ...rest }) =>
<section
  {...rest}
  style={{
    background: bg,
    color: ink,
    fontFamily: SANS,
    width: "100%",
    height: "100%",
    position: "relative",
    overflow: "hidden",
    ...style
  }}>
    {children}
  </section>;

const Frame = ({ children, style = {}, top = SPACING.paddingTop, bottom = SPACING.paddingBottom, x = SPACING.paddingX }) =>
<div
  style={{
    position: "absolute",
    inset: 0,
    paddingTop: top,
    paddingBottom: bottom,
    paddingLeft: x,
    paddingRight: x,
    display: "flex",
    flexDirection: "column",
    ...style
  }}>
    {children}
  </div>;

const SerifTitle = ({ children, size = TYPE_SCALE.title, style = {}, italic = false }) =>
<h2
  style={{
    fontFamily: SERIF,
    fontWeight: 400,
    fontStyle: italic ? "italic" : "normal",
    fontSize: size,
    lineHeight: 1.05,
    letterSpacing: "-0.015em",
    margin: 0,
    textWrap: "balance",
    ...style
  }}>
    {children}
  </h2>;

const Body = ({ children, size = TYPE_SCALE.body, color, style = {} }) =>
<p
  style={{ ...{
      fontFamily: SANS,
      fontSize: size,
      lineHeight: 1.45,
      fontWeight: 400,
      color: color || COLOR.inkSoft,
      margin: 0,
      maxWidth: 1100,
      textWrap: "pretty",
      ...style
    } }}>
    {children}
  </p>;

const Hairline = ({ color, style = {} }) =>
<div
  style={{
    background: color || COLOR.hairline,
    height: 1,
    width: "100%",
    ...style
  }} />;

// Page chrome — title slides skip
const TITLE_SLIDES = new Set([1, 4, 8, 10, 15, 20]);

const PageChrome = ({ idx, total = TOTAL, section, ink = COLOR.ink }) => {
  if (TITLE_SLIDES.has(idx)) return null;
  return (
    <>
      {section &&
      <div
        style={{
          position: "absolute",
          top: 56,
          right: SPACING.paddingX,
          zIndex: 5,
          fontFamily: SANS,
          fontSize: 13,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: ink,
          opacity: 0.55,
          fontWeight: 500
        }}>
          {section}
        </div>
      }
      <div
        style={{
          position: "absolute",
          bottom: 40,
          right: SPACING.paddingX,
          zIndex: 5,
          fontFamily: SANS,
          fontSize: 14,
          letterSpacing: "0.22em",
          color: ink,
          opacity: 0.55,
          fontVariantNumeric: "tabular-nums"
        }}>
        {String(idx).padStart(2, "0")} / {String(total).padStart(2, "0")}
      </div>
    </>);
};

// ============================================================
// 01 — Cover
// ============================================================
const SlideCover = () =>
<Slide bg="#000" ink="#fff">
      <img
    src="assets/mave-hero.jpg"
    alt=""
    style={{
      position: "absolute",
      inset: 0,
      width: "100%",
      height: "100%",
      objectFit: "cover",
      objectPosition: "25% 75%",
      transform: "scale(1.3)",
      transformOrigin: "25% 75%"
    }} />
    {/* gradient — keep top-left brand area + bottom-left title legible */}
    <div
    style={{
      position: "absolute",
      inset: 0,
      background:
      "linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 22%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.85) 100%)"
    }} />

    {/* Brand lockup — top-left, Mave logo + × TLVC */}
    <div
    style={{
      position: "absolute",
      top: 56,
      left: SPACING.paddingX,
      zIndex: 5,
      display: "flex",
      alignItems: "center",
      gap: 18,
      color: "#fff",
      textShadow: "0 1px 8px rgba(0,0,0,0.5)"
    }}>
      <img
      src="assets/mave-logo-tight.png"
      alt="Mave"
      style={{
        height: 30,
        width: "auto",
        filter: "invert(1)",
        display: "block", padding: "0px 0px 11px"
      }} />
      <span style={{ opacity: 0.55, fontFamily: SERIF, fontSize: 36, fontWeight: 300 }}>×</span>
      <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 38, fontWeight: 400 }}>TLVC</span>
    </div>

    {/* Title — anchored bottom-left, no subheader */}
    <div
    style={{
      position: "absolute",
      left: SPACING.paddingX,
      right: SPACING.paddingX,
      bottom: 120,
      zIndex: 5
    }}>
      <SerifTitle size={156} style={{ color: "#fff", maxWidth: 1600, lineHeight: 1.02, textShadow: "0 2px 24px rgba(0,0,0,0.4)" }}>
        <span style={{ fontStyle: "italic" }}>Six figures</span> in<br />
        pre-orders.
      </SerifTitle>
    </div>
  </Slide>;

// ============================================================
// 02 — About Mave Health
// ============================================================
const SlideAbout = () =>
<Slide>
    <PageChrome idx={2} section="About · Mave Health" />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center", maxWidth: 1280 }}>
        <img
        src="assets/mave-logo-tight.png"
        alt="Mave Health"
        style={{ height: 44, width: "auto", display: "block", marginBottom: 56, flexShrink: 0, alignSelf: "flex-start" }} />
        <SerifTitle size={140}>About <span style={{ fontStyle: "italic" }}>Mave</span> Health</SerifTitle>
        <div style={{ marginTop: 64, display: "flex", flexDirection: "column", gap: 32, maxWidth: 1100 }}>
          <Body size={32}>
            Mave Health builds wearable brain stimulation devices for mental health — neuroscience-backed,
            with $2.1M raised from Blume Ventures.
          </Body>
          <Body size={32} color={COLOR.muted}>
            They came to us on a Friday. We launched the following Wednesday.
          </Body>
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 03 — Table of Contents
// ============================================================
const SlideTOC = () => {
  const items = [
  ["I", "Problems", "Why nobody had cracked healthtech on X"],
  ["II", "Objectives", "What Dhawal engaged us to deliver"],
  ["III", "Strategies", "Four plays that engineered the outcome"],
  ["IV", "Results", "What 2.5M views translated into"]];

  return (
    <Slide>
      <PageChrome idx={3} section="Contents" />
      <Frame>
        <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
          <SerifTitle size={88} style={{ marginBottom: 80 }}>
            The four chapters.
          </SerifTitle>
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {items.map(([num, title, desc], i) =>
            <div key={num}>
                <Hairline />
                <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "120px 1fr 1fr",
                  alignItems: "baseline",
                  padding: "32px 0",
                  gap: 40
                }}>
                  <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 40, color: COLOR.muted }}>
                    {num}
                  </span>
                  <span style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 400 }}>{title}</span>
                  <span style={{ fontFamily: SANS, fontSize: 22, color: COLOR.muted, lineHeight: 1.4 }}>
                    {desc}
                  </span>
                </div>
                {i === items.length - 1 && <Hairline />}
              </div>
            )}
          </div>
        </div>
      </Frame>
    </Slide>);
};

// ============================================================
// Section divider
// ============================================================
const SectionDivider = ({ idx, roman, label }) =>
<Slide bg="#000" ink="#fff">
    {/* soft glow background — same vocabulary as cover */}
    <div
    style={{
      position: "absolute",
      inset: 0,
      background:
      "radial-gradient(ellipse at 80% 60%, rgba(120,140,200,0.12) 0%, rgba(0,0,0,0) 60%), #060606"
    }} />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center", position: "relative", zIndex: 2 }}>
        <div
        style={{
          fontFamily: SERIF,
          fontStyle: "italic",
          fontSize: 56,
          color: "rgba(255,255,255,0.6)",
          marginBottom: 32
        }}>
          Chapter {roman}
        </div>
        <SerifTitle size={220} style={{ color: "#fff" }}>
          {label}
        </SerifTitle>
      </div>
    </Frame>
  </Slide>;

// 04 Problems divider
const SlideProblemsDivider = () => <SectionDivider idx={4} roman="I" label="Problems" />;

// ============================================================
// NumberedSlide template
// ============================================================
const NumberedSlide = ({
  idx,
  number,
  total = 3,
  section,
  title,
  body,
  right,
  bg = COLOR.bg,
  ink = COLOR.ink,
  centered = false
}) =>
<Slide bg={bg} ink={ink}>
    <PageChrome idx={idx} section={section} ink={ink} />
    <Frame top={centered ? 96 : 140} style={centered ? { justifyContent: "center" } : undefined}>
      <div style={{ display: "grid", gridTemplateColumns: right ? "1.05fr 0.95fr" : "1fr", gap: 100, alignItems: "start" }}>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 40 }}>
            <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 64, color: COLOR.muted }}>
              {String(number).padStart(2, "0")}
            </span>
            <Hairline style={{ flex: 1, opacity: 0.5 }} />
          </div>
          <SerifTitle size={TYPE_SCALE.title}>{title}</SerifTitle>
          <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 24, maxWidth: 720 }}>
            {body.map((p, i) =>
          <Body key={i} color={i === 0 ? COLOR.inkSoft : COLOR.muted}>
                {p}
              </Body>
          )}
          </div>
        </div>
        {right &&
      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
            {right}
          </div>
      }
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 05 — Healthtech doesn't launch on X
// ============================================================
const SlideHealthtech = () =>
<NumberedSlide
  idx={5}
  number={1}
  centered
  section="Problem 01 of 03"
  title={<>Healthtech doesn't launch on X.</>}
  body={[
  <>X launches work for AI tools, SaaS, and dev products. Nobody had cracked a wearable brain stimulation device on the platform. The playbook didn't exist.</>]}
  right={
  <div
    style={{
      width: "100%",
      maxWidth: 560,
      display: "flex",
      flexDirection: "column",
      gap: 0
    }}>
        <div style={{ fontFamily: MONO, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: COLOR.muted, marginBottom: 18 }}>
          / X launch playbook · what existed
        </div>
        {[
    ["AI tools", "✓"],
    ["SaaS", "✓"],
    ["Dev products", "✓"],
    ["Consumer healthtech wearable", "—"]].
    map(([k, v], i, a) =>
    <div key={k}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "22px 0" }}>
              <span style={{ fontFamily: SERIF, fontSize: 32, fontStyle: i === a.length - 1 ? "italic" : "normal" }}>
                {k}
              </span>
              <span
          style={{
            fontFamily: MONO,
            fontSize: 16,
            color: v === "✓" ? COLOR.muted : "#b8001f",
            fontWeight: 700,
            letterSpacing: "0.08em"
          }}>
                {v === "✓" ? "playbook exists" : "no playbook"}
              </span>
            </div>
            {i < a.length - 1 && <Hairline />}
          </div>
    )}
      </div>
  } />;

// ============================================================
// 06 — Zero presence on X
// ============================================================
const SlideZeroPresence = () =>
<NumberedSlide
  idx={6}
  number={2}
  centered
  section="Problem 02 of 03"
  title={<>Zero presence on X.</>}
  body={[
  <>Mave had strong product-market signals, but on X they were starting from nothing.</>]}
  right={
  <div
    style={{
      width: "100%",
      maxWidth: 560,
      background: "#fff",
      border: `1px solid ${COLOR.hairline}`,
      borderRadius: 20,
      padding: 48,
      display: "flex",
      flexDirection: "column",
      gap: 22
    }}>
        <div style={{ fontFamily: MONO, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: COLOR.muted }}>
          / starting position
        </div>
        <Hairline />
        {[
    ["Product-market signals", "Strong"],
    ["Funding", "$2.1M raised"],
    ["Customers", "Google · UFC"],
    ["X presence", "Zero"]].
    map(([k, v], i, a) => {
      const last = i === a.length - 1;
      return (
        <div key={k}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 24 }}>
                <span style={{ fontFamily: SANS, fontSize: 16, letterSpacing: "0.18em", textTransform: "uppercase", color: COLOR.muted }}>
                  {k}
                </span>
                <span
              style={{
                fontFamily: SERIF,
                fontSize: 30,
                fontStyle: last ? "italic" : "normal",
                color: last ? "#b8001f" : COLOR.ink
              }}>
                  {v}
                </span>
              </div>
              {!last && <Hairline />}
            </div>);
    })}
      </div>
  } />;

// ============================================================
// 07 — Views don't sell wearables
// ============================================================
const SlideViewsDontSell = () =>
<NumberedSlide
  idx={7}
  number={3}
  centered
  section="Problem 03 of 03"
  title={<>Views don't sell wearables.</>}
  body={[
  <>A $500 brain stimulation headset isn't an impulse buy. Impressions alone weren't going to sell units.</>]}
  right={
  <div
    style={{
      width: "100%",
      maxWidth: 560,
      display: "flex",
      flexDirection: "column",
      gap: 28
    }}>
        <div
      style={{
        background: "#fff",
        border: `1px solid ${COLOR.hairline}`,
        borderRadius: 20,
        padding: 48,
        display: "flex",
        flexDirection: "column",
        gap: 18
      }}>
          <div style={{ fontFamily: MONO, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: COLOR.muted }}>
            / unit economics
          </div>
          <Hairline />
          <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
            <span style={{ fontFamily: SERIF, fontSize: 120, lineHeight: 0.9 }}>$500</span>
            <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 32, color: COLOR.muted }}>/ unit</span>
          </div>
          <Hairline />
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <span style={{ fontFamily: SANS, fontSize: 16, letterSpacing: "0.18em", textTransform: "uppercase", color: COLOR.muted }}>
              Decision type
            </span>
            <span style={{ fontFamily: SERIF, fontSize: 28, fontStyle: "italic" }}>
              Considered
            </span>
          </div>
          <Hairline />
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <span style={{ fontFamily: SANS, fontSize: 16, letterSpacing: "0.18em", textTransform: "uppercase", color: COLOR.muted }}>
              Impulse-buy?
            </span>
            <span style={{ fontFamily: SERIF, fontSize: 28, color: "#b8001f", fontStyle: "italic" }}>
              No
            </span>
          </div>
        </div>
      </div>
  } />;

// ============================================================
// 08 — Objectives divider
// ============================================================
const SlideObjectivesDivider = () => <SectionDivider idx={8} roman="II" label="Objectives" />;

// ============================================================
// 09 — Drive pre-orders, not awareness
// ============================================================
const SlideDrivePreorders = () =>
<Slide>
    <PageChrome idx={9} section="Objective" />
    <Frame style={{ justifyContent: "center" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 56 }}>
        <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 64, color: COLOR.muted }}>01</span>
        <Hairline style={{ flex: 1, opacity: 0.5 }} />
      </div>
      <SerifTitle size={104} style={{ maxWidth: 1500 }}>
        Drive pre-orders, not just awareness.
      </SerifTitle>
      <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {[
        ["Trigger", "Views on X"],
        ["KPI", "US pre-orders"],
        ["Not the KPI", "Awareness"],
        ["Not the KPI", "Vanity views"]].
        map(([k, v], i, a) =>
        <div key={i}>
              <Hairline />
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "26px 0" }}>
                <span style={{ fontFamily: SANS, fontSize: 16, letterSpacing: "0.18em", textTransform: "uppercase", color: COLOR.muted }}>
                  {k}
                </span>
                <span
              style={{
                fontFamily: SERIF,
                fontSize: 36,
                color: i >= 2 ? COLOR.muted : COLOR.ink,
                fontStyle: i >= 2 ? "italic" : "normal",
                textDecoration: i >= 2 ? "line-through" : "none",
                textDecorationThickness: 1
              }}>
                  {v}
                </span>
              </div>
              {i === a.length - 1 && <Hairline />}
            </div>
        )}
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 10 — Strategies divider
// ============================================================
const SlideStrategiesDivider = () => <SectionDivider idx={10} roman="III" label="Strategies" />;

const StrategyHead = ({ num, color = COLOR.muted, hairlineColor }) =>
<div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 32 }}>
    <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 64, color }}>
      {String(num).padStart(2, "0")}
    </span>
    <Hairline style={{ flex: 1, opacity: 0.5 }} color={hairlineColor} />
    <span style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.22em", textTransform: "uppercase", color }}>
      Strategy
    </span>
  </div>;

// ============================================================
// 11 — Trust-first copy
// ============================================================
const SlideTrustFirst = () =>
<Slide>
    <PageChrome idx={11} section="Strategy 01 of 04" />
    <Frame style={{ justifyContent: "center" }}>
      <StrategyHead num={1} />
      <SerifTitle size={TYPE_SCALE.title}>
        Wrote trust-first copy.
      </SerifTitle>

      {/* Copy comparison — anchored left */}
      <div style={{ marginTop: 56, display: "flex", flexDirection: "column", gap: 24, width: "100%", maxWidth: 820 }}>
        <div style={{ fontFamily: MONO, fontSize: 14, letterSpacing: "0.16em", textTransform: "uppercase", color: COLOR.muted }}>
          / what we cut
        </div>
        <div
        style={{
          background: "rgba(0,0,0,0.04)",
          border: `1px dashed ${COLOR.hairline}`,
          padding: "32px 40px",
          borderRadius: 14,
          fontFamily: SERIF,
          fontStyle: "italic",
          fontSize: 36,
          color: COLOR.muted,
          textDecoration: "line-through",
          textDecorationColor: "rgba(0,0,0,0.4)"
        }}>
          "Revolutionary" · "Game-changing"
        </div>
        <div style={{ display: "flex", justifyContent: "center", color: COLOR.muted, fontFamily: MONO, fontSize: 22 }}>↓</div>
        <div style={{ fontFamily: MONO, fontSize: 14, letterSpacing: "0.16em", textTransform: "uppercase", color: COLOR.muted }}>
          / what led the post
        </div>
        <div
        style={{
          background: "#fff",
          border: `1.5px solid ${COLOR.ink}`,
          padding: "36px 44px",
          borderRadius: 14,
          display: "flex",
          flexDirection: "column",
          gap: 16
        }}>
          {[
        ["YC users", "Backed by Y Combinator"],
        ["Funding", "$2.1M from Blume"],
        ["Customers", "Google · UFC"]].
        map(([k, v], i, a) =>
        <div key={k}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "12px 0", gap: 32 }}>
                <span style={{ fontFamily: SANS, fontSize: 16, letterSpacing: "0.18em", textTransform: "uppercase", color: COLOR.muted }}>
                  {k}
                </span>
                <span style={{ fontFamily: SERIF, fontSize: 32 }}>{v}</span>
              </div>
              {i < a.length - 1 && <Hairline />}
            </div>
        )}
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 12 — Influencers as buyers first
// ============================================================
const SlideInfluencersBuyers = () =>
<Slide>
    <PageChrome idx={12} section="Strategy 02 of 04" />
    <Frame>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 100, height: "100%", alignItems: "center" }}>
        <div>
          <StrategyHead num={2} />
          <SerifTitle size={TYPE_SCALE.title}>
            Turned influencers into buyers first.
          </SerifTitle>
          <div style={{ marginTop: 40, maxWidth: 720, display: "flex", flexDirection: "column", gap: 24 }}>
            <Body>
              Influencers posted their own pre-order confirmation screenshots alongside their endorsements.
            </Body>
            <Body color={COLOR.muted}>
              "I just bought this" hits different than "check this out."
            </Body>
          </div>
        </div>

        {/* Right — real influencer pre-order tweet screenshot */}
        <div style={{ display: "flex", justifyContent: "center", width: "100%" }}>
          <img
          src="assets/mave-tweet-preorder.png"
          alt="Influencer pre-order tweet"
          style={{
            maxWidth: 600,
            width: "100%",
            height: "auto",
            borderRadius: 16,
            boxShadow: "0 30px 60px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.10)"
          }} />
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 13 — Curated influencers in tiers
// ============================================================
const SlideInfluencerTiers = () =>
<Slide>
    <PageChrome idx={13} section="Strategy 03 of 04" />
    <Frame>
      <StrategyHead num={3} />
      <SerifTitle size={TYPE_SCALE.title}>
        Curated influencers in tiers.
      </SerifTitle>
      <Body style={{ marginTop: 32, maxWidth: 1100 }}>
        ~35 quote-posting influencers with unique tracking links for conversion.
        Hundreds of additional reposters amplified reach across tech, finance, and health enthusiasts.
        Different copy angles for different audiences.
      </Body>
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
        {[
      {
        tier: "Tier 1",
        label: "The conversion layer",
        count: "~35",
        who: "Quote-posting influencers",
        does: "Unique tracking links per post",
        ours: true
      },
      {
        tier: "Tier 2",
        label: "The reach layer",
        count: "Hundreds",
        who: "Reposters across tech, finance, health",
        does: "Amplification to varied audiences"
      },
      {
        tier: "Tier 3",
        label: "The angle layer",
        count: "Per-audience",
        who: "Differentiated copy",
        does: "Tech vs. finance vs. health framing"
      }].
      map((t, i) =>
      <div
        key={t.tier}
        style={{
          background: t.ours ? COLOR.ink : "#fff",
          color: t.ours ? "#fff" : COLOR.ink,
          border: `1px solid ${t.ours ? COLOR.ink : COLOR.hairline}`,
          borderRadius: 20,
          padding: 40,
          display: "flex",
          flexDirection: "column",
          gap: 24,
          minHeight: 380
        }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
              <span style={{ fontFamily: MONO, fontSize: 16, color: t.ours ? "rgba(255,255,255,0.7)" : COLOR.muted }}>
                {t.count}
              </span>
              <span style={{ fontFamily: MONO, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: t.ours ? "rgba(255,255,255,0.5)" : COLOR.muted }}>
                {t.tier}
              </span>
            </div>
            <div style={{ fontFamily: SERIF, fontSize: 34, lineHeight: 1.15 }}>
              {t.label}
            </div>
            <Hairline color={t.ours ? COLOR.hairlineLight : COLOR.hairline} />
            <div style={{ marginTop: "auto" }}>
              <div style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.18em", textTransform: "uppercase", color: t.ours ? "rgba(255,255,255,0.5)" : COLOR.muted, marginBottom: 8 }}>
                Who
              </div>
              <div style={{ fontFamily: SANS, fontSize: 22, marginBottom: 20, lineHeight: 1.3 }}>{t.who}</div>
              <div style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.18em", textTransform: "uppercase", color: t.ours ? "rgba(255,255,255,0.5)" : COLOR.muted, marginBottom: 8 }}>
                Does
              </div>
              <div style={{ fontFamily: SANS, fontSize: 22, lineHeight: 1.3 }}>{t.does}</div>
            </div>
          </div>
      )}
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 14 — 24/7 war room
// ============================================================
const SlideWarRoom = () =>
<Slide bg={COLOR.bgDark} ink="#fff">
    <PageChrome idx={14} section="Strategy 04 of 04" ink="#fff" />
    <Frame>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 100, height: "100%", alignItems: "center" }}>
        <div>
          <StrategyHead
          num={4}
          color="rgba(255,255,255,0.6)"
          hairlineColor={COLOR.hairlineLight} />
          <SerifTitle size={TYPE_SCALE.title} style={{ color: "#fff" }}>
            Ran a 24/7 war room.
          </SerifTitle>
          <Body color="rgba(255,255,255,0.78)" style={{ marginTop: 40, maxWidth: 720 }}>
            Dedicated Slack channel between Atomik and Mave from pre-launch through post-launch.
          </Body>
          <div style={{ marginTop: 56, display: "flex", gap: 56 }}>
            {[
          ["Channel", "#mave-launch"],
          ["Window", "Pre → Post launch"]].
          map(([k, v]) =>
          <div key={k}>
                <div style={{ fontFamily: SANS, fontSize: 13, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 8 }}>
                  {k}
                </div>
                <div style={{ fontFamily: SERIF, fontSize: 26, color: "#fff" }}>{v}</div>
              </div>
          )}
          </div>
        </div>
        <div
        style={{
          background: "#161616",
          border: `1px solid ${COLOR.hairlineLight}`,
          borderRadius: 16,
          padding: 32,
          fontFamily: MONO,
          color: "rgba(255,255,255,0.85)",
          fontSize: 14,
          lineHeight: 1.7
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
            <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#3aff77" }} />
            <span style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>
              # mave-launch · live
            </span>
          </div>
          {[
        ["07:00", "founder", "Tweet live. Going."],
        ["07:08", "tlvc", "T1 QTs landing — replying from brand."],
        ["07:24", "tlvc", "Comments hot. Holding the thread."],
        ["08:15", "founder", "First pre-orders coming in."],
        ["10:42", "tlvc", "1.0M crossed. Velocity strong."],
        ["13:30", "tlvc", "Engagement signals flooded. Algo feeding."],
        ["+1d", "tlvc", "2.5M. Pre-orders still rolling."]].
        map((row, i) =>
        <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 80px 1fr", gap: 12, padding: "6px 0" }}>
              <span style={{ color: "rgba(255,255,255,0.4)" }}>{row[0]}</span>
              <span style={{ color: row[1] === "founder" ? "#ffd17a" : "#74c8ff" }}>{row[1]}</span>
              <span>{row[2]}</span>
            </div>
        )}
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 15 — Results divider
// ============================================================
const SlideResultsDivider = () => <SectionDivider idx={15} roman="IV" label="Results" />;

// ============================================================
// Big stat slide template
// ============================================================
const StatSlide = ({ idx, statNumber, statValue, statUnit, headline, body, comparison, valueSize = 280, unitSize = 96 }) =>
<Slide>
    <PageChrome idx={idx} section={`Result ${String(statNumber).padStart(2, "0")} of 04`} />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 40 }}>
          <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 56, color: COLOR.muted }}>
            Result {String(statNumber).padStart(2, "0")}
          </span>
          <Hairline style={{ flex: 1, opacity: 0.5 }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
              <span style={{ fontFamily: SERIF, fontSize: valueSize, lineHeight: 0.9, fontWeight: 400, letterSpacing: "-0.04em" }}>
                {statValue}
              </span>
              {statUnit &&
            <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: unitSize, color: COLOR.muted }}>
                  {statUnit}
                </span>
            }
            </div>
            {comparison &&
          <div style={{ marginTop: 24, fontFamily: MONO, fontSize: 16, color: COLOR.muted, letterSpacing: "0.06em" }}>
                {comparison}
              </div>
          }
          </div>
          <div>
            <SerifTitle size={64}>{headline}</SerifTitle>
            {body &&
          <Body color={COLOR.muted} style={{ marginTop: 28, maxWidth: 540 }}>
                {body}
              </Body>
          }
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;

// 16 — 2.5M+ views
const SlideResult1 = () =>
<StatSlide
  idx={16}
  statNumber={1}
  statValue="2.5"
  statUnit="M+"
  headline={<>Views on X.</>}
  body="On a platform nobody had cracked for healthtech before."
  comparison="/ launch day + tail" />;

// 17 — Hundreds of thousands in pre-orders
const SlideResult2 = () =>
<Slide bg={COLOR.bgDark} ink="#fff">
    <PageChrome idx={17} section="Result 02 of 04" ink="#fff" />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 40 }}>
          <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 56, color: "rgba(255,255,255,0.6)" }}>
            Result 02
          </span>
          <Hairline style={{ flex: 1, opacity: 0.5 }} color={COLOR.hairlineLight} />
        </div>
        <SerifTitle size={172} style={{ color: "#fff", maxWidth: 1700 }}>
          <span style={{ fontStyle: "italic" }}>Hundreds of thousands</span>
          {" "}in pre-order revenue.
        </SerifTitle>
        <Body color="rgba(255,255,255,0.9)" style={{ marginTop: 40, maxWidth: 1100 }}>
          On launch day. The KPI Dhawal hired us to move.
        </Body>
        <div style={{ marginTop: 64, fontFamily: MONO, fontSize: 14, color: "rgba(255,255,255,0.5)", letterSpacing: "0.06em" }}>

      </div>
      </div>
    </Frame>
  </Slide>;

// 18 — 80% US audience
const SlideResult3 = () =>
<Slide>
    <PageChrome idx={18} section="Result 03 of 04" />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 40 }}>
          <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 56, color: COLOR.muted }}>03</span>
          <Hairline style={{ flex: 1, opacity: 0.5 }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", alignItems: "baseline" }}>
              <span style={{ fontFamily: SERIF, fontSize: 280, lineHeight: 0.9, fontWeight: 400, letterSpacing: "-0.04em" }}>
                80
              </span>
              <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 120, color: COLOR.muted }}>
                %
              </span>
            </div>
            {/* audience bar */}
            <div style={{ marginTop: 36, display: "flex", height: 14, borderRadius: 999, overflow: "hidden", border: `1px solid ${COLOR.hairline}` }}>
              <div style={{ flex: 80, background: COLOR.ink }} />
              <div style={{ flex: 20, background: "rgba(0,0,0,0.12)" }} />
            </div>
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", fontFamily: MONO, fontSize: 13, color: COLOR.muted, letterSpacing: "0.06em" }}>
              <span>US 80%</span>
              <span>REST 20%</span>
            </div>
          </div>
          <div>
            <SerifTitle size={64}>
              US audience hit.
            </SerifTitle>
            <Body color={COLOR.muted} style={{ marginTop: 28, maxWidth: 540 }}>
              The pre-order product was US-only. The audience matched the offer.
            </Body>
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;

// 19 — CVR jumped
const SlideResult4 = () =>
<Slide>
    <PageChrome idx={19} section="Result 04 of 04" />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 40 }}>
          <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 56, color: COLOR.muted }}>04</span>
          <Hairline style={{ flex: 1, opacity: 0.5 }} />
        </div>
        <SerifTitle size={88} style={{ maxWidth: 1500 }}>
          Conversion rate jumped
        </SerifTitle>

        {/* before/after viz */}
        <div
        style={{
          marginTop: 32,
          background: "#fff",
          border: `1px solid ${COLOR.hairline}`,
          borderRadius: 16,
          padding: 40,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 40,
          alignItems: "stretch"
        }}>
          {[
        { label: "Previous launch", value: "1.89", muted: true },
        { label: "This launch", value: "2.79", muted: false }].
        map((col, i) =>
        <div
          key={col.label}
          style={{
            paddingRight: i === 0 ? 40 : 0,
            paddingLeft: i === 1 ? 40 : 0,
            borderRight: i === 0 ? `1px solid ${COLOR.hairline}` : "none",
            display: "flex",
            flexDirection: "column",
            gap: 16
          }}>
              <div style={{ fontFamily: SANS, fontSize: 13, letterSpacing: "0.22em", textTransform: "uppercase", color: COLOR.muted }}>
                {col.label}
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span
              style={{
                fontFamily: SERIF,
                fontSize: 144,
                lineHeight: 0.95,
                fontWeight: 400,
                color: col.muted ? COLOR.muted : COLOR.ink,
                letterSpacing: "-0.04em"
              }}>
                  {col.value}
                </span>
                <span
              style={{
                fontFamily: SERIF,
                fontStyle: "italic",
                fontSize: 56,
                color: col.muted ? COLOR.muted : COLOR.ink
              }}>
                  %
                </span>
              </div>
              {/* progress-style bar */}
              <div style={{ height: 8, background: "rgba(0,0,0,0.06)", borderRadius: 999, overflow: "hidden" }}>
                <div
              style={{
                height: "100%",
                width: `${parseFloat(col.value) / 2.79 * 100}%`,
                background: col.muted ? "rgba(0,0,0,0.25)" : COLOR.ink
              }} />
              </div>
            </div>
        )}
        </div>
        <div style={{ marginTop: 24, fontFamily: MONO, fontSize: 14, color: COLOR.muted, letterSpacing: "0.06em" }}>
          / +47.6% lift launch over launch
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// 20 — Closing
// ============================================================
const SlideClosing = () =>
<Slide bg="#000" ink="#fff">
    <img
    src="assets/cover-launch.jpg"
    alt=""
    style={{
      position: "absolute",
      inset: 0,
      width: "100%",
      height: "100%",
      objectFit: "cover",
      objectPosition: "center"
    }} />
    <div
    style={{
      position: "absolute",
      inset: 0,
      background:
      "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.7) 100%)"
    }} />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center", position: "relative", zIndex: 2 }}>
        <SerifTitle size={172} style={{ color: "#fff", maxWidth: 1700 }}>
          We make launch videos.<br />
          And make them go viral.
        </SerifTitle>
        <div style={{ marginTop: 80, display: "flex", maxWidth: 1400 }}>
          <div>
            <div style={{ fontFamily: SANS, fontSize: 13, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 12 }}>
              Read more
            </div>
            <div style={{ fontFamily: SERIF, fontSize: 32, color: "#fff" }}>launchvideo.com</div>
          </div>
        </div>
        <div style={{ marginTop: 80, fontFamily: SANS, fontSize: 14, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" }}>
          *TLVC is a product of Atomik Growth
        </div>
      </div>
    </Frame>
  </Slide>;

// ============================================================
// Mount
// ============================================================
const SLIDES = [
{ c: SlideCover, label: "01 Cover" },
{ c: SlideAbout, label: "02 About" },
{ c: SlideTOC, label: "03 Contents" },
{ c: SlideProblemsDivider, label: "04 Problems" },
{ c: SlideHealthtech, label: "05 Healthtech on X" },
{ c: SlideZeroPresence, label: "06 Zero Presence" },
{ c: SlideViewsDontSell, label: "07 Views Don't Sell" },
{ c: SlideObjectivesDivider, label: "08 Objectives" },
{ c: SlideDrivePreorders, label: "09 Drive Pre-orders" },
{ c: SlideStrategiesDivider, label: "10 Strategies" },
{ c: SlideTrustFirst, label: "11 Trust-first Copy" },
{ c: SlideInfluencersBuyers, label: "12 Influencers as Buyers" },
{ c: SlideInfluencerTiers, label: "13 Influencer Tiers" },
{ c: SlideWarRoom, label: "14 War Room" },
{ c: SlideResultsDivider, label: "15 Results" },
{ c: SlideResult1, label: "16 2.5M Views" },
{ c: SlideResult2, label: "17 Pre-order Revenue" },
{ c: SlideResult3, label: "18 80% US" },
{ c: SlideResult4, label: "19 CVR Jump" },
{ c: SlideClosing, label: "20 Close" }];

window.SLIDES = SLIDES;

if (!window.__deckMounted) {
  window.__deckMounted = true;
  const stage = document.querySelector("deck-stage");
  while (stage.firstChild) stage.removeChild(stage.firstChild);
  SLIDES.forEach((s) => {
    const section = document.createElement("section");
    section.setAttribute("data-label", s.label.replace(/^\d+\s+/, ""));
    stage.appendChild(section);
    const root = ReactDOM.createRoot(section);
    root.render(<s.c />);
  });
}