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

// ============================================================
// DESIGN TOKENS — committed up front so everything stays parallel
// ============================================================
const TYPE_SCALE = {
  display: 132, // hero numbers / 3.6M
  title: 72, // slide titles
  subtitle: 44, // section heads
  body: 32, // body copy
  small: 24, // captions / meta
  eyebrow: 14 // tracking labels
};
const SPACING = {
  paddingX: 120,
  paddingTop: 96,
  paddingBottom: 96,
  titleGap: 56,
  itemGap: 28
};
const COLOR = {
  bg: "#fcfcfc",
  bgWarm: "#f5f1ea", // soft warm panel
  bgDark: "#0a0a0a",
  surface: "#ffffff",
  ink: "#000000",
  inkSoft: "#1a1a1a",
  muted: "#666666",
  hairline: "rgba(0,0,0,0.12)",
  hairlineLight: "rgba(255,255,255,0.18)",
  accent: "#0992C2" // pulled from --stats-section accent
};

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

// ============================================================
// 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 Eyebrow = ({ children, color, style = {} }) =>
<div
  style={{
    fontFamily: SANS,
    fontSize: TYPE_SCALE.eyebrow,
    fontWeight: 600,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: color || COLOR.muted,
    ...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 Italic = ({ children }) =>
<span style={{ fontFamily: SERIF, fontStyle: "italic", fontWeight: 400 }}>{children}</span>;


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



// Brand lockup (corner)
const BrandLockup = ({ ink = COLOR.ink, style = {}, withTLVC = true }) =>
<div
  style={{
    display: "flex",
    alignItems: "center",
    gap: 14,
    fontFamily: SANS,
    fontSize: 14,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: ink,
    ...style
  }}>
  
    <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 22, letterSpacing: 0, textTransform: "none", fontWeight: 500 }}>
      Enrich Labs
    </span>
    {withTLVC &&
  <>
        <span style={{ opacity: 0.5, fontWeight: 300 }}>×</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600 }}>
          <img
        src={ink === "#000000" ? "assets/atomik-icon-black.png" : "assets/atomik-icon-white.png"}
        alt=""
        style={{ width: 18, height: 18 }} />
      
          TLVC
        </span>
      </>
  }
  </div>;


// Page chrome — only page number, bottom-right
const TITLE_SLIDES = new Set([1, 4, 9, 12, 20, 26, 27]);

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>
    </>
  );
};


// ============================================================
// Tweet placeholder card
// ============================================================
const TweetPlaceholder = ({
  handle = "@username",
  name = "Username",
  verified = true,
  body = "tweet body",
  stats = { replies: "—", reposts: "—", likes: "—", views: "—" },
  width = 480,
  caption,
  style = {}
}) =>
<div style={{ width, ...style }}>
    <div
    style={{
      background: "#ffffff",
      border: `1px solid ${COLOR.hairline}`,
      borderRadius: 16,
      padding: 24,
      fontFamily: SANS,
      color: COLOR.ink
    }}>
    
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div
          style={{
            width: 44,
            height: 44,
            borderRadius: "50%",
            background: "repeating-linear-gradient(135deg, #ddd 0 6px, #eee 6px 12px)"
          }} />
        
          <div>
            <div style={{ fontWeight: 700, fontSize: 16, display: "flex", alignItems: "center", gap: 4 }}>
              {name}
              {verified &&
            <svg width="14" height="14" viewBox="0 0 22 22" fill="#000">
                  <path d="M20.4 11c0-.6-.2-1.3-.6-1.8-.3-.5-.8-1-1.4-1.2.2-.6.3-1.3.1-1.9-.1-.6-.4-1.2-.9-1.7-.5-.5-1-.7-1.7-.9-.6-.1-1.3-.1-1.9.1-.3-.6-.7-1.1-1.2-1.4-.5-.4-1.2-.6-1.8-.6-.6 0-1.3.2-1.8.6-.5.3-1 .8-1.2 1.4-.6-.2-1.3-.2-1.9-.1-.6.1-1.2.4-1.7.9-.4.5-.7 1.1-.9 1.7-.1.6-.1 1.3.2 1.9-.6.3-1.1.7-1.4 1.2-.4.5-.6 1.2-.6 1.8 0 .6.2 1.3.6 1.8.3.5.9 1 1.4 1.2-.2.6-.3 1.3-.1 1.9.1.6.4 1.2.9 1.7.5.4 1.1.8 1.7.9.6.1 1.3.1 1.9-.1.3.6.7 1.1 1.2 1.4.5.4 1.2.6 1.8.6.6 0 1.3-.2 1.8-.6.5-.3 1-.8 1.2-1.4.6.2 1.3.3 1.9.1.6-.1 1.2-.4 1.7-.9.5-.5.8-1 .9-1.7.1-.6.1-1.3-.1-1.9.6-.3 1.1-.7 1.4-1.2.4-.5.5-1.2.6-1.8z" />
                  <path d="M9.7 14.9l-3.4-3.4 1.3-1.3 2.1 2.1 4.4-4.8 1.3 1.2z" fill="#fff" />
                </svg>
            }
            </div>
            <div style={{ fontSize: 13, color: COLOR.muted }}>{handle}</div>
          </div>
        </div>
        <svg width="20" height="20" viewBox="0 0 24 24" fill={COLOR.muted}>
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>
      </div>
      <div
      style={{
        fontSize: 15,
        lineHeight: 1.4,
        color: COLOR.muted,
        marginBottom: 18,
        minHeight: 64,
        fontFamily: MONO,
        padding: "10px 14px",
        background: "rgba(0,0,0,0.03)",
        border: `1px dashed ${COLOR.hairline}`,
        borderRadius: 8
      }}>
      
        {body}
      </div>
      <div style={{ display: "flex", gap: 24, color: COLOR.muted, fontSize: 13 }}>
        <span>💬 {stats.replies}</span>
        <span>🔁 {stats.reposts}</span>
        <span>❤ {stats.likes}</span>
        <span>📊 {stats.views}</span>
      </div>
    </div>
    {caption &&
  <div
    style={{
      marginTop: 12,
      fontFamily: MONO,
      fontSize: 12,
      letterSpacing: "0.08em",
      textTransform: "uppercase",
      color: COLOR.muted
    }}>
    
        {caption}
      </div>
  }
  </div>;


// Generic placeholder block (for screenshots etc.)
const Placeholder = ({ label, width = "100%", height = 300, style = {} }) =>
<div
  style={{
    width,
    height,
    background:
    "repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 12px, rgba(0,0,0,0.06) 12px 24px)",
    border: `1px dashed ${COLOR.hairline}`,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontFamily: MONO,
    fontSize: 12,
    letterSpacing: "0.1em",
    textTransform: "uppercase",
    color: COLOR.muted,
    ...style
  }}>
  
    {label}
  </div>;


// ============================================================
// SLIDES
// ============================================================
const TOTAL = 27;

// 01 — Cover
const SlideCover = () =>
<Slide bg="#000" ink="#fff">
    <img
    src="assets/cover-launch.jpg"
    alt=""
    style={{
      position: "absolute",
      inset: 0,
      width: "100%",
      height: "100%",
      objectFit: "cover",
      opacity: 0.95
    }} />
  
    <div
    style={{
      position: "absolute",
      inset: 0,
      background:
      "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.92) 100%)"
    }} />
  

    {/* Brand lockup — top-left */}
    <div
    style={{
      position: "absolute",
      top: 56,
      left: SPACING.paddingX,
      zIndex: 5,
      fontFamily: SERIF,
      fontSize: 22,
      color: "rgba(255,255,255,0.98)",
      letterSpacing: "-0.01em",
      fontWeight: 400,
      textShadow: "0 1px 8px rgba(0,0,0,0.4)"
    }}>
    
      Enrich Labs <span style={{ opacity: 0.5, margin: "0 10px" }}>×</span> <span style={{ fontStyle: "italic" }}>TLVC</span>
    </div>

    {/* Content — anchored bottom-left */}
    <div
    style={{
      position: "absolute",
      left: SPACING.paddingX,
      right: SPACING.paddingX,
      bottom: 140,
      zIndex: 5,
      display: "flex",
      flexDirection: "column",
      gap: 32
    }}>
    
      <SerifTitle size={148} style={{ color: "#fff", maxWidth: 1500, lineHeight: 1.05 }}>
        Launching <span style={{ fontStyle: "italic" }}>Helena</span>.<br />
        3.6M views on X.
      </SerifTitle>
      <Body size={28} color="rgba(255,255,255,0.78)" style={{ maxWidth: 760 }}>
        How we orchestrated Enrich Labs' autonomous AI marketer
        to be the largest launch in its category.
      </Body>
    </div>

    {/* page number — hidden on cover */}
  </Slide>;


// 02 — About EnrichLabs
const SlideAbout = () =>
<Slide>
    <PageChrome idx={2} total={TOTAL} section="About · EnrichLabs" />
    <Frame>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100, alignItems: "center", height: "100%" }}>
        <div>
          <img
          src="assets/enrichlabs-logo.png"
          alt="enrichlabs.ai"
          style={{ height: 56, width: "auto", display: "block", marginBottom: 40 }} />
        
          <SerifTitle size={104}>
            About Enrich Labs
          </SerifTitle>
          <div style={{ marginTop: 56, display: "flex", flexDirection: "column", gap: 28 }}>
            <Body>
              Enrich Labs builds autonomous AI marketers for lean teams.
            </Body>
            <Body>
              Helena, Angela, Kai, and Sam handle SEO, email, social, and analytics.
            </Body>
            <Body>
              Founded by Seijin Jung and Yunfeng Bai.
            </Body>
          </div>
        </div>

        {/* Right — agent roster card */}
        <div
        style={{
          background: COLOR.surface,
          border: `1px solid ${COLOR.hairline}`,
          borderRadius: 24,
          padding: 56,
          display: "flex",
          flexDirection: "column",
          gap: 0
        }}>
        
          {[
        ["Helena", "SEO"],
        ["Angela", "Email"],
        ["Kai", "Social"],
        ["Sam", "Analytics"]].
        map(([name, role], i, arr) =>
        <div key={name}>
              <div
            style={{
              display: "flex",
              alignItems: "baseline",
              justifyContent: "space-between",
              padding: "26px 0"
            }}>
            
                <span style={{ fontFamily: SERIF, fontSize: 56, lineHeight: 1, fontWeight: 400 }}>
                  {name === "Helena" ? <span style={{ fontStyle: "italic" }}>{name}</span> : name}
                </span>
                <span
              style={{
                fontFamily: SANS,
                fontSize: 18,
                letterSpacing: "0.18em",
                textTransform: "uppercase",
                color: COLOR.muted
              }}>
              
                  {role}
                </span>
              </div>
              {i < arr.length - 1 && <Hairline />}
            </div>
        )}
        </div>
      </div>
    </Frame>
  </Slide>;


// 03 — Table of Contents
const SlideTOC = () => {
  const items = [
  ["I", "Problem", "Why most launches don't move the business"],
  ["II", "Objectives", "What Enrich engaged us to deliver"],
  ["III", "Strategies", "Seven plays that engineered the outcome"],
  ["IV", "Results", "What 3.6M views translated into"]];

  return (
    <Slide>
      <PageChrome idx={3} total={TOTAL} 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 component (reused)
const SectionDivider = ({ idx, roman, label, total = TOTAL, image }) =>
<Slide bg="#000" ink="#fff">
    {image &&
  <>
        <img
      src={image}
      alt=""
      style={{
        position: "absolute",
        inset: 0,
        width: "100%",
        height: "100%",
        objectFit: "cover",
        opacity: 0.45
      }} />
    
        <div
      style={{
        position: "absolute",
        inset: 0,
        background:
        "linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.6) 100%)"
      }} />
    
      </>
  }
    <PageChrome idx={idx} total={total} section={`Chapter ${roman}`} ink="#fff" hairline={COLOR.hairlineLight} />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <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" image="assets/heroimage2.jpg" />;


// Numbered problem/strategy slide template
const NumberedSlide = ({
  idx,
  number,
  section,
  title,
  body,
  right,
  rightLabel,
  bg = COLOR.bg,
  ink = COLOR.ink,
  centered = false
}) =>
<Slide bg={bg} ink={ink}>
    <PageChrome idx={idx} total={TOTAL} 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 — Too many launches
const SlideTooMany = () =>
<NumberedSlide
  idx={5}
  number={1}
  centered
  section="Problem 01 of 04"
  title={<>Too many launches…</>}
  body={[
  <>X was getting 4+ product launches a day, with almost none crossing the 2M+ view mark.</>]
  }
  right={
  <div
    style={{
      width: "100%",
      maxWidth: 560,
      display: "flex",
      flexDirection: "column",
      gap: 14
    }}>
    
        {[
    { v: "0.4M", muted: true },
    { v: "0.9M", muted: true },
    { v: "1.2M", muted: true },
    { v: "1.8M", muted: true },
    { v: "0.6M", muted: true }].
    map((row, i) =>
    <div
      key={i}
      style={{
        display: "grid",
        gridTemplateColumns: "120px 1fr",
        alignItems: "center",
        gap: 20
      }}>
      
            <span style={{ fontFamily: MONO, fontSize: 18, color: COLOR.muted }}>
              Launch {String(i + 1).padStart(2, "0")}
            </span>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div
          style={{
            height: 14,
            width: `${parseFloat(row.v) * 35}%`,
            background: "#000",
            opacity: 0.85
          }} />
        
              <span style={{ fontFamily: MONO, fontSize: 16, color: COLOR.muted }}>{row.v}</span>
            </div>
          </div>
    )}
        <Hairline style={{ margin: "16px 0 8px" }} />
        <div
      style={{
        display: "grid",
        gridTemplateColumns: "120px 1fr",
        alignItems: "center",
        gap: 20
      }}>
      
          <span style={{ fontFamily: MONO, fontSize: 18, color: COLOR.ink, fontWeight: 700 }}>
            2M threshold
          </span>
          <div style={{ height: 1, borderTop: "1.5px dashed #000", width: "70%" }} />
        </div>
        <div style={{ fontFamily: MONO, fontSize: 13, color: COLOR.muted, marginTop: 12, letterSpacing: "0.04em" }}>
          / illustrative — no day above the line
        </div>
      </div>
  } />;



// 06 — Views alone
const SlideViewsAlone = () =>
<NumberedSlide
  idx={6}
  number={2}
  centered
  section="Problem 02 of 04"
  title={<>Views alone don't move the business.</>}
  body={[
  <>Seijin noticed competitors in his space spending millions on launches that hit big numbers but didn't convert.</>]
  }
  right={
  <div
    style={{
      width: "100%",
      maxWidth: 560,
      background: "#fff",
      border: `1px solid ${COLOR.hairline}`,
      borderRadius: 20,
      padding: 48,
      display: "flex",
      flexDirection: "column",
      gap: 28
    }}>
    
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Row label="Spend" value="$$$$" mono />
          <Hairline />
          <Row label="Views" value="↑ Big numbers" />
          <Hairline />
          <Row label="Pipeline" value="≈ Flat" muted italic />
          <Hairline />
          <Row label="Memory" value="None" muted italic />
        </div>
      </div>
  } />;



const Row = ({ label, value, mono, muted, italic }) =>
<div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
    <span style={{ fontFamily: SANS, fontSize: 18, letterSpacing: "0.16em", textTransform: "uppercase", color: COLOR.muted }}>
      {label}
    </span>
    <span
    style={{ ...{
        fontFamily: italic ? SERIF : mono ? MONO : SERIF,
        fontStyle: italic ? "italic" : "normal",
        fontSize: 32,
        color: muted ? COLOR.muted : COLOR.ink
      }, color: "rgb(0, 0, 0)" }}>
    
      {value}
    </span>
  </div>;


// 07 — Default category frame was a trap
const SlideCategoryTrap = () =>
<Slide>
    <PageChrome idx={7} total={TOTAL} section="Problem 03 of 04" />
    <Frame style={{ justifyContent: "center" }}>
      <div
      style={{
        display: "flex",
        alignItems: "baseline",
        gap: 24,
        marginBottom: 24
      }}>
      
        <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 56, color: COLOR.muted }}>
          03
        </span>
        <Hairline style={{ flex: 1, opacity: 0.5 }} />
      </div>
      <SerifTitle size={72} style={{ maxWidth: 1400 }}>
        The default category frame was a trap.
      </SerifTitle>
      <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <Body style={{ maxWidth: 720 }}>
          "AI CMO" was the shorthand the entire space was defaulting to,
          and it was actively repelling the buyer (CMOs themselves) and inviting
          skeptics over customers.
        </Body>
        <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: 0,
          border: `1px solid ${COLOR.hairline}`,
          borderRadius: 16,
          overflow: "hidden"
        }}>
        
          <div
          style={{
            padding: "24px 32px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            background: "#fff"
          }}>
          
            <span style={{ fontFamily: MONO, fontSize: 14, color: COLOR.muted, letterSpacing: "0.08em" }}>
              The category framing
            </span>
            <span style={{ fontFamily: MONO, fontSize: 14, color: COLOR.muted, letterSpacing: "0.08em" }}>
              The reaction it triggered
            </span>
          </div>
          <Hairline />
          <FrameRow lhs={<>"AI CMO"</>} rhs="Replacement threat" tone="bad" />
          <Hairline />
          <FrameRow lhs="Targeted at CMOs" rhs="Repels the buyer" tone="bad" />
          <Hairline />
          <FrameRow lhs="Sci-fi promise" rhs="Invites skeptics" tone="bad" />
        </div>
      </div>
    </Frame>
  </Slide>;


const FrameRow = ({ lhs, rhs, tone }) =>
<div
  style={{
    padding: "24px 32px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 32,
    background: "#fff"
  }}>
  
    <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 28, color: COLOR.ink }}>{lhs}</span>
    <svg width="28" height="14" viewBox="0 0 28 14" fill="none" stroke={COLOR.muted} strokeWidth="1.5">
      <path d="M2 7 H24 M18 2 L24 7 L18 12" />
    </svg>
    <span style={{ fontFamily: SANS, fontSize: 22, color: tone === "bad" ? "#9b1f1f" : COLOR.ink, fontWeight: 500 }}>
      {rhs}
    </span>
  </div>;


// 08 — A finished video isn't a launch
const SlideFinishedVideo = () =>
<NumberedSlide
  idx={8}
  number={4}
  centered
  section="Problem 04 of 04"
  title={<>A finished video isn't a launch.</>}
  body={[
  <>
        Seijin had the video and the date finalized, but no platform-native distribution plan,
        no hook engineered for X retention, and no influencers.
      </>]
  }
  right={
  <div style={{ width: "100%", maxWidth: 560, display: "flex", flexDirection: "column", gap: 0 }}>
        {[
    ["Finished video", "ready"],
    ["Launch date", "ready"],
    ["X-native hook", "missing"],
    ["Distribution plan", "missing"],
    ["Influencer lineup", "missing"],
    ["War-room ops", "missing"]].
    map(([label, status], i, a) =>
    <div key={label}>
            <div
        style={{
          padding: "22px 0",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between"
        }}>
        
              <span style={{ fontFamily: SERIF, fontSize: 32 }}>{label}</span>
              <span
          style={{
            fontFamily: MONO,
            fontSize: 14,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: status === "ready" ? COLOR.ink : "#b8001f",
            background: status === "ready" ? "rgba(0,0,0,0.05)" : "rgba(184,0,31,0.06)",
            border: `1px solid ${status === "ready" ? COLOR.hairline : "rgba(184,0,31,0.25)"}`,
            padding: "6px 12px",
            borderRadius: 4
          }}>
          
                {status}
              </span>
            </div>
            {i < a.length - 1 && <Hairline />}
          </div>
    )}
      </div>
  } />;



// 09 — Objectives divider
const SlideObjectivesDivider = () =>
<SectionDivider idx={9} roman="II" label="Objectives" image="assets/heroimage3.jpg" />;


// 10 — Be remembered
const SlideRemembered = () =>
<Slide>
    <PageChrome idx={10} total={TOTAL} section="Objective 01 of 02" />
    <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={88} style={{ maxWidth: 1400 }}>
        Be remembered, not just seen.
      </SerifTitle>
      <div
      style={{
        marginTop: 80,
        display: "grid",
        gridTemplateColumns: "1fr",
        gap: 100,
        alignItems: "start"
      }}>
      
        <div
        style={{
          paddingLeft: 40,
          borderLeft: `2px solid ${COLOR.ink}`,
          maxWidth: 1200
        }}>
        
          <div style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 56, lineHeight: 1.3, color: COLOR.ink }}>
            "Fine wasn't going to cut it. Helena had to be remembered by people."
          </div>
          <div style={{ marginTop: 24, fontFamily: SANS, fontSize: 18, color: COLOR.muted, letterSpacing: "0.18em", textTransform: "uppercase" }}>
            — Seijin Jung, Enrich Labs
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;


// 11 — Convert views
const SlideConvert = () =>
<Slide>
    <PageChrome idx={11} total={TOTAL} section="Objective 02 of 02" />
    <Frame top={120} style={{ justifyContent: "flex-start" }}>
      <div
      style={{
        display: "flex",
        alignItems: "baseline",
        gap: 24,
        marginBottom: 56
      }}>
      
        <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 64, color: COLOR.muted }}>
          02
        </span>
        <Hairline style={{ flex: 1, opacity: 0.5 }} />
      </div>
      <SerifTitle size={88} style={{ maxWidth: 1500 }}>
        Convert views into business outcomes.
      </SerifTitle>
      <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <Body style={{ maxWidth: 640 }}>
          Seijin engaged with us for signups, paying customers, and inbound.
          <br /><br />
          Views were the trigger, not the KPI.
        </Body>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {[
        ["Trigger", "Views on X"],
        ["KPI 01", "Signups"],
        ["KPI 02", "Paying customers"],
        ["KPI 03", "Inbound"]].
        map(([k, v], i, a) =>
        <div key={k}>
              <Hairline />
              <div
            style={{
              display: "flex",
              alignItems: "baseline",
              justifyContent: "space-between",
              padding: "26px 0"
            }}>
            
                <span style={{ fontFamily: SANS, fontSize: 16, color: COLOR.muted, letterSpacing: "0.18em", textTransform: "uppercase" }}>
                  {k}
                </span>
                <span style={{ fontFamily: SERIF, fontSize: 40, color: i === 0 ? COLOR.muted : COLOR.ink }}>
                  {v}
                </span>
              </div>
              {i === a.length - 1 && <Hairline />}
            </div>
        )}
        </div>
      </div>
    </Frame>
  </Slide>;


// 12 — Strategies divider
const SlideStrategiesDivider = () =>
<SectionDivider idx={12} roman="III" label="Strategies" image="assets/heroimage.jpg" />;


// Strategy slide — variant 1: text + tweet placeholder
const SlideRepositioned = () =>
<Slide>
    <PageChrome idx={13} total={TOTAL} section="Strategy 01 of 07" />
    <Frame>
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 100, height: "100%", alignItems: "center" }}>
        <div>
          <StrategyHead num={1} />
          <SerifTitle size={TYPE_SCALE.title}>
            Repositioned the category.
          </SerifTitle>
          <div style={{ marginTop: 40, maxWidth: 720 }}>
            <Body>
              Killed "AI CMO" and anchored Helena as the
               first autonomous AI marketer, pulling the narrative
              away from "replacement threat" toward "execution layer".
            </Body>
          </div>
          <div style={{ marginTop: 56, display: "flex", gap: 40 }}>
            <RepoCol label="From" value={<>"AI CMO"</>} sub="Replacement threat" tone="bad" />
            <RepoCol label="To" value={<>autonomous AI marketer</>} sub="Execution layer" tone="good" />
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end" }}>
          <img
            src="assets/tweet-helena-launch.png"
            alt="Seijin Jung's pinned launch tweet — 3.6M views"
            style={{
              width: 540,
              maxWidth: "100%",
              height: "auto",
              borderRadius: 18,
              border: `1px solid ${COLOR.hairline}`,
              boxShadow: "0 30px 60px -20px rgba(0,0,0,0.18), 0 8px 24px -8px rgba(0,0,0,0.10)",
            }}
          />
        </div>
      </div>
    </Frame>
  </Slide>;


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


const RepoCol = ({ label, value, sub, tone }) =>
<div style={{ flex: 1 }}>
    <div style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.22em", textTransform: "uppercase", color: COLOR.muted, marginBottom: 14 }}>
      {label}
    </div>
    <div style={{ fontFamily: SERIF, fontSize: 36, marginBottom: 8, color: tone === "bad" ? COLOR.muted : COLOR.ink, textDecoration: tone === "bad" ? "line-through" : "none", textDecorationThickness: 1 }}>
      {value}
    </div>
    <div style={{ fontFamily: SANS, fontSize: 18, color: COLOR.muted }}>{sub}</div>
  </div>;


// 14 — Rebuilt the hook
const SlideRebuiltHook = () =>
<NumberedSlide
  idx={14}
  number={2}
  centered
  section="Strategy 02 of 07"
  title={<>Rebuilt the hook.</>}
  body={[
  <>Seijin came in with a finished script. We re-engineered the opening for X-native performance and amended lines of body copy, betting on authentic founder-forward delivery.</>,
  <>The feed was already drowning in motion-graphics launches.</>]
  }
  right={
  <div
    style={{
      width: "100%",
      maxWidth: 560,
      display: "flex",
      flexDirection: "column",
      gap: 24
    }}>
    
        <div
      style={{
        background: "rgba(0,0,0,0.04)",
        border: `1px dashed ${COLOR.hairline}`,
        padding: "28px 32px",
        borderRadius: 12,
        fontFamily: MONO,
        fontSize: 16,
        color: COLOR.muted,
        lineHeight: 1.6,
        textDecoration: "line-through",
        textDecorationColor: "rgba(0,0,0,0.4)"
      }}>
      
          / original opening — motion-graphics product reveal /
        </div>
        <div style={{ display: "flex", justifyContent: "center", color: COLOR.muted, fontFamily: MONO, fontSize: 18 }}>↓</div>
        <div
      style={{
        background: "#fff",
        border: `1.5px solid ${COLOR.ink}`,
        padding: "28px 32px",
        borderRadius: 12,
        fontFamily: SERIF,
        fontSize: 26,
        lineHeight: 1.4
      }}>
      
          Founder, on-camera, first three seconds. Authentic delivery, X-native pacing.
        </div>
      </div>
  } />;



// 15 — Contrarian launch window
const SlideContrarian = () =>
<Slide>
    <PageChrome idx={15} total={TOTAL} section="Strategy 03 of 07" />
    <Frame style={{ justifyContent: "center" }}>
      <StrategyHead num={3} />
      <SerifTitle size={TYPE_SCALE.title}>
        Picked the contrarian launch window.
      </SerifTitle>
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 100, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28, maxWidth: 720 }}>
          <Body>
            Pulled the launch from the default Tuesday 7am PT slot to
             Monday 7am after hearing about other major launches.
          </Body>
          <Body color={COLOR.muted}>
            Pushed back hard on the Enrich team when they resisted ("nobody's awake on a Monday")
            because a less crowded feed beats a peak feed you can't stand out in.
          </Body>
        </div>
        {/* Calendar viz */}
        <div
        style={{
          background: "#fff",
          border: `1px solid ${COLOR.hairline}`,
          borderRadius: 16,
          padding: 32
        }}>
        
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
            {[
          { d: "Mon", count: 1, ours: true },
          { d: "Tue", count: 5 },
          { d: "Wed", count: 3 },
          { d: "Thu", count: 4 },
          { d: "Fri", count: 2 }].
          map((day) =>
          <div key={day.d} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                <div style={{ fontFamily: SANS, fontSize: 14, color: COLOR.muted, letterSpacing: "0.16em", textTransform: "uppercase" }}>
                  {day.d}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 4, height: 140, justifyContent: "flex-end" }}>
                  {Array.from({ length: 5 }).map((_, i) => {
                const filled = i < day.count;
                const isOurs = day.ours && i === 0;
                return (
                  <div
                    key={i}
                    style={{
                      width: 36,
                      height: 22,
                      background: filled ? isOurs ? COLOR.ink : "rgba(0,0,0,0.18)" : "transparent",
                      border: filled ? "none" : `1px dashed ${COLOR.hairline}`,
                      position: "relative"
                    }}>
                    
                        {isOurs &&
                    <div style={{ position: "absolute", left: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)", whiteSpace: "nowrap", fontFamily: MONO, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                            ← us
                          </div>
                    }
                      </div>);

              })}
                </div>
                <div style={{ fontFamily: MONO, fontSize: 14, color: COLOR.ink, fontWeight: 700, marginTop: 4 }}>
                  {day.count}
                </div>
              </div>
          )}
          </div>
          <div style={{ marginTop: 24, fontFamily: MONO, fontSize: 12, color: COLOR.muted, letterSpacing: "0.06em" }}>
            / # of major AI launches per day, illustrative
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;


// 16 — Influencer tiers
const SlideInfluencerTiers = () =>
<Slide>
    <PageChrome idx={16} total={TOTAL} section="Strategy 04 of 07" />
    <Frame>
      <StrategyHead num={4} />
      <SerifTitle size={TYPE_SCALE.title}>
        Curated influencers in tiers.
      </SerifTitle>
      <Body style={{ marginTop: 32, maxWidth: 1100 }}>
        Split ~300 engaging accounts across three tiers, each doing different work:
      </Body>
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
        {[
      {
        tier: "Tier 1",
        label: "The legitimizing layer",
        count: "~30",
        who: "Top-tier industry voices",
        does: "Independent quote-tweets and threads"
      },
      {
        tier: "Tier 2",
        label: "The reach layer",
        count: "~90",
        who: "ICP-adjacent mid-tier voices",
        does: "Quote-tweets and substantive comments"
      },
      {
        tier: "Tier 3",
        label: "The momentum layer",
        count: "~180",
        who: "Wider-network accounts",
        does: "Likes and reposts to sustain momentum"
      }].
      map((t, i) =>
      <div
        key={t.tier}
        style={{
          background: i === 0 ? COLOR.ink : "#fff",
          color: i === 0 ? "#fff" : COLOR.ink,
          border: `1px solid ${i === 0 ? 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: i === 0 ? "rgba(255,255,255,0.7)" : COLOR.muted }}>
                {t.count} accounts
              </span>
            </div>
            <div style={{ fontFamily: SERIF, fontSize: 34, lineHeight: 1.15 }}>
              {t.label}
            </div>
            <Hairline color={i === 0 ? COLOR.hairlineLight : COLOR.hairline} />
            <div style={{ marginTop: "auto" }}>
              <div style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.18em", textTransform: "uppercase", color: i === 0 ? "rgba(255,255,255,0.5)" : COLOR.muted, marginBottom: 8 }}>
                Who
              </div>
              <div style={{ fontFamily: SANS, fontSize: 22, marginBottom: 20 }}>{t.who}</div>
              <div style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.18em", textTransform: "uppercase", color: i === 0 ? "rgba(255,255,255,0.5)" : COLOR.muted, marginBottom: 8 }}>
                Does
              </div>
              <div style={{ fontFamily: SANS, fontSize: 22 }}>{t.does}</div>
            </div>
          </div>
      )}
      </div>
    </Frame>
  </Slide>;


// 17 — Comparison content
const SlideComparison = () =>
<Slide>
    <PageChrome idx={17} total={TOTAL} section="Strategy 05 of 07" />
    <Frame style={{ justifyContent: "center" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 100, alignItems: "center" }}>
        <div>
          <StrategyHead num={5} />
          <SerifTitle size={TYPE_SCALE.title}>
            Planted competitive comparison content.
          </SerifTitle>
          <div style={{ marginTop: 40, maxWidth: 720, display: "flex", flexDirection: "column", gap: 24 }}>
            <Body>
              Briefed a handful of influencers to directly compare Helena
              against the notable launches of the quarter. First time we'd run this play.
            </Body>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", height: "100%" }}>
          <img
            src="assets/tweet-devin-comparison.png"
            alt="Tweet exchange — Devin comparison QT and Seijin's reply"
            style={{
              width: 600,
              maxWidth: "100%",
              height: "auto",
              borderRadius: 18,
              border: `1px solid ${COLOR.hairline}`,
              boxShadow: "0 30px 60px -20px rgba(0,0,0,0.18), 0 8px 24px -8px rgba(0,0,0,0.10)",
            }}
          />
        </div>
      </div>
    </Frame>
  </Slide>;


// 18 — Pre-loaded the first hour
const SlidePreLoaded = () =>
<Slide>
    <PageChrome idx={18} total={TOTAL} section="Strategy 06 of 07" />
    <Frame style={{ justifyContent: "center" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 100, alignItems: "center" }}>
        <div>
          <StrategyHead num={6} />
          <SerifTitle size={TYPE_SCALE.title}>
            Pre-loaded the first hour.
          </SerifTitle>
          <div style={{ marginTop: 40, maxWidth: 720, display: "flex", flexDirection: "column", gap: 24 }}>
            <Body>
              Set up a Google Calendar invite with Enrich's investors,
              founder friends, and key stakeholders to coordinate engagement in the
              first 60–90 minutes.
            </Body>
            <Body>
              This fed the algorithm strong early signal from high-quality,
              non-influencer accounts.
            </Body>
          </div>
        </div>
        <div
        style={{
          background: "#fff",
          border: `1px solid ${COLOR.hairline}`,
          borderRadius: 16,
          overflow: "hidden"
        }}>
        
          <div style={{ padding: "20px 28px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: `1px solid ${COLOR.hairline}` }}>
            <span style={{ fontFamily: MONO, fontSize: 13, color: COLOR.muted }}>Mon · 7:00 AM PT</span>
          </div>
          {[
        { t: "+00m", who: "Founder posts", q: "Launch tweet live" },
        { t: "+05m", who: "Investor circle", q: "Quote-tweets / replies" },
        { t: "+15m", who: "Founder friends", q: "Substantive comments" },
        { t: "+30m", who: "Tier 1 influencers", q: "Independent QTs" },
        { t: "+60m", who: "Tier 2 + Tier 3", q: "Reach + reposts" }].
        map((row, i, a) =>
        <div key={row.t}>
              <div style={{ padding: "20px 28px", display: "grid", gridTemplateColumns: "100px 1fr 1.1fr", gap: 24, alignItems: "center" }}>
                <span style={{ fontFamily: MONO, fontSize: 18, color: COLOR.ink, fontWeight: 600 }}>{row.t}</span>
                <span style={{ fontFamily: SERIF, fontSize: 26 }}>{row.who}</span>
                <span style={{ fontFamily: SANS, fontSize: 18, color: COLOR.muted }}>{row.q}</span>
              </div>
              {i < a.length - 1 && <Hairline />}
            </div>
        )}
        </div>
      </div>
    </Frame>
  </Slide>;


// 19 — Slack war room
const SlideWarRoom = () =>
<Slide bg={COLOR.bgDark} ink="#fff">
    <PageChrome idx={19} total={TOTAL} section="Strategy 07 of 07" ink="#fff" hairline={COLOR.hairlineLight} />
    <Frame>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 100, height: "100%", alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 32 }}>
            <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 64, color: "rgba(255,255,255,0.6)" }}>
              07
            </span>
            <Hairline style={{ flex: 1, opacity: 0.5 }} color={COLOR.hairlineLight} />
            <span style={{ fontFamily: SANS, fontSize: 14, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>
              Strategy
            </span>
          </div>
          <SerifTitle size={TYPE_SCALE.title} style={{ color: "#fff" }}>
            Ran a 24/7 Slack war room.
          </SerifTitle>
          <Body color="rgba(255,255,255,0.78)" style={{ marginTop: 40, maxWidth: 720 }}>
            Dedicated channel from pre-launch through post-launch day.
          </Body>
          <div style={{ marginTop: 56, display: "flex", gap: 56 }}>
            {[
          ["Channel", "#helena-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)" }}>
              # helena-launch &middot; live
            </span>
          </div>
          {[
        ["07:00", "founder", "Tweet live. Going."],
        ["07:04", "tlvc", "Investor circle wave dispatched."],
        ["07:18", "tlvc", "T1 QTs landing — see thread →"],
        ["07:42", "founder", "Engagement is hot. Velocity ↑."],
        ["08:30", "tlvc", "Comparison content greenlit. Releasing."],
        ["10:15", "tlvc", "1.0M crossed."],
        ["14:50", "founder", "🚀 2.0M."],
        ["+1d", "tlvc", "3.6M. Decay curve flat. Holding."]].
        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>;


// 20 — Results divider
const SlideResultsDivider = () =>
<SectionDivider idx={20} roman="IV" label="Results" image="assets/heroimage4.jpg" />;


// Big stat slide template
const StatSlide = ({ idx, statNumber, eyebrow, statValue, statUnit, headline, body, comparison }) =>
<Slide bg={COLOR.bg}>
    <PageChrome idx={idx} total={TOTAL} section={`Result ${String(statNumber).padStart(2, "0")} of 05`} />
    <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: 280, lineHeight: 0.9, fontWeight: 400, letterSpacing: "-0.04em" }}>
                {statValue}
              </span>
              {statUnit &&
            <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 96, 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>;


// 21 — 3.6M views
const SlideResult1 = () =>
<StatSlide
  idx={21}
  statNumber={1}
  eyebrow="Views on X"
  statValue="3.6"
  statUnit="M"
  headline={<>Target was 1M.</>}
  body="3.6× the goal. Held by the comparison content well past the typical X decay curve."
  comparison="/ 360% of stated target" />;



// 22 — 10x homepage traffic
const SlideResult2 = () =>
<Slide>
    <PageChrome idx={22} total={TOTAL} section="Result 02 of 05" />
    <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 }}>02</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: 320, lineHeight: 0.9, fontWeight: 400, letterSpacing: "-0.04em" }}>
                10
              </span>
              <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 120, color: COLOR.muted, marginLeft: 8 }}>
                ×
              </span>
            </div>
            <div style={{ marginTop: 24, fontFamily: MONO, fontSize: 16, color: COLOR.muted, letterSpacing: "0.06em" }}>
              / overnight, with extended launch-week tail
            </div>
          </div>
          <div>
            <SerifTitle size={64}>
              Homepage traffic, overnight.
            </SerifTitle>
            <Body color={COLOR.muted} style={{ marginTop: 28, maxWidth: 540 }}>
              Sustained an extended tail through launch week instead of decaying back
              to baseline by day two.
            </Body>
            {/* small chart */}
            <div style={{ marginTop: 36, display: "flex", alignItems: "flex-end", gap: 8, height: 100 }}>
              {[
            { h: 10, pre: true },
            { h: 12, pre: true },
            { h: 11, pre: true },
            { h: 100, label: "LAUNCH →" },
            { h: 80 },
            { h: 70 },
            { h: 65 },
            { h: 55 },
            { h: 50 },
            { h: 40 }].
            map((b, i) =>
            <div key={i} style={{ flex: 1, height: `${b.h}%`, background: b.pre ? "rgba(0,0,0,0.2)" : COLOR.ink, position: "relative" }}>
                  {b.label &&
              <div style={{ position: "absolute", top: -22, right: -4, fontFamily: MONO, fontSize: 12, letterSpacing: "0.08em", color: COLOR.muted }}>
                      {b.label}
                    </div>
              }
                </div>
            )}
            </div>
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", fontFamily: MONO, fontSize: 12, color: COLOR.muted, letterSpacing: "0.06em" }}>
              <span>D-3</span>
              <span>Launch</span>
              <span>D+6</span>
            </div>
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;


// 23 — 70%+ positive sentiment
const SlideResult3 = () =>
<Slide>
    <PageChrome idx={23} total={TOTAL} section="Result 03 of 05" />
    <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" }}>
                70
              </span>
              <span style={{ fontFamily: SERIF, fontStyle: "italic", fontSize: 120, color: COLOR.muted }}>
                %+
              </span>
            </div>
            {/* sentiment bar */}
            <div style={{ marginTop: 36, display: "flex", height: 14, borderRadius: 999, overflow: "hidden", border: `1px solid ${COLOR.hairline}` }}>
              <div style={{ flex: 70, background: COLOR.ink }} />
              <div style={{ flex: 18, background: "rgba(0,0,0,0.25)" }} />
              <div style={{ flex: 12, background: "rgba(0,0,0,0.08)" }} />
            </div>
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", fontFamily: MONO, fontSize: 13, color: COLOR.muted, letterSpacing: "0.06em" }}>
              <span>POSITIVE 70%</span>
              <span>NEUTRAL 18%</span>
              <span>NEG 12%</span>
            </div>
          </div>
          <div>
            <SerifTitle size={60}>
              Positive sentiment on launch post responses.
            </SerifTitle>
            <Body color={COLOR.muted} style={{ marginTop: 28, maxWidth: 540 }}>
              The repositioning held. "Replacement threat" reactions were the minority.
            </Body>
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;


// 24 — Biggest launch of the week
const SlideResult4 = () =>
<Slide>
    <PageChrome idx={24} total={TOTAL} section="Result 04 of 05" />
    <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 }}>
          Biggest launch of the week.
        </SerifTitle>
        <Body style={{ marginTop: 24, maxWidth: 1100, color: COLOR.muted }}>
          Every other launch in the same week capped under 2M views.
        </Body>
        <div
        style={{
          marginTop: 56,
          background: "#fff",
          border: `1px solid ${COLOR.hairline}`,
          borderRadius: 16,
          padding: 40
        }}>
        
          {[
        { name: "Helena (Enrich Labs)", views: 3.6, ours: true },
        { name: "Competitor A", views: 1.9 },
        { name: "Competitor B", views: 1.4 },
        { name: "Competitor C", views: 1.1 },
        { name: "Competitor D", views: 0.7 }].
        map((row) => {
          const pct = row.views / 3.6 * 100;
          return (
            <div key={row.name} style={{ display: "grid", gridTemplateColumns: "320px 1fr 100px", gap: 24, alignItems: "center", padding: "16px 0" }}>
                <span style={{ fontFamily: SERIF, fontSize: 26, fontStyle: row.ours ? "italic" : "normal", color: row.ours ? COLOR.ink : COLOR.muted }}>
                  {row.name}
                </span>
                <div style={{ position: "relative", height: 20, background: "rgba(0,0,0,0.05)" }}>
                  <div style={{ height: "100%", width: `${pct}%`, background: row.ours ? COLOR.ink : "rgba(0,0,0,0.3)" }} />
                  {/* 2M cap line */}
                  <div style={{ position: "absolute", left: `${2 / 3.6 * 100}%`, top: -6, bottom: -6, width: 1, borderLeft: "1.5px dashed rgba(0,0,0,0.4)" }} />
                </div>
                <span style={{ fontFamily: MONO, fontSize: 18, color: row.ours ? COLOR.ink : COLOR.muted, fontWeight: row.ours ? 700 : 400, textAlign: "right" }}>
                  {row.views}M
                </span>
              </div>);

        })}
          <div style={{ marginTop: 16, fontFamily: MONO, fontSize: 12, color: COLOR.muted, letterSpacing: "0.06em" }}>
            / dashed line = 2M cap nobody else crossed
          </div>
        </div>
      </div>
    </Frame>
  </Slide>;


// 25 — Revenue followed traffic
const SlideResult5 = () =>
<Slide bg={COLOR.bgDark} ink="#fff">
    <PageChrome idx={25} total={TOTAL} section="Result 05 of 05" ink="#fff" hairline={COLOR.hairlineLight} />
    <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 05
          </span>
          <Hairline style={{ flex: 1, opacity: 0.5 }} color={COLOR.hairlineLight} />
          </div>
        <SerifTitle size={180} style={{ color: "#fff" }}>
          Revenue followed traffic.
        </SerifTitle>
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: `1px solid ${COLOR.hairlineLight}`, borderBottom: `1px solid ${COLOR.hairlineLight}` }}>
          {[
        ["3.6M", "Views"],
        ["10×", "Traffic"],
        ["↑", "Signups"],
        ["↑", "Paying customers"]].
        map(([v, k], i) =>
        <div
          key={k}
          style={{
            padding: "32px 24px",
            borderRight: i < 3 ? `1px solid ${COLOR.hairlineLight}` : "none"
          }}>
          
              <div style={{ fontFamily: SERIF, fontSize: 64, fontWeight: 400, lineHeight: 1, color: "#fff" }}>
                {v}
              </div>
              <div style={{ marginTop: 12, fontFamily: SANS, fontSize: 14, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>
                {k}
              </div>
            </div>
        )}
        </div>
        <div style={{ marginTop: 32, fontFamily: SERIF, fontSize: 28, color: "rgba(255,255,255,0.8)", maxWidth: 900 }}>
          Views were the trigger. Revenue was the KPI. Both moved.
        </div>
      </div>
    </Frame>
  </Slide>;


// 26 — Pull-quote / breather
const SlidePullQuote = () =>
<Slide bg={COLOR.bgWarm}>
    <PageChrome idx={26} total={TOTAL} section="Closing thought" />
    <Frame>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <SerifTitle size={120} style={{ maxWidth: 1600 }}>
          A finished video isn't a launch.
        </SerifTitle>
        <SerifTitle size={120} style={{ marginTop: 24, maxWidth: 1600 }}>
          The other half is what we do.
        </SerifTitle>
        <div style={{ marginTop: 64, display: "flex", alignItems: "center", gap: 16 }}>
          <Hairline style={{ width: 80 }} />
          </div>
      </div>
    </Frame>
  </Slide>;


// 27 — Closing / contact
const SlideClosing = () =>
<Slide bg="#000" ink="#fff">
    <img
    src="assets/heroimage.jpg"
    alt=""
    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.35 }} />
  
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.85))" }} />
    <PageChrome idx={27} total={TOTAL} section="Thank you" ink="#fff" hairline={COLOR.hairlineLight} />
    <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 }}>
          <ContactCol label="Read more" value="launchvideo.com" />
        </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>;


const ContactCol = ({ label, value }) =>
<div>
    <div style={{ fontFamily: SANS, fontSize: 13, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 12 }}>
      {label}
    </div>
    <div style={{ fontFamily: SERIF, fontSize: 32, color: "#fff" }}>{value}</div>
  </div>;


// ============================================================
// Mount
// ============================================================
const SLIDES = [
{ c: SlideCover, label: "01 Cover" },
{ c: SlideAbout, label: "02 About" },
{ c: SlideTOC, label: "03 Contents" },
{ c: SlideProblemsDivider, label: "04 Problems" },
{ c: SlideTooMany, label: "05 Too Many Launches" },
{ c: SlideViewsAlone, label: "06 Views Alone" },
{ c: SlideCategoryTrap, label: "07 Category Trap" },
{ c: SlideFinishedVideo, label: "08 Finished Video" },
{ c: SlideObjectivesDivider, label: "09 Objectives" },
{ c: SlideRemembered, label: "10 Be Remembered" },
{ c: SlideConvert, label: "11 Convert" },
{ c: SlideStrategiesDivider, label: "12 Strategies" },
{ c: SlideRepositioned, label: "13 Repositioned" },
{ c: SlideRebuiltHook, label: "14 Hook" },
{ c: SlideContrarian, label: "15 Window" },
{ c: SlideInfluencerTiers, label: "16 Influencers" },
{ c: SlideComparison, label: "17 Comparison" },
{ c: SlidePreLoaded, label: "18 First Hour" },
{ c: SlideWarRoom, label: "19 War Room" },
{ c: SlideResultsDivider, label: "20 Results" },
{ c: SlideResult1, label: "21 3.6M" },
{ c: SlideResult2, label: "22 10x Traffic" },
{ c: SlideResult3, label: "23 Sentiment" },
{ c: SlideResult4, label: "24 Biggest" },
{ c: SlideResult5, label: "25 Revenue" },
{ c: SlidePullQuote, label: "26 Quote" },
{ c: SlideClosing, label: "27 Close" }];


window.SLIDES = SLIDES;

// Idempotent mount — guards against double execution
if (!window.__deckMounted) {
  window.__deckMounted = true;
  const stage = document.querySelector("deck-stage");
  // Clear any prior children
  while (stage.firstChild) stage.removeChild(stage.firstChild);
  SLIDES.forEach((s) => {
    const section = document.createElement("section");
    // deck-stage auto-prepends a 1-indexed counter to data-screen-label,
    // so use just the descriptive part here to avoid "01 01 Cover".
    section.setAttribute("data-label", s.label.replace(/^\d+\s+/, ""));
    stage.appendChild(section);
    const root = ReactDOM.createRoot(section);
    root.render(<s.c />);
  });
}