// Cold-open story view — Russia origin, market niche framing, thesis

const { motion: ms } = window;

function StoryView() {
  const [step, setStep] = React.useState(0);
  const total = 4;
  const { w: vw } = window.useWindowSize();
  const isMobile = vw < 700;

  React.useEffect(() => {
    function onKey(e) {
      if (e.key === "ArrowRight" || e.key === " ") { e.preventDefault(); setStep(s => Math.min(total - 1, s + 1)); }
      if (e.key === "ArrowLeft") { e.preventDefault(); setStep(s => Math.max(0, s - 1)); }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <div style={{
      minHeight: "100vh", background: "#0c0a09", color: "#fafaf9",
      display: "flex", flexDirection: "column",
      fontFamily: "'Inter', -apple-system, sans-serif",
    }}>
      {window.TopBarApp ? <window.TopBarApp active="story" /> : null}

      <div style={{
        flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
        padding: isMobile ? "24px 20px" : "40px 56px",
        position: "relative", overflowY: "auto",
      }}>
        <window.AnimatePresence mode="wait">
          {step === 0 && <ms.div key="0" {...slideAnim} style={{ width: "100%", maxWidth: 1100 }}><Slide0 isMobile={isMobile} /></ms.div>}
          {step === 1 && <ms.div key="1" {...slideAnim} style={{ width: "100%", maxWidth: 1100 }}><Slide1 isMobile={isMobile} /></ms.div>}
          {step === 2 && <ms.div key="2" {...slideAnim} style={{ width: "100%", maxWidth: 1100 }}><Slide2 isMobile={isMobile} /></ms.div>}
          {step === 3 && <ms.div key="3" {...slideAnim} style={{ width: "100%", maxWidth: 980 }}><Slide3 isMobile={isMobile} onPlayDemo={() => window.__sokoSetView("demo")} /></ms.div>}
        </window.AnimatePresence>
      </div>

      <StoryScrubber step={step} total={total} setStep={setStep} onPlayDemo={() => window.__sokoSetView("demo")} isMobile={isMobile} />
    </div>
  );
}

const slideAnim = {
  initial: { opacity: 0, y: 12 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -8 },
  transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] },
};

const labelStyle = {
  fontSize: 10, fontFamily: "ui-monospace, Menlo, monospace",
  color: "rgba(250,250,249,0.45)", letterSpacing: 1.4,
  textTransform: "uppercase", marginBottom: 18,
};
const accent = "oklch(0.78 0.10 50)";
const accentStrong = "oklch(0.85 0.12 50)";

// ====== SLIDE 0: The wound ======
function Slide0({ isMobile }) {
  const headlineSize = isMobile ? 28 : 48;
  const bodySize = isMobile ? 14 : 17;

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr",
      gap: isMobile ? 32 : 80,
      alignItems: "center",
    }}>
      <div>
        <div style={labelStyle}>Origin · 2024–2025</div>
        <div style={{
          fontSize: headlineSize, lineHeight: 1.08, fontWeight: 600,
          letterSpacing: -1, color: "#fafaf9",
          fontFamily: "'Inter', -apple-system, sans-serif",
          marginBottom: 28, textWrap: "pretty",
        }}>
          I spent <span style={{ color: accentStrong }}>four months</span> manually building this.<br />
          For <span style={{ color: accentStrong }}>one category.</span>
        </div>
        <div style={{ fontSize: bodySize, lineHeight: 1.55, color: "rgba(250,250,249,0.78)", maxWidth: 640 }}>
          Wildberries had pricing that didn't make sense — AliExpress-cheap on goods clearly not from AliExpress.
          I traced it back to 1688, then dove through Telegram horror stories to find a forwarder,
          then hunted for a Russian 3PL that could handle Chestny Znak compliance, label translation,
          photography, and repackaging.
        </div>
        <div style={{ fontSize: bodySize, lineHeight: 1.55, color: "rgba(250,250,249,0.55)", maxWidth: 640, marginTop: 18 }}>
          Sourcing was the easy part. Logistics is where the corridor breaks.
        </div>
      </div>

      {!isMobile && <ResearchTimeline />}
    </div>
  );
}

function ResearchTimeline() {
  const rows = [
    { w: "W 1–3", task: "Identify which Chinese platform actually supplies this category", out: "1688 · Yiwugo" },
    { w: "W 4–6", task: "Vet suppliers without readable trust signals", out: "Telegram + forums" },
    { w: "W 7–9", task: "Find a freight forwarder via horror-story scraping", out: "1 of 40 candidates" },
    { w: "W 10–13", task: "Source a Russian 3PL with Chestny Znak handling", out: "1 viable" },
    { w: "W 14–16", task: "Label translation, repack, photography, listing", out: "Live on WB" },
  ];
  return (
    <div style={{
      background: "rgba(250,250,249,0.03)",
      border: "1px solid rgba(250,250,249,0.08)",
      borderRadius: 14, padding: 20,
    }}>
      <div style={{ fontSize: 9, fontFamily: "ui-monospace, monospace", color: "rgba(250,250,249,0.5)", letterSpacing: 1, marginBottom: 14 }}>
        WHAT 4 MONTHS ACTUALLY LOOKED LIKE
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {rows.map((r, i) => (
          <ms.div key={i}
            initial={{ opacity: 0, x: -6 }} animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.15 + i * 0.07 }}
            style={{
              display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 12,
              padding: "11px 0", borderTop: i === 0 ? "none" : "1px solid rgba(250,250,249,0.06)",
              alignItems: "baseline",
            }}>
            <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 10, color: "rgba(250,250,249,0.4)" }}>{r.w}</div>
            <div style={{ fontSize: 13, color: "rgba(250,250,249,0.85)", lineHeight: 1.4 }}>{r.task}</div>
            <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 10, color: accent, whiteSpace: "nowrap" }}>{r.out}</div>
          </ms.div>
        ))}
      </div>
      <div style={{
        marginTop: 14, paddingTop: 12,
        borderTop: "1px solid rgba(250,250,249,0.08)",
        display: "flex", justifyContent: "space-between",
        fontFamily: "ui-monospace, monospace", fontSize: 11,
      }}>
        <span style={{ color: "rgba(250,250,249,0.5)" }}>16 weeks</span>
        <span style={{ color: accentStrong }}>1 category live</span>
      </div>
    </div>
  );
}

// ====== SLIDE 1: It's not just me ======
function Slide1({ isMobile }) {
  const headlineSize = isMobile ? 28 : 48;
  const bodySize = isMobile ? 14 : 17;

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
      gap: isMobile ? 32 : 80,
      alignItems: "center",
    }}>
      <div>
        <div style={labelStyle}>The pattern</div>
        <div style={{
          fontSize: headlineSize, lineHeight: 1.08, fontWeight: 600,
          letterSpacing: -1, color: "#fafaf9",
          fontFamily: "'Inter', -apple-system, sans-serif",
          marginBottom: 28, textWrap: "pretty",
        }}>
          Every reseller in <span style={{ color: accentStrong }}>every emerging market</span> is doing this.<br />
          Badly. <span style={{ color: accentStrong }}>In parallel.</span>
        </div>
        <div style={{ fontSize: bodySize, lineHeight: 1.55, color: "rgba(250,250,249,0.78)", maxWidth: 640 }}>
          Mercado Libre, Magalu, Falabella in LATAM. Wildberries in Russia.
          Trendyol in Turkey. Noon and Jumia across MENA. Shopee and Lazada in SEA.
          Same workflow, same failure mode: <span style={{ color: "rgba(250,250,249,0.95)" }}>most fail at logistics, not sourcing.</span>
        </div>
        <div style={{ fontSize: bodySize, lineHeight: 1.55, color: "rgba(250,250,249,0.55)", maxWidth: 640, marginTop: 18 }}>
          Sourcing is a search problem. Logistics is a trust problem.
          A trust problem where the trust signals live in non-indexed Telegram groups, forum threads, and review sites that nobody crawls.
        </div>
      </div>

      {!isMobile && <MarketGrid />}
    </div>
  );
}

function MarketGrid() {
  const markets = [
    { region: "LATAM", marketplaces: "Mercado Libre, Magalu, Falabella", compliance: "NOM (MX), INMETRO (BR)", resellers: "~24M" },
    { region: "Russia / CIS", marketplaces: "Wildberries, Ozon", compliance: "Chestny Znak", resellers: "~6M" },
    { region: "MENA", marketplaces: "Noon, Jumia, Trendyol", compliance: "SASO, GCC marks", resellers: "~9M" },
    { region: "SEA", marketplaces: "Shopee, Lazada, Tokopedia", compliance: "BPOM, SNI, FDA-PH", resellers: "~21M" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      {markets.map((m, i) => (
        <ms.div key={m.region}
          initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 + i * 0.07 }}
          style={{
            background: "rgba(250,250,249,0.03)",
            border: "1px solid rgba(250,250,249,0.08)",
            borderRadius: 12, padding: 16,
          }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#fafaf9" }}>{m.region}</div>
            <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 10, color: accent }}>{m.resellers}</div>
          </div>
          <div style={{ fontSize: 10, fontFamily: "ui-monospace, monospace", color: "rgba(250,250,249,0.4)", letterSpacing: 0.5, marginBottom: 4 }}>MARKETPLACES</div>
          <div style={{ fontSize: 11.5, color: "rgba(250,250,249,0.8)", lineHeight: 1.4, marginBottom: 10 }}>{m.marketplaces}</div>
          <div style={{ fontSize: 10, fontFamily: "ui-monospace, monospace", color: "rgba(250,250,249,0.4)", letterSpacing: 0.5, marginBottom: 4 }}>LOCAL COMPLIANCE</div>
          <div style={{ fontSize: 11.5, color: "rgba(250,250,249,0.8)", lineHeight: 1.4 }}>{m.compliance}</div>
        </ms.div>
      ))}
    </div>
  );
}

// ====== SLIDE 2: The market-research collapse ======
function Slide2({ isMobile }) {
  const headlineSize = isMobile ? 24 : 48;
  const bodySize = isMobile ? 14 : 17;

  return (
    <div style={{ width: "100%" }}>
      <div style={{ ...labelStyle, textAlign: "center" }}>The wedge</div>
      <div style={{
        fontSize: headlineSize, lineHeight: 1.08, fontWeight: 600,
        letterSpacing: -0.5, color: "#fafaf9",
        fontFamily: "'Inter', -apple-system, sans-serif",
        textAlign: "center", marginBottom: 14, textWrap: "pretty",
      }}>
        There's an <span style={{ color: accentStrong }}>entire consultancy niche</span> built<br />
        on doing this 4-month process by hand.
      </div>
      <div style={{ fontSize: bodySize, lineHeight: 1.55, margin: "0 auto 36px", textAlign: "center", color: "rgba(250,250,249,0.7)", maxWidth: 640 }}>
        Resellers in Russia and Mexico routinely pay <span style={{ color: accentStrong }}>$2K–$4K</span> —
        often half their entire starting budget — to a market-research firm to deliver this exact deliverable.
        We collapse it into one day.
      </div>

      <CollapseDiagram isMobile={isMobile} />
    </div>
  );
}

function CollapseDiagram({ isMobile }) {
  const cards = [
    {
      label: "TODAY · MARKET RESEARCH FIRM",
      price: "$2,000 – $4,000",
      items: ["3–6 weeks turnaround", "PDF + Excel deliverable", "Static · stale on delivery", "1 category, 1 corridor", "Human bandwidth bound"],
      isHighlight: false,
    },
    {
      label: "WITH SOKO",
      price: "$29 / mo",
      priceSub: "+ take-rate",
      items: ["~1 day to onboard + sourcing plan", "Live database, re-scored weekly", "Updates as the corridor moves", "Every category, every corridor", "Compounding intelligence asset"],
      isHighlight: true,
    },
  ];

  if (isMobile) {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600, margin: "0 auto" }}>
        {cards.map((card, i) => (
          <ms.div key={i}
            initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 + i * 0.15 }}
            style={{
              borderRadius: 14, padding: 20,
              background: card.isHighlight
                ? "linear-gradient(180deg, oklch(0.32 0.10 40 / 0.4), oklch(0.22 0.08 40 / 0.2))"
                : "rgba(250,250,249,0.03)",
              border: card.isHighlight
                ? "1px solid oklch(0.55 0.16 40 / 0.5)"
                : "1px solid rgba(250,250,249,0.08)",
              boxShadow: card.isHighlight ? "0 20px 60px -20px oklch(0.55 0.16 40 / 0.4)" : "none",
            }}>
            {card.isHighlight && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <window.SokoMark size={14} />
                <div style={{ fontSize: 10, fontFamily: "ui-monospace, monospace", color: accentStrong, letterSpacing: 1 }}>{card.label}</div>
              </div>
            )}
            {!card.isHighlight && (
              <div style={{ fontSize: 10, fontFamily: "ui-monospace, monospace", color: "rgba(250,250,249,0.45)", letterSpacing: 1, marginBottom: 10 }}>{card.label}</div>
            )}
            <div style={{ fontSize: 20, fontWeight: 600, color: "#fafaf9", marginBottom: 14 }}>
              {card.price}
              {card.priceSub && <span style={{ fontSize: 12, color: "rgba(250,250,249,0.5)", fontWeight: 400 }}> {card.priceSub}</span>}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              {card.items.map(t => (
                <div key={t} style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
                  {card.isHighlight ? (
                    <svg width="11" height="11" viewBox="0 0 12 12" style={{ flexShrink: 0, marginTop: 4 }}>
                      <path d="M2 6L5 9L10 3" stroke={accentStrong} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  ) : (
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: "rgba(250,250,249,0.25)", flexShrink: 0, marginTop: 6 }} />
                  )}
                  <span style={{ fontSize: 13, color: card.isHighlight ? "rgba(250,250,249,0.85)" : "rgba(250,250,249,0.7)", lineHeight: 1.5 }}>{t}</span>
                </div>
              ))}
            </div>
          </ms.div>
        ))}
      </div>
    );
  }

  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 28, alignItems: "stretch",
      maxWidth: 1000, margin: "0 auto",
    }}>
      <ms.div
        initial={{ opacity: 0, x: -12 }} animate={{ opacity: 1, x: 0 }}
        transition={{ delay: 0.1 }}
        style={{
          background: "rgba(250,250,249,0.03)",
          border: "1px solid rgba(250,250,249,0.08)",
          borderRadius: 14, padding: 22,
        }}>
        <div style={{ fontSize: 10, fontFamily: "ui-monospace, monospace", color: "rgba(250,250,249,0.45)", letterSpacing: 1, marginBottom: 10 }}>
          TODAY · MARKET RESEARCH FIRM
        </div>
        <div style={{ fontSize: 22, fontWeight: 600, color: "#fafaf9", marginBottom: 18 }}>$2,000 – $4,000</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {["3–6 weeks turnaround", "PDF + Excel deliverable", "Static · stale on delivery", "1 category, 1 corridor", "Human bandwidth bound"].map(t => (
            <div key={t} style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: "rgba(250,250,249,0.25)", flexShrink: 0, marginTop: 6 }} />
              <span style={{ fontSize: 13, color: "rgba(250,250,249,0.7)", lineHeight: 1.5 }}>{t}</span>
            </div>
          ))}
        </div>
      </ms.div>

      <ms.div
        initial={{ opacity: 0, scale: 0.7 }} animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 0.35 }}
        style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "0 8px" }}>
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <circle cx="28" cy="28" r="27" stroke={accent} strokeOpacity="0.4" strokeWidth="1" fill="rgba(250,250,249,0.02)" />
          <path d="M22 28h12M30 22l4 6-4 6" stroke={accentStrong} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </ms.div>

      <ms.div
        initial={{ opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }}
        transition={{ delay: 0.5 }}
        style={{
          background: "linear-gradient(180deg, oklch(0.32 0.10 40 / 0.4), oklch(0.22 0.08 40 / 0.2))",
          border: "1px solid oklch(0.55 0.16 40 / 0.5)",
          borderRadius: 14, padding: 22,
          boxShadow: "0 20px 60px -20px oklch(0.55 0.16 40 / 0.4)",
        }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <window.SokoMark size={14} />
          <div style={{ fontSize: 10, fontFamily: "ui-monospace, monospace", color: accentStrong, letterSpacing: 1 }}>
            WITH SOKO
          </div>
        </div>
        <div style={{ fontSize: 22, fontWeight: 600, color: "#fafaf9", marginBottom: 18 }}>
          $29 / mo <span style={{ fontSize: 13, color: "rgba(250,250,249,0.5)", fontWeight: 400 }}>+ take-rate</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {["~1 day to onboard + sourcing plan", "Live database, re-scored weekly", "Updates as the corridor moves", "Every category, every corridor", "Compounding intelligence asset"].map(t => (
            <div key={t} style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
              <svg width="11" height="11" viewBox="0 0 12 12" style={{ flexShrink: 0, marginTop: 4 }}>
                <path d="M2 6L5 9L10 3" stroke={accentStrong} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span style={{ fontSize: 13, color: "rgba(250,250,249,0.85)", lineHeight: 1.5 }}>{t}</span>
            </div>
          ))}
        </div>
      </ms.div>
    </div>
  );
}

// ====== SLIDE 3: Thesis + handoff ======
function Slide3({ onPlayDemo, isMobile }) {
  const headlineSize = isMobile ? 22 : 36;

  return (
    <div style={{ maxWidth: 980, width: "100%", textAlign: "center", margin: "0 auto" }}>
      <div style={labelStyle}>Thesis</div>
      <div style={{
        fontSize: headlineSize, lineHeight: 1.18, fontWeight: 600,
        letterSpacing: -0.5, color: "#fafaf9",
        fontFamily: "'Inter', -apple-system, sans-serif",
        marginBottom: 22, textWrap: "pretty",
      }}>
        The work is <span style={{ color: accentStrong }}>qualitative sentiment synthesis</span><br />
        across non-indexed channels.
        <span style={{ color: "rgba(250,250,249,0.55)", display: "block", marginTop: 6 }}>LLMs do that well now. No product does.</span>
      </div>

      <div style={{ fontSize: isMobile ? 13 : 15, lineHeight: 1.55, margin: "0 auto 26px", color: "rgba(250,250,249,0.7)", maxWidth: 720 }}>
        soko is the AI-native operating system for cross-border resellers — sourcing intelligence,
        vetted China logistics, destination 3PL, and a reseller P&L that doubles as a B2B intelligence product.
      </div>

      <RetentionCallout isMobile={isMobile} />

      <ms.button
        whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
        onClick={onPlayDemo}
        style={{
          padding: "14px 28px",
          background: "oklch(0.55 0.16 40)",
          color: "#fafaf9", border: "none", borderRadius: 12,
          fontSize: 14, fontWeight: 600, cursor: "pointer",
          fontFamily: "inherit", letterSpacing: 0.2,
          boxShadow: "0 12px 40px -10px oklch(0.55 0.16 40 / 0.5)",
          display: "inline-flex", alignItems: "center", gap: 10,
          marginTop: 24,
        }}>
        See Maria do it in 90 seconds
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M3 7h8M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </ms.button>
    </div>
  );
}

function RetentionCallout({ isMobile }) {
  const pillars = [
    { label: "ANALYTICS", title: "P&L + reorder intel", body: "Margin per SKU, reorder timing — numbers they can't easily reconstruct." },
    { label: "INTERFACE", title: "Bilingual MOQ-aware UI", body: "Translated catalog, multi-supplier cart, MOQ optimizer. Muscle memory wedge." },
    { label: "COMMS", title: "One thread, every party", body: "Unified ops across suppliers, forwarder, 3PL. Switching means rebuilding the graph." },
  ];
  return (
    <ms.div
      initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.2 }}
      style={{
        margin: "0 auto", maxWidth: 920,
        padding: "16px 20px",
        background: "rgba(250,250,249,0.03)",
        border: "1px solid rgba(250,250,249,0.08)",
        borderRadius: 14,
      }}>
      <div style={{
        fontSize: 14, lineHeight: 1.4, color: "#fafaf9",
        textAlign: "center", marginBottom: 14, maxWidth: 760, margin: "0 auto 14px",
      }}>
        <span style={{ color: accentStrong, fontFamily: "ui-monospace, monospace", fontSize: 10, letterSpacing: 1.2, display: "block", marginBottom: 6 }}>AND WHEN THEY'RE IN</span>
        Even if a reseller keeps their existing forwarder and 3PL,
        the <span style={{ color: accentStrong }}>analytics, UI, and comms layer</span> retain them.
      </div>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: 10 }}>
        {pillars.map((p, i) => (
          <ms.div key={p.label}
            initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 + i * 0.07 }}
            style={{
              padding: "10px 12px",
              background: "rgba(250,250,249,0.02)",
              border: "1px solid rgba(250,250,249,0.06)",
              borderRadius: 8,
              textAlign: "left",
            }}>
            <div style={{ fontSize: 9, fontFamily: "ui-monospace, monospace", color: accent, letterSpacing: 1, marginBottom: 4 }}>{p.label}</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: "#fafaf9", marginBottom: 4, lineHeight: 1.3 }}>{p.title}</div>
            <div style={{ fontSize: 11, color: "rgba(250,250,249,0.65)", lineHeight: 1.45 }}>{p.body}</div>
          </ms.div>
        ))}
      </div>
    </ms.div>
  );
}

// ====== Story scrubber / pagination ======
function StoryScrubber({ step, total, setStep, onPlayDemo, isMobile }) {
  const labels = ["Origin", "Pattern", "Wedge", "Thesis"];
  return (
    <div style={{
      padding: isMobile ? "12px 16px" : "20px 40px",
      borderTop: "1px solid rgba(250,250,249,0.06)",
      background: "rgba(0,0,0,0.4)",
      display: "flex", alignItems: "center", gap: isMobile ? 10 : 24,
    }}>
      <button onClick={() => setStep(s => Math.max(0, s - 1))}
        disabled={step === 0}
        style={navBtn(step === 0)}>← prev</button>

      <div style={{ flex: 1, display: "flex", gap: isMobile ? 4 : 8 }}>
        {labels.map((l, i) => (
          <button key={i} onClick={() => setStep(i)} style={{
            flex: 1, padding: isMobile ? "6px 4px" : "8px 12px", border: "none", cursor: "pointer",
            background: i === step ? "rgba(250,250,249,0.08)" : "transparent",
            borderRadius: 6, fontFamily: "inherit",
            display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2,
          }}>
            <span style={{
              fontSize: 9, fontFamily: "ui-monospace, monospace",
              color: i === step ? accent : "rgba(250,250,249,0.3)", letterSpacing: 0.5,
            }}>0{i + 1}</span>
            {!isMobile && (
              <span style={{
                fontSize: 12, color: i === step ? "#fafaf9" : "rgba(250,250,249,0.5)",
                fontWeight: i === step ? 600 : 400,
              }}>{l}</span>
            )}
            <span style={{
              width: "100%", height: 2, marginTop: 2,
              background: i <= step ? "oklch(0.55 0.16 40)" : "rgba(250,250,249,0.1)",
              transition: "background 0.3s",
            }} />
          </button>
        ))}
      </div>

      {step < total - 1 ? (
        <button onClick={() => setStep(s => Math.min(total - 1, s + 1))} style={navBtn(false)}>next →</button>
      ) : (
        <button onClick={onPlayDemo} style={{
          ...navBtn(false),
          background: "oklch(0.55 0.16 40)",
          color: "#fafaf9", borderColor: "oklch(0.55 0.16 40)",
          fontWeight: 600,
        }}>play demo →</button>
      )}
    </div>
  );
}

function navBtn(disabled) {
  return {
    padding: "8px 14px", border: "1px solid rgba(250,250,249,0.18)",
    background: "rgba(250,250,249,0.04)", color: "#fafaf9",
    borderRadius: 6, fontSize: 12, cursor: disabled ? "default" : "pointer",
    fontFamily: "ui-monospace, monospace", letterSpacing: 0.3,
    opacity: disabled ? 0.3 : 1, whiteSpace: "nowrap",
  };
}

window.StoryView = StoryView;