/* Smash League — landing page shell + pitch slides
   ------------------------------------------------------- */
const { useState: useStateLP, useEffect: useEffectLP, useRef: useRefLP } = React;

/* ── interactive landing page ─────────────── */
function LandingPage({ palette = "arcade", annotate = false, screen = "desktop" }) {
  const [platform, setPlatform] = useStateLP("steam");
  const [showSticky, setShowSticky] = useStateLP(false);
  const [lbox, setLbox] = useStateLP({ open: false, idx: 0 });
  const scrollRef = useRefLP(null);

  // Sticky buy bar appears once user scrolls past the hero
  useEffectLP(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      setShowSticky(el.scrollTop > 600);
    };
    el.addEventListener("scroll", onScroll);
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div
      ref={scrollRef}
      className="lp"
      data-palette={palette}
      data-screen={screen}
      style={{
        width: "100%",
        height: "100%",
        overflow: "auto",
        scrollbarWidth: "thin",
        scrollbarColor: "var(--c-yellow) var(--c-ink)"
      }}>
      
      <Nav onBuy={() => setShowSticky(true)} />
      <Hero platform={platform} setPlatform={setPlatform} annotate={annotate} />
      <Trailer onPlay={() => setLbox({ open: true, idx: 0 })} />
      <Features annotate={annotate} />
      <Modes annotate={annotate} />
      <Gallery onOpen={(i) => setLbox({ open: true, idx: i })} />
      <Characters />
      <CrossPlay />
      <Community annotate={annotate} />
      <Email annotate={annotate} />
      <Press />
      <Roadmap annotate={annotate} />
      <FAQ />
      <Foot />
      <StickyBuy show={showSticky} platform={platform} setPlatform={setPlatform} />
      <Lightbox
        open={lbox.open}
        idx={lbox.idx}
        onClose={() => setLbox({ open: false, idx: 0 })}
        onPrev={() =>
        setLbox((s) => ({
          ...s,
          idx: (s.idx - 1 + GALLERY_TILES.length) % GALLERY_TILES.length
        }))
        }
        onNext={() =>
        setLbox((s) => ({
          ...s,
          idx: (s.idx + 1) % GALLERY_TILES.length
        }))
        } />
      
    </div>);

}

/* ── pitch slide chrome ───────────────────── */
const SlideFrame = ({ num, total, title, kicker, children, bg = "ink" }) =>
<div
  className="lp"
  data-palette="arcade"
  style={{
    width: "100%",
    height: "100%",
    padding: "64px 80px",
    display: "flex",
    flexDirection: "column",
    background: bg === "sand" ? "var(--c-sand)" : bg === "yellow" ? "var(--c-yellow)" : "var(--c-ink)",
    color: bg === "ink" ? "var(--c-sand)" : "var(--c-ink)",
    position: "relative",
    overflow: "hidden"
  }}>
  
    <div
    style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      marginBottom: 40,
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      opacity: 0.7
    }}>
    
      <div>TRILLION DIGITAL™ · DISCOVERY DECK · KEITH KIRBY · THE MUNKY</div>
      <div>{String(num).padStart(2, "0")} / {String(total).padStart(2, "0")}</div>
    </div>
    {kicker &&
  <div
    style={{
      fontFamily: "var(--font-mono)",
      fontSize: 13,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      color: bg === "yellow" ? "var(--c-hot)" : "var(--c-yellow)",
      marginBottom: 18
    }}>
    
        {kicker}
      </div>
  }
    {title &&
  <h1
    className="lp-display"
    style={{
      fontSize: 96,
      margin: "0 0 36px",
      maxWidth: "92%"
    }}>
    
        {title}
      </h1>
  }
    <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
  </div>;


const SLIDE_COUNT = 5;

/* Slide 1 — cover */
function SlideCover() {
  return (
    <div
      className="lp"
      data-palette="arcade"
      style={{
        width: "100%",
        height: "100%",
        background: "var(--c-ink)",
        color: "var(--c-sand)",
        position: "relative",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        padding: 80
      }}>
      
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage:
          "repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,214,10,0.04) 80px 81px)"
        }} data-comment-anchor="41e8304e1f-div-157-7" />
      
      <div
        style={{
          position: "absolute",
          top: -240,
          right: -240,
          width: 540,
          height: 540,
          backgroundImage: "radial-gradient(var(--c-yellow) 2px, transparent 2.5px)",
          backgroundSize: "16px 16px",
          opacity: 0.22,
          maskImage: "radial-gradient(circle, #000 30%, transparent 70%)"
        }} data-comment-anchor="dc8c1af1d8-div-165-7" />
      
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          position: "relative"
        }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <div style={{
            width: 64, height: 64,
            background: "var(--c-yellow)",
            color: "var(--c-ink)",
            fontFamily: "var(--font-display)",
            fontSize: 56,
            display: "grid",
            placeItems: "center",
            lineHeight: 1,
            transform: "skewX(-8deg)",
            boxShadow: "6px 6px 0 var(--c-hot)"
          }}>T</div>
          <div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontSize: 22,
              letterSpacing: "0.06em",
              lineHeight: 1,
              color: "var(--c-sand)"
            }}>TRILLION DIGITAL™</div>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: "var(--c-yellow)",
              marginTop: 4,
              opacity: 0.85
            }}>Performance-built brand work</div>
          </div>
        </div>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 13,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          opacity: 0.7,
          textAlign: "right"
        }}>
          <div>2026-05-17</div>
          <div style={{ opacity: 0.7, marginTop: 4 }}>Discovery Deck</div>
        </div>
      </div>
      <div style={{ position: "relative", maxWidth: "86%" }}>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 14,
            letterSpacing: "0.2em",
            color: "var(--c-yellow)",
            marginBottom: 28
          }}>
          
          // FOR · KEITH KIRBY · CEO, THE MUNKY
        </div>
        <h1
          className="lp-display"
          style={{
            fontSize: 160,
            margin: "0 0 8px",
            color: "var(--c-sand)",
            lineHeight: 0.88
          }} data-comment-anchor="665024ba73-h1-241-9">
          
          Spike <span style={{ color: "var(--c-yellow)" }}>the launch.</span>
        </h1>
        <h1
          className="lp-display"
          style={{
            fontSize: 160,
            margin: 0,
            color: "var(--c-sand)",
            lineHeight: 0.88,
            display: "flex",
            alignItems: "baseline",
            gap: "0.2em",
            flexWrap: "wrap"
          }}>
          <span style={{ opacity: 0.9 }}>Run</span>
          <span
            style={{
              background: "var(--c-sand)",
              color: "var(--c-ink)",
              padding: "0 18px 8px",
              display: "inline-block",
              transform: "rotate(-2deg) skewX(-6deg)",
              boxShadow: "0 0 0 8px var(--c-ink), 14px 14px 0 8px var(--c-hot)",
              marginRight: 12
            }}>
            the season.
          </span>
        </h1>
        <div
          style={{
            marginTop: 52,
            fontSize: 28,
            maxWidth: 880,
            opacity: 0.85,
            lineHeight: 1.4
          }}>
          
          A go-to-market partner for <em style={{ color: "var(--c-yellow)", fontStyle: "normal" }}>Spikeball Smash</em>.
          Launch sprint up front, growth + community ops after.
          One team, one roadmap — August 14 through Season 1.
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          opacity: 0.5,
          position: "relative"
        }}>
        
        <div>OFF-CAMERA REFERENCE · CONFIDENTIAL</div>
        <div>SLIDE 01 / 05 · TRILLION DIGITAL™</div>
      </div>
    </div>);

}

/* Slide 2 — the two halves */
function SlideDiagnosis() {
  const halves = [
  {
    k: "FIRST HALF",
    when: "M1 — M2 · 60 DAYS",
    verb: "Spike",
    body: "Sixty days to make August 14 unmissable. Wishlist velocity, paid creative on rotation, press lined up to the cross-play moment. We sprint with you to release.",
    metrics: ["Wishlists", "Day-1 sales", "Press impressions", "Cross-play installs"],
    tag: "LAUNCH WINDOW",
    accent: "hot"
  },
  {
    k: "SECOND HALF",
    when: "M3 — M12 · SEASON 1",
    verb: "Run",
    body: "Launch is a moment; a game is a habit. Community ops, weekly content cadence, paid scaled on what's converting, retention loops tuned every week. All the way through Season 1.",
    metrics: ["Retention D30", "Community DAU", "CAC payback", "Repeat sessions"],
    tag: "SEASON ARC",
    accent: "yellow"
  }];

  return (
    <SlideFrame num={2} total={SLIDE_COUNT} kicker="// 01 · the frame" title={<>Two halves.<br />One scoreboard.</>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, height: "100%" }} data-comment-anchor="4278a7650a-div-335-7">
        {halves.map((h, i) =>
        <div
          key={h.k}
          style={{
            border: "1px solid currentColor",
            padding: 36,
            position: "relative",
            background: h.accent === "yellow" ? "var(--c-yellow)" : "transparent",
            color: h.accent === "yellow" ? "var(--c-ink)" : "inherit",
            display: "flex",
            flexDirection: "column"
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 22, gap: 12, flexWrap: "wrap" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.2em", color: h.accent === "yellow" ? "var(--c-hot)" : "var(--c-yellow)" }}>
                {String(i + 1).padStart(2, "0")} · {h.k}
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.18em", opacity: 0.6 }}>
                {h.when}
              </div>
            </div>
            <div className="lp-display" style={{ fontSize: 132, lineHeight: 0.95, margin: "0 0 28px", letterSpacing: "-0.02em" }}>
              {h.verb}.
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase", color: h.accent === "yellow" ? "var(--c-hot)" : "var(--c-yellow)", marginBottom: 14 }}>
              {h.tag}
            </div>
            <div style={{ fontSize: 24, opacity: 0.9, maxWidth: 560, lineHeight: 1.4, marginBottom: 28 }}>
              {h.body}
            </div>
            <div style={{ marginTop: "auto", borderTop: "1px dashed currentColor", paddingTop: 20 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.6, marginBottom: 16 }}>
                KPIs WE'D MEASURE
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 20px" }}>
                {h.metrics.map((m) =>
              <div key={m} style={{ fontFamily: "var(--font-display)", fontSize: 20, textTransform: "uppercase", letterSpacing: "0.02em" }}>
                    → {m}
                  </div>
              )}
              </div>
            </div>
          </div>
        )}
      </div>
    </SlideFrame>);

}

/* Slide 3 — budget recommendation */
function SlideApproach() {
  const phase1Core = [
  { num: "01", name: "SEM · Search Ads", price: "$3,000", unit: "/mo", note: "Capture high-intent traffic the moment someone types “roundnet game.”", tag: "+ SYNERGIZES WITH SEO" },
  { num: "02", name: "Video Ads", price: "$2,500", unit: "/mo", note: "YouTube pre-roll + programmatic — spike highlights and trailer cuts where players already scroll.", tag: "" },
  { num: "03", name: "Display Ads", price: "$2,000", unit: "/mo", note: "Always-on retargeting + display — keeps the trailer chasing warm leads off the site.", tag: "" }];

  const recommendations = [
  { num: "04", name: "Website Remaster (RWD)", price: "$4,495", note: "Performance-built. The conversion floor every other line item stands on.", tag: "★ HIGHLY RECOMMENDED" },
  { num: "05", name: "SEO+", price: "$990", unit: "/mo", note: "Only required if you proceed with the remaster. Three-month minimum.", tag: "ORGANIC SEARCH-RANK GROWTH" }];

  const phase2 = [
  { num: "06", name: "Connected TV (CTV)", price: "$5,000", unit: "/mo", note: "Hulu, Roku, Peacock. Party-game players watch with friends already in the room.", tag: "BEST FOR COST-EFFICIENT REACH" },
  { num: "07", name: "Social Ads", price: "$5,000", unit: "/mo", note: "Meta + paid social — wishlist push before launch, community fuel after.", tag: "" }];

  const sumMo = (list) => list.reduce((s, m) => s + parseInt(m.price.replace(/[$,]/g, ""), 10), 0);
  const phase1OneTime = 0;
  const phase1Mo = 7500;
  const recoOneTime = 4495;
  const recoMo = 990;
  const phase2Total = sumMo(phase2);
  const totalMo = phase1Mo + recoMo + phase2Total;
  const totalOneTime = recoOneTime;

  const Row = ({ item, dark }) =>
  <div style={{
    display: "grid",
    gridTemplateColumns: "44px 1fr auto",
    gap: 16,
    padding: "7px 0",
    borderBottom: "1px dotted currentColor",
    alignItems: "baseline"
  }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.18em", opacity: 0.55 }}>{item.num}</div>
      <div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, textTransform: "uppercase", letterSpacing: "0.01em" }}>
            {item.name}
          </div>
          {item.tag &&
        <span style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          padding: "3px 8px",
          background: dark ? "var(--c-hot)" : "var(--c-ink)",
          color: dark ? "var(--c-sand)" : "var(--c-yellow)"
        }}>{item.tag}</span>
        }
        </div>
        <div style={{ fontSize: 16, opacity: 0.82, lineHeight: 1.45, marginTop: 5 }}>{item.note}</div>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 26, whiteSpace: "nowrap" }}>
        {item.price}{item.unit && <span style={{ fontSize: 13, opacity: 0.6, marginLeft: 2 }}>{item.unit}</span>}
      </div>
    </div>;


  const SectionHead = ({ title, sub, total, totalSub, color = "var(--c-hot)" }) =>
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "2px solid currentColor", paddingBottom: 8, marginBottom: 2 }}>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 26, textTransform: "uppercase", letterSpacing: "0.02em", lineHeight: 1 }}>{title}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.18em", opacity: 0.65, marginTop: 4 }}>{sub}</div>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color, whiteSpace: "nowrap" }}>
        {total}{totalSub && <span style={{ fontSize: 12, opacity: 0.6, marginLeft: 3 }}>{totalSub}</span>}
      </div>
    </div>;


  return (
    <SlideFrame num={3} total={SLIDE_COUNT} kicker="// 02 · the approach" title="Budget recommendation.">
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 24, height: "100%" }}>
        {/* LEFT — Phase 1 + Recommendations */}
        <div style={{ border: "1px solid currentColor", padding: 22, display: "flex", flexDirection: "column", gap: 10 }}>
          <SectionHead
            title="Phase 1"
            sub="LAUNCH FOUNDATION · MONTHLY"
            total={`$7,500/mo`}
            color="var(--c-sand)" />
          
          <div>
            {phase1Core.map((m) => <Row key={m.num} item={m} />)}
          </div>

          <div style={{ marginTop: 14 }}>
            <SectionHead
              title="Recommendations"
              sub="OPTIONAL · ONE-TIME + MONTHLY"
              total={`$4,495 + $990/mo`}
              color="var(--c-sand)" />
            
            <div>
              {recommendations.map((m) => <Row key={m.num} item={m} />)}
            </div>
          </div>

          <div style={{ marginTop: 12, padding: "12px 16px", border: "2px solid var(--c-yellow)", background: "rgba(255, 214, 10, 0.08)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--c-yellow)" }}>
                If you proceed with both
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, letterSpacing: "0.02em", textTransform: "uppercase", marginTop: 5 }}>
                Phase 1 + Recommendations
              </div>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 26, lineHeight: 1.15, textAlign: "right", whiteSpace: "nowrap", color: "var(--c-sand)" }}>
              $4,495 <span style={{ fontSize: 12, opacity: 0.65 }}>one-time</span>
              <br />
              $8,490<span style={{ fontSize: 12, opacity: 0.65 }}>/mo</span>
            </div>
          </div>

          <div style={{ marginTop: "auto", paddingTop: 10, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.75, lineHeight: 1.6 }}>
            // Phase 1 locks the launch. Recommendations scale to what's working.
          </div>
        </div>

        {/* RIGHT — Phase 2 (yellow) */}
        <div style={{ background: "var(--c-yellow)", color: "var(--c-ink)", padding: 22, display: "flex", flexDirection: "column" }}>
          <SectionHead
            title="Phase 2"
            sub="ALWAYS-ON · MONTHLY"
            total={`$${phase2Total.toLocaleString()}`}
            totalSub="/mo"
            color="var(--c-ink)" />
          
          <div>
            {phase2.map((m) => <Row key={m.num} item={m} dark />)}
          </div>

          <div style={{ marginTop: "auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, paddingTop: 18, borderTop: "2px solid currentColor" }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7, marginBottom: 6 }}>
                Total recommended package
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.15 }}>
                ${totalOneTime.toLocaleString()} <span style={{ fontSize: 13, opacity: 0.7 }}>one-time</span>
                <br />
                ${totalMo.toLocaleString()}<span style={{ fontSize: 13, opacity: 0.7 }}>/mo</span>
              </div>
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.8, lineHeight: 1.6, alignSelf: "end" }}>
              // 20% of ad spend = flat mgmt fee.<br />
              // Lean version available.
            </div>
          </div>
        </div>
      </div>
    </SlideFrame>);

}

/* Slide 4 — channels (matches the quote's paid-media stack) */
function SlideChannels() {
  const channels = [
  { k: "Connected TV", spend: "$5,000", b: "Hulu, Roku, Peacock — streaming buys where party-game players actually unwind.", n: "01", priority: true },
  { k: "Paid Social", spend: "$5,000", b: "Meta + paid social — wishlist + community pump heading into launch.", n: "02", priority: true },
  { k: "Search (SEM)", spend: "$3,000", b: "Google Ads capturing high-intent traffic to the remastered site.", n: "03" },
  { k: "Video Ads", spend: "$2,500", b: "YouTube + programmatic video — spike highlights, trailer cuts.", n: "04" },
  { k: "Display", spend: "$2,000", b: "GDN + programmatic display — retargeting + always-on reach.", n: "05" }];

  return (
    <SlideFrame num={4} total={SLIDE_COUNT} kicker="// 03 · channels" title="Five channels. One media stack." bg="sand">
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 36, height: "100%" }}>
        <div>
          {channels.map((c, i) =>
          <div
            key={c.k}
            style={{
              display: "grid",
              gridTemplateColumns: "60px 1fr 140px",
              gap: 20,
              padding: "18px 0",
              borderTop: i === 0 ? "2px solid currentColor" : "1px solid currentColor",
              alignItems: "center"
            }}>
            
              <div
              style={{
                fontFamily: "var(--font-display)",
                fontSize: 32,
                color: "var(--c-hot)"
              }}>
              
                {c.n}
              </div>
              <div>
                <div className="lp-display" style={{ fontSize: 22, marginBottom: 4 }}>
                  {c.k}
                </div>
                <div style={{ fontSize: 13, opacity: 0.78, lineHeight: 1.45 }}>{c.b}</div>
              </div>
              <div
              style={{
                fontFamily: "var(--font-display)",
                fontSize: 22,
                color: c.priority ? "var(--c-ink)" : "rgba(0,0,0,0.7)",
                background: c.priority ? "var(--c-yellow)" : "transparent",
                padding: c.priority ? "6px 10px" : 0,
                textAlign: "right",
                justifySelf: "end"
              }}>
              
                {c.spend}<span style={{ fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", marginLeft: 4 }}>/mo</span>
              </div>
            </div>
          )}
          <div style={{ marginTop: 20, paddingTop: 14, borderTop: "2px solid currentColor", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>Total paid media</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28 }}>$17,500<span style={{ fontSize: 11, opacity: 0.6, marginLeft: 4 }}>/mo</span></div>
          </div>
          <div style={{ marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.6 }}>
            // 20% of ad spend retained by Trillion as flat management fee
          </div>
        </div>
        <div
          style={{
            background: "var(--c-ink)",
            color: "var(--c-sand)",
            padding: 32,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between"
          }}>
          
          <div>
            <div
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.18em",
                color: "var(--c-yellow)",
                marginBottom: 18
              }}>
              
              // QUESTIONS THAT MOVE BUDGET
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, fontSize: 14, lineHeight: 1.4 }}>
              <li>→ What's your launch-window paid budget?</li>
              <li>→ Where should the community live?</li>
              <li>→ Which platform matters most to you?</li>
              <li>→ Any campaigns that worked / flopped?</li>
              <li>→ Who else signs off on this?</li>
            </ul>
          </div>
          <div
            style={{
              borderTop: "1px solid rgba(255,255,255,0.18)",
              paddingTop: 18,
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.14em",
              opacity: 0.6
            }}>
            
            CHANNEL MIX SCALES TO BUDGET — lean version available
          </div>
        </div>
      </div>
    </SlideFrame>);

}

/* Slide 5 — the website remaster (foundation, not phase 2) */
function SlideLanding() {
  return (
    <SlideFrame num={4} total={SLIDE_COUNT} kicker="// 03 · the website remaster" title="The conversion floor everything stands on.">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, height: "100%" }}>
        <div>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 13,
              letterSpacing: "0.18em",
              color: "var(--c-yellow)",
              marginBottom: 20
            }}>
            
            // WHAT YOUR SITE DOES TODAY
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 19, lineHeight: 1.45, display: "flex", flexDirection: "column", gap: 14 }}>
            {["Hero competes with itself — wordmark, key art, and price tag all yelling at once.",
            "Buy buttons hide below the fold. Scrolling kills the purchase.",
            "One CTA for Steam, PS5, and Xbox shoppers — none of them feel addressed.",
            "Thin gallery, no trailer commitment, zero social proof.",
            "No email capture, no community pathway, no public roadmap.",
            "Paid traffic lands, bounces, and we paid for it. Every clicked-but-lost shopper is money on the floor."].
            map((x) =>
            <li key={x} style={{ display: "flex", gap: 14, opacity: 0.88, paddingBottom: 12, borderBottom: "1px dashed currentColor" }}>
                <span style={{ color: "var(--c-hot)", fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1 }}>×</span>
                <span>{x}</span>
              </li>
            )}
          </ul>
        </div>
        <div style={{ background: "var(--c-yellow)", color: "var(--c-ink)", padding: 32, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20 }}>
            <div
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 13,
                letterSpacing: "0.18em",
                color: "var(--c-hot)"
              }}>
              
              // RWD REMASTER · ON THE QUOTE
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28 }}>$4,495</div>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 19, lineHeight: 1.45, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
            "One dominant CTA. Platform tabs rewrite it per store.",
            "Sticky buy bar fires on scroll — catches every paid click.",
            "Trailer above the fold. Eight-tile media grid with hover-play and lightbox.",
            "Three sub-landing pages behind a mode switcher — A/B-ready for paid creative.",
            "Email + community capture seeds your launch-day CRM.",
            "Built clean for SEO — required, included on the quote.",
            "Cross-device responsive — TV, desktop, tablet, mobile."].
            map((x) =>
            <li key={x} style={{ display: "flex", gap: 14, paddingBottom: 12, borderBottom: "1px dashed rgba(0,0,0,0.2)" }}>
                <span style={{ color: "var(--c-hot)", fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1 }}>✓</span>
                <span>{x}</span>
              </li>
            )}
          </ul>
          <div
            style={{
              marginTop: "auto",
              paddingTop: 18,
              fontFamily: "var(--font-mono)",
              fontSize: 13,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              borderTop: "2px solid currentColor"
            }}>
            
            → Live walkthrough of the remaster · on this call
          </div>
        </div>
      </div>
    </SlideFrame>);

}

/* Slide 6 — next step */
function SlideNext() {
  return (
    <div
      className="lp"
      data-palette="arcade"
      style={{
        width: "100%",
        height: "100%",
        background: "var(--c-yellow)",
        color: "var(--c-ink)",
        padding: 80,
        position: "relative",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between"
      }}>
      
      <div
        style={{
          position: "absolute",
          right: -80,
          bottom: -180,
          fontFamily: "var(--font-display)",
          fontSize: 480,
          color: "rgba(10,10,11,0.06)",
          lineHeight: 0.8
        }}>
        
        GO.
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          opacity: 0.7,
          position: "relative"
        }}>
        
        <div>TRILLION DIGITAL™ · DISCOVERY DECK · CLOSE</div>
        <div>05 / 05</div>
      </div>
      <div style={{ position: "relative" }}>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 14,
            letterSpacing: "0.2em",
            color: "var(--c-hot)",
            marginBottom: 24
          }}>
          
          // 04 · NEXT STEP
        </div>
        <div className="lp-display" style={{ fontSize: 144, lineHeight: 0.85, maxWidth: "92%" }} data-comment-anchor="0ee50c5f4c-div-649-9">
          The quote’s<br />
          already on<br />
          <span
            style={{
              background: "var(--c-ink)",
              color: "var(--c-yellow)",
              padding: "0 18px 6px",
              display: "inline-block",
              transform: "rotate(-1.5deg) skewX(-6deg)"
            }}>
            
            your desk.
          </span>
        </div>
        <p style={{ marginTop: 40, fontSize: 28, maxWidth: 920, lineHeight: 1.4 }}>
          The full quote is in HubSpot. We walk it line by line on this call.
          If it lines up, sign off Friday — kickoff Monday.
        </p>
      </div>
      <div
        style={{
          position: "relative",
          display: "flex",
          gap: 12,
          alignItems: "center",
          flexWrap: "wrap"
        }}>
        
        <div
          style={{
            background: "var(--c-ink)",
            color: "var(--c-yellow)",
            padding: "20px 28px",
            fontFamily: "var(--font-display)",
            fontSize: 22,
            letterSpacing: "0.04em",
            textTransform: "uppercase",
            boxShadow: "8px 8px 0 var(--c-hot)"
          }} data-comment-anchor="434d1937a1-div-679-9">
          
          Sign off Friday → kickoff Monday.
        </div>
        <div
          style={{
            marginLeft: "auto",
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.16em",
            textTransform: "uppercase"
          }}>MARKETING@TRILLIONDIGITAL.NET //
   TRAVIS@TRILLIONDIGITAL.NET //

        </div>
      </div>
    </div>);

}

Object.assign(window, {
  LandingPage,
  SlideCover, SlideDiagnosis, SlideApproach, SlideChannels, SlideLanding, SlideNext
});