// project-story.jsx — "What's next / The story" modal.
// A full positioning page that mirrors the marketing one-pager, restyled with
// the app's own light/dark theme tokens (C.*). Loaded BEFORE showcase.jsx and
// exported to window so the showcase can mount it.

(function () {
  const { useEffect } = React;
  const X = LucideReact.X;
  const ArrowRight = LucideReact.ArrowRight || LucideReact.ChevronRight;
  const ArrowDown = LucideReact.ArrowDown || LucideReact.ChevronDown;
  const SchemaIcon = LucideReact.Workflow || LucideReact.Share2 || LucideReact.GitBranch || LucideReact.Network || null;

  function Eyebrow({ C, children }) {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 9, color: C.faint, fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 11.5, fontWeight: 500, letterSpacing: "0.15em", textTransform: "uppercase" }}>
        <span style={{ width: 18, height: 1, background: C.line, display: "inline-block" }}></span>
        {children}
      </div>
    );
  }

  function Section({ C, children, last }) {
    return <section style={{ padding: "44px 0", borderBottom: last ? "none" : `1px solid ${C.line}` }}>{children}</section>;
  }

  const { useState } = React;
  const ChevDown = LucideReact.ChevronDown || LucideReact.ChevronRight;

  // Collapsible architecture schema. `legend` = [[swatchColor, label], ...].
  function Schema({ C, theme, label, children, legend }) {
    const [open, setOpen] = useState(false);
    const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
    return (
      <div style={{ marginTop: 26, border: `1px solid ${C.line}`, borderRadius: 16, background: C.panel, overflow: "hidden" }}>
        <button onClick={() => setOpen((o) => !o)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "16px 20px", background: "transparent", cursor: "pointer", textAlign: "left" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: C.accentSoft, color: C.accentInk, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              {SchemaIcon ? <SchemaIcon size={15}></SchemaIcon> : null}
            </span>
            <span>
              <span style={{ display: "block", color: C.ink, fontWeight: 600, fontSize: 14.5 }}>{open ? "Hide" : "View"} the architecture diagram</span>
              <span style={{ ...mono, display: "block", color: C.faint, fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", marginTop: 2 }}>{label}</span>
            </span>
          </span>
          <span style={{ color: C.mute, transform: open ? "rotate(180deg)" : "none", transition: "transform .22s ease", flexShrink: 0 }}><ChevDown size={20}></ChevDown></span>
        </button>
        <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows .3s cubic-bezier(.32,.72,.33,1)" }}>
          <div style={{ overflow: "hidden" }}>
            <div style={{ borderTop: `1px solid ${C.line}`, padding: "26px 22px 18px" }}>
              {children}
              {legend && (
                <div style={{ display: "flex", flexWrap: "wrap", gap: 16, marginTop: 20, paddingTop: 16, borderTop: `1px solid ${C.line}` }}>
                  {legend.map(([sw, lbl], i) => (
                    <span key={i} style={{ ...mono, display: "flex", alignItems: "center", gap: 8, fontSize: 11.5, color: C.mute }}>
                      <span style={{ width: 13, height: 13, borderRadius: 3, background: sw.bg, border: sw.border ? `1.5px solid ${sw.border}` : "none", flexShrink: 0 }}></span>{lbl}
                    </span>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function ProjectStoryModal({ C, theme, onClose }) {
    useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      document.addEventListener("keydown", onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
    }, [onClose]);

    const card = { background: C.panel, border: `1px solid ${C.line}`, borderRadius: 14 };
    const soft = { background: C.accentSoft, border: `1px solid ${C.accentInk}33`, borderRadius: 14 };
    const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
    const h2 = { color: C.ink, fontSize: 27, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.08, marginTop: 14 };
    const lead = { color: C.mute, fontSize: 16, lineHeight: 1.55, marginTop: 14, textWrap: "pretty", maxWidth: "62ch" };

    const spectrum = [
      { t: "The big trackers", who: "Delta · CoinStats · getquin", p: "They compete on quantity. More assets, more exchanges, more feeds.", li: ["A cockpit for a trip to the shop", "You ignore most of it", "Data lives on their servers"], mid: false },
      { t: "Portfolio Tracker", who: "The everyday investor", p: "Three answers, one insight, full ownership of your data.", li: ["A few positions and a recurring plan", "Opens once a week", "Wants to understand, not administer"], mid: true },
      { t: "The privacy apps", who: "Profit · Bitfolio · Private PT", p: "Clean and on device, but mute. They show, they never explain.", li: ["You get the what, never the so what", "\"+4.2%\" tells a beginner nothing", "No interpretation layer"], mid: false },
    ];
    const q3 = [
      ["01", "How much do I have?", "Total value across every position, in your own currency, at a glance."],
      ["02", "How am I doing?", "Performance against a benchmark, not a number floating in a vacuum."],
      ["03", "What should I know today?", "One plain language insight, written for a human, not a spreadsheet."],
    ];
    const rawMetrics = [["TWR (1W)", "+1.82%"], ["Top holding wt.", "61%"], ["Contribution", "+1.71% / +0.11%"], ["Std. dev (30d)", "14.3%"], ["vs MSCI World", "−0.30%"]];
    const flow = [
      { k: "Your iPhone", s: "Holdings live in your iCloud. All profit and loss is computed locally, on device." },
      { k: "Key proxy", s: "A thin backend holds the API keys and forwards the requests. It never sees your amounts." },
      { k: "Price providers", s: "Twelve Data and EODHD quote the market. They only ever receive a ticker symbol." },
    ];
    const modes = [
      { b: "Mode A · On-device", h: "Strongest privacy", p: "Insights are generated locally with Apple's on-device models.", leaves: "nothing" },
      { b: "Mode B · Anonymized", h: "More capable", p: "Tickers and amounts are stripped first. Only abstract signals leave.", leaves: "abstract signals" },
      { b: "Mode C · Hybrid", h: "You decide", p: "Local by default. The cloud is reached only when you switch it on.", leaves: "your choice" },
    ];
    const table = {
      head: ["", "Big trackers", "Privacy apps", "Portfolio Tracker"],
      rows: [
        ["Simplicity", "Cluttered", "Clean", "Clean and focused"],
        ["Interpretation", "Buried in metrics", "Absent", "One honest insight"],
        ["AI", "Cloud bolt-on", "None", "Native, privacy-safe"],
        ["Data ownership", "Their servers", "On device", "Your iCloud"],
        ["Built for", "Power users", "Privacy purists", "The everyday investor"],
      ],
    };
    const nots = ["A trading terminal", "A buy / sell advisor", "A social feed", "An everything-tracker for 40 wallets", "Another 20-metric dashboard"];
    const roadmap = [
      ["Multi-currency products", "Buy BTC in EUR or CHF, not only USD. Set the trading currency per instrument."],
      ["UI polish", "Tighten spacing, states and edge cases across every screen."],
      ["Deeper core", "Improve the main sections and expand what each one can do."],
      ["Native iOS", "Ship a native build and go live on the App Store."],
      ["Premium tier", "Introduce advanced capabilities for power users."],
      ["Insights", "A dedicated section for trends and breakdowns."],
    ];

    const accentText = { color: C.accentInk };

    return (
      <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 120, display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "40px 20px", overflowY: "auto", animation: "storyFade .26s ease both" }}>
        <div style={{ position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none", background: theme === "dark" ? "rgba(6,8,12,0.70)" : "rgba(17,19,25,0.50)", backdropFilter: "blur(16px) saturate(120%)", WebkitBackdropFilter: "blur(16px) saturate(120%)" }}></div>
        <button onClick={onClose} aria-label="Close" style={{ position: "fixed", top: 24, right: 28, zIndex: 130, background: theme === "dark" ? "rgba(28,30,34,0.85)" : "rgba(255,255,255,0.9)", border: `1px solid ${C.line}`, color: C.ink, width: 44, height: 44, borderRadius: 22, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 6px 20px rgba(0,0,0,0.25)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" }} className="active:scale-90 transition-transform"><X size={20}></X></button>
        <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 1080, background: C.bg, border: `1px solid ${C.line}`, borderRadius: 22, boxShadow: "0 40px 90px rgba(0,0,0,0.45)", animation: "storyPop .3s cubic-bezier(.32,.72,.33,1) both", marginBottom: 40, overflow: "hidden" }}>
          <div style={{ padding: "0 36px" }}>
            {/* HERO */}
            <Section C={C}>
              <Eyebrow C={C}>Investment tracker for the rest of us</Eyebrow>
              <h1 style={{ color: C.ink, fontSize: "clamp(38px, 5vw, 56px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.0, marginTop: 18 }}>How much you have.<br></br>How you're doing.<br></br><span style={accentText}>The one thing today.</span></h1>
              <p style={{ ...lead, fontSize: 18, maxWidth: "40ch" }}>That is the whole product. Your numbers stay clear, one honest insight does the thinking, and nothing leaves your iPhone.</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 24 }}>
                {[["3 answers, not 20 metrics", false], ["Data stays in your iCloud", true], ["AI that translates, not predicts", false]].map(([t, hot]) => (
                  <span key={t} style={{ ...mono, fontSize: 12.5, padding: "7px 13px", borderRadius: 99, border: `1px solid ${hot ? C.accentInk + "55" : C.line}`, background: hot ? C.accentSoft : C.panel, color: hot ? C.accentInk : C.mute }}>{t}</span>
                ))}
              </div>
            </Section>

            {/* PROBLEM */}
            <Section C={C}>
              <Eyebrow C={C}>The problem</Eyebrow>
              <h2 style={h2}>The market splits in the wrong way.</h2>
              <p style={lead}>Trackers compete at two extremes. The largest group of everyday investors sits in the middle, and almost nobody builds for them.</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16, marginTop: 28 }}>
                {spectrum.map((c) => (
                  <div key={c.t} style={{ ...(c.mid ? soft : card), padding: 22 }}>
                    <div style={{ color: c.mid ? C.accentInk : C.ink, fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em" }}>{c.t}</div>
                    <div style={{ ...mono, fontSize: 10.5, letterSpacing: "0.06em", textTransform: "uppercase", color: c.mid ? C.accentInk : C.faint, marginTop: 6, marginBottom: 12 }}>{c.who}</div>
                    <p style={{ color: C.mute, fontSize: 14, lineHeight: 1.5 }}>{c.p}</p>
                    <ul style={{ listStyle: "none", margin: "12px 0 0", padding: 0 }}>
                      {c.li.map((l) => (
                        <li key={l} style={{ position: "relative", paddingLeft: 16, color: C.mute, fontSize: 13.5, marginBottom: 6, lineHeight: 1.4 }}>
                          <span style={{ position: "absolute", left: 0, top: 9, width: 8, height: 1, background: c.mid ? C.accentInk : C.faint }}></span>{l}
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </Section>

            {/* THREE QUESTIONS */}
            <Section C={C}>
              <Eyebrow C={C}>The solution · screen zero</Eyebrow>
              <h2 style={h2}>One screen answers three questions.</h2>
              <p style={lead}>Everything else is opt-in, one tap away. The design removes instead of piling on.</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginTop: 28 }}>
                {q3.map(([n, t, d]) => (
                  <div key={n} style={{ ...card, padding: 24 }}>
                    <div style={{ ...mono, ...accentText, fontSize: 12, letterSpacing: "0.1em" }}>{n}</div>
                    <h3 style={{ color: C.ink, fontSize: 19, fontWeight: 700, margin: "12px 0 8px", letterSpacing: "-0.01em" }}>{t}</h3>
                    <p style={{ color: C.mute, fontSize: 14, lineHeight: 1.5 }}>{d}</p>
                  </div>
                ))}
              </div>
            </Section>

            {/* TRANSLATOR */}
            <Section C={C}>
              <Eyebrow C={C}>AI as translator</Eyebrow>
              <h2 style={h2}>From cold numbers to one warm sentence.</h2>
              <p style={lead}>Never "buy" or "sell". That is regulated territory and it erodes trust. The AI's only job is to make the dashboard speak.</p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16, marginTop: 28 }}>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16, alignItems: "stretch" }}>
                  <div style={{ ...card, padding: 22 }}>
                    <div style={{ ...mono, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: C.faint, marginBottom: 14 }}>What every tracker shows</div>
                    {rawMetrics.map(([k, v], i) => (
                      <div key={k} style={{ ...mono, display: "flex", justifyContent: "space-between", fontSize: 13.5, padding: "8px 0", borderBottom: i === rawMetrics.length - 1 ? "none" : `1px dashed ${C.line}`, color: C.mute }}>
                        <span>{k}</span><span style={{ color: C.ink }}>{v}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{ ...soft, padding: 22, display: "flex", flexDirection: "column" }}>
                    <div style={{ ...mono, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: C.accentInk, marginBottom: 14, display: "flex", alignItems: "center", gap: 8 }}><ArrowRight size={14}></ArrowRight>What Portfolio Tracker says</div>
                    <div style={{ color: C.ink, fontWeight: 600, fontSize: 20, lineHeight: 1.32, letterSpacing: "-0.01em", textWrap: "pretty" }}>"You're up this week, but almost all of it came from one position. Your portfolio is concentrated."</div>
                  </div>
                </div>
              </div>
            </Section>

            {/* DATA FLOW */}
            <Section C={C}>
              <Eyebrow C={C}>How it works · data flow</Eyebrow>
              <h2 style={h2}>Where the prices come from, and what never leaves.</h2>
              <p style={lead}>Your holdings live in your own iCloud. To value them, the app fetches prices through a thin proxy. Your amounts stay home. Only ticker symbols travel.</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(210px, 1fr))", gap: 14, marginTop: 28, alignItems: "stretch" }}>
                {flow.map((n, i) => (
                  <div key={n.k} style={{ ...(i === 0 ? soft : card), padding: 20, position: "relative" }}>
                    <div style={{ ...mono, fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: i === 0 ? C.accentInk : C.faint, marginBottom: 8 }}>{`Step ${i + 1}`}</div>
                    <div style={{ color: C.ink, fontWeight: 700, fontSize: 16, marginBottom: 8 }}>{n.k}</div>
                    <p style={{ color: C.mute, fontSize: 13.5, lineHeight: 1.5 }}>{n.s}</p>
                  </div>
                ))}
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 18, marginTop: 18 }}>
                {[["tickers only travel out", C.ink], ["market prices come back", C.accent]].map(([t, sw]) => (
                  <span key={t} style={{ ...mono, fontSize: 12, color: C.mute, display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 12, height: 12, borderRadius: 3, background: sw }}></span>{t}</span>
                ))}
              </div>
              <Schema C={C} theme={theme} label="Data flow · prices in, nothing out"
                legend={[[{ bg: C.accentSoft, border: C.accentInk }, "your private space"], [{ bg: C.ink }, "request · symbols only"], [{ bg: C.accent }, "response · market prices"]]}>
                <svg viewBox="0 0 920 300" role="img" aria-label="Data flow architecture diagram" style={{ width: "100%", height: "auto", display: "block" }}>
                  <defs>
                    <marker id="ps-ah" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto"><path d="M0 0L9 4.5L0 9z" fill={C.ink}></path></marker>
                    <marker id="ps-ahg" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto"><path d="M0 0L9 4.5L0 9z" fill={C.accent}></path></marker>
                  </defs>
                  <rect x="20" y="70" width="190" height="160" rx="16" fill={C.accentSoft} stroke={C.accentInk} strokeWidth="1.5"></rect>
                  <text x="115" y="98" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="11" letterSpacing="1.5" fill={C.accentInk}>YOUR iPHONE</text>
                  <text x="115" y="130" textAnchor="middle" fontWeight="700" fontSize="17" fill={C.ink}>Holdings</text>
                  <text x="115" y="152" textAnchor="middle" fontSize="12.5" fill={C.mute}>stored in your iCloud</text>
                  <text x="115" y="170" textAnchor="middle" fontSize="12.5" fill={C.mute}>(CloudKit private DB)</text>
                  <text x="115" y="200" textAnchor="middle" fontSize="12" fill={C.mute}>All P&amp;L computed</text>
                  <text x="115" y="216" textAnchor="middle" fontSize="12" fill={C.mute}>locally, on device</text>

                  <rect x="365" y="90" width="180" height="120" rx="14" fill={C.panel2} stroke={C.line} strokeWidth="1.5"></rect>
                  <text x="455" y="118" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="11" letterSpacing="1.2" fill={C.faint}>KEY PROXY</text>
                  <text x="455" y="146" textAnchor="middle" fontWeight="700" fontSize="16" fill={C.ink}>Backend</text>
                  <text x="455" y="168" textAnchor="middle" fontSize="12.5" fill={C.mute}>holds API keys,</text>
                  <text x="455" y="184" textAnchor="middle" fontSize="12.5" fill={C.mute}>forwards requests</text>

                  <rect x="700" y="58" width="200" height="80" rx="12" fill={C.panel2} stroke={C.line} strokeWidth="1.5"></rect>
                  <text x="800" y="92" textAnchor="middle" fontWeight="700" fontSize="15" fill={C.ink}>Twelve Data</text>
                  <text x="800" y="113" textAnchor="middle" fontSize="12" fill={C.mute}>global stocks · FX · crypto</text>
                  <rect x="700" y="162" width="200" height="80" rx="12" fill={C.panel2} stroke={C.line} strokeWidth="1.5"></rect>
                  <text x="800" y="196" textAnchor="middle" fontWeight="700" fontSize="15" fill={C.ink}>EODHD</text>
                  <text x="800" y="217" textAnchor="middle" fontSize="12" fill={C.mute}>European ETFs</text>

                  <line x1="212" y1="135" x2="361" y2="135" stroke={C.ink} strokeWidth="1.6" markerEnd="url(#ps-ah)"></line>
                  <text x="286" y="126" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10.5" fill={C.faint}>tickers only →</text>
                  <line x1="547" y1="120" x2="696" y2="98" stroke={C.ink} strokeWidth="1.6" markerEnd="url(#ps-ah)"></line>
                  <line x1="547" y1="170" x2="696" y2="195" stroke={C.ink} strokeWidth="1.6" markerEnd="url(#ps-ah)"></line>
                  <path d="M696 118 C600 150 560 160 549 178" stroke={C.accent} strokeWidth="1.6" fill="none" strokeDasharray="5 4" markerEnd="url(#ps-ahg)"></path>
                  <path d="M363 165 C300 185 260 175 214 158" stroke={C.accent} strokeWidth="1.6" fill="none" strokeDasharray="5 4" markerEnd="url(#ps-ahg)"></path>
                  <text x="286" y="184" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10.5" fill={C.accent}>← prices back</text>
                </svg>
              </Schema>
              <p style={{ ...lead, fontSize: 14.5, marginTop: 18 }}><b style={{ color: C.ink }}>The key move:</b> the price providers never receive how much you hold, what you paid, or your identity. The numbers that matter are computed on your phone.</p>
            </Section>

            {/* AI + PRIVACY */}
            <Section C={C}>
              <Eyebrow C={C}>How it works · AI with privacy</Eyebrow>
              <h2 style={h2}>"Private + AI" is a tension. We resolve it on purpose.</h2>
              <p style={lead}>If your data stays in iCloud but you ship it to a cloud model, the promise weakens. So insight generation has three modes, and you choose, with full transparency.</p>
              <Schema C={C} theme={theme} label="AI privacy modes · you choose what leaves"
                legend={[[{ bg: C.accentSoft, border: C.accentInk }, "0 bytes leave the device"], [{ bg: C.accent }, "only derived signals leave"], [{ bg: C.ink }, "cloud reasoning (opt-in)"]]}>
                <svg viewBox="0 0 920 230" role="img" aria-label="AI privacy modes diagram" style={{ width: "100%", height: "auto", display: "block" }}>
                  <defs>
                    <marker id="ps-ah2" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto"><path d="M0 0L9 4.5L0 9z" fill={C.mute}></path></marker>
                    <marker id="ps-ah2a" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto"><path d="M0 0L9 4.5L0 9z" fill={C.accentInk}></path></marker>
                    <marker id="ps-ah2c" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto"><path d="M0 0L9 4.5L0 9z" fill={C.accent}></path></marker>
                  </defs>
                  <rect x="20" y="80" width="150" height="70" rx="12" fill={C.accentSoft} stroke={C.accentInk} strokeWidth="1.5"></rect>
                  <text x="95" y="112" textAnchor="middle" fontWeight="700" fontSize="14" fill={C.ink}>Your data</text>
                  <text x="95" y="132" textAnchor="middle" fontSize="11.5" fill={C.mute}>on device</text>

                  <rect x="300" y="20" width="280" height="58" rx="12" fill={C.panel2} stroke={C.accentInk} strokeWidth="1.5"></rect>
                  <text x="318" y="44" fontFamily="'JetBrains Mono', monospace" fontSize="10" letterSpacing="1" fill={C.accentInk}>MODE A · ON-DEVICE</text>
                  <text x="318" y="64" fontSize="12.5" fill={C.ink}>Apple on-device models — nothing leaves</text>

                  <rect x="300" y="92" width="280" height="58" rx="12" fill={C.accentSoft} stroke={C.accent} strokeWidth="1.5"></rect>
                  <text x="318" y="116" fontFamily="'JetBrains Mono', monospace" fontSize="10" letterSpacing="1" fill={C.accent}>MODE B · ANONYMIZED CLOUD</text>
                  <text x="318" y="136" fontSize="12.5" fill={C.ink}>Only abstract signals are sent out</text>

                  <rect x="300" y="164" width="280" height="50" rx="12" fill={C.panel2} stroke={C.line} strokeWidth="1.5"></rect>
                  <text x="318" y="186" fontFamily="'JetBrains Mono', monospace" fontSize="10" letterSpacing="1" fill={C.faint}>MODE C · HYBRID</text>
                  <text x="318" y="204" fontSize="12.5" fill={C.ink}>Local by default, cloud on opt-in</text>

                  <rect x="700" y="92" width="200" height="58" rx="12" fill={C.ink}></rect>
                  <text x="800" y="118" textAnchor="middle" fontWeight="700" fontSize="14" fill={C.bg}>Cloud LLM</text>
                  <text x="800" y="137" textAnchor="middle" fontSize="11.5" fill={C.faint}>more capable reasoning</text>

                  <line x1="170" y1="100" x2="296" y2="55" stroke={C.accentInk} strokeWidth="1.5" markerEnd="url(#ps-ah2a)"></line>
                  <line x1="170" y1="115" x2="296" y2="120" stroke={C.accent} strokeWidth="1.5" markerEnd="url(#ps-ah2c)"></line>
                  <line x1="170" y1="130" x2="296" y2="186" stroke={C.mute} strokeWidth="1.5" markerEnd="url(#ps-ah2)"></line>
                  <line x1="582" y1="120" x2="696" y2="120" stroke={C.accent} strokeWidth="1.5" strokeDasharray="5 4" markerEnd="url(#ps-ah2c)"></line>
                  <text x="639" y="111" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="9.5" fill={C.accent}>signals only</text>
                </svg>
              </Schema>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16, marginTop: 28 }}>
                {modes.map((m) => (
                  <div key={m.b} style={{ ...card, padding: 22 }}>
                    <span style={{ ...mono, fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", padding: "5px 9px", borderRadius: 99, background: C.accentSoft, color: C.accentInk, display: "inline-block", marginBottom: 14 }}>{m.b}</span>
                    <h3 style={{ color: C.ink, fontSize: 17, fontWeight: 700, marginBottom: 8 }}>{m.h}</h3>
                    <p style={{ color: C.mute, fontSize: 14, lineHeight: 1.5 }}>{m.p}</p>
                    <div style={{ ...mono, fontSize: 12, color: C.mute, borderTop: `1px dashed ${C.line}`, paddingTop: 12, marginTop: 14 }}>Leaves device: <b style={{ color: C.ink }}>{m.leaves}</b></div>
                  </div>
                ))}
              </div>
            </Section>

            {/* DIFFERENTIATORS TABLE */}
            <Section C={C}>
              <Eyebrow C={C}>Where it sits</Eyebrow>
              <h2 style={h2}>Quiet where others are loud. Clear where others are mute.</h2>
              <div style={{ marginTop: 26, overflowX: "auto", border: `1px solid ${C.line}`, borderRadius: 14 }}>
                <table style={{ borderCollapse: "collapse", width: "100%", minWidth: 560, background: C.panel }}>
                  <thead>
                    <tr>{table.head.map((h, i) => (
                      <th key={i} style={{ ...mono, textAlign: "left", padding: "14px 16px", fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 500, color: i === 3 ? C.accentInk : C.faint, borderBottom: `1px solid ${C.line}` }}>{h}</th>
                    ))}</tr>
                  </thead>
                  <tbody>
                    {table.rows.map((r, ri) => (
                      <tr key={ri}>{r.map((cell, ci) => (
                        <td key={ci} style={{ padding: "13px 16px", fontSize: 14, borderBottom: ri === table.rows.length - 1 ? "none" : `1px solid ${C.line}`, color: ci === 0 ? C.faint : ci === 3 ? C.ink : C.mute, fontWeight: ci === 3 ? 600 : 400, background: ci === 3 ? C.accentSoft : "transparent", fontFamily: ci === 0 ? "'JetBrains Mono', monospace" : "inherit", fontSize: ci === 0 ? 12 : 14, letterSpacing: ci === 0 ? "0.03em" : "0", textTransform: ci === 0 ? "uppercase" : "none" }}>{cell}</td>
                      ))}</tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Section>

            {/* WHAT IT IS NOT */}
            <Section C={C}>
              <Eyebrow C={C}>Focus by subtraction</Eyebrow>
              <h2 style={h2}>What it is not.</h2>
              <p style={lead}>The line that keeps the product honest. Every feature request is measured against this list.</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 24 }}>
                {nots.map((n) => (
                  <span key={n} style={{ ...mono, fontSize: 13.5, color: C.faint, border: `1px dashed ${C.line}`, borderRadius: 99, padding: "9px 16px" }}><s style={{ textDecorationColor: C.down, textDecorationThickness: 1.5 }}>{n}</s></span>
                ))}
              </div>
            </Section>

            {/* ROADMAP / WHAT'S NEXT */}
            <Section C={C}>
              <Eyebrow C={C}>What's next · the roadmap</Eyebrow>
              <h2 style={h2}>Where it goes from here.</h2>
              <p style={lead}>Shipped in order. Each step is designed first, then built with Claude, then pushed live.</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 16, marginTop: 26 }}>
                {roadmap.map(([t, d], i) => (
                  <div key={t} style={{ display: "flex", gap: 14 }}>
                    <span style={{ ...mono, flexShrink: 0, width: 30, height: 30, borderRadius: 9, background: C.panel2, border: `1px solid ${C.line}`, color: C.accentInk, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 600 }}>{i + 1}</span>
                    <div>
                      <div style={{ color: C.ink, fontSize: 15, fontWeight: 600 }}>{t}</div>
                      <div style={{ color: C.mute, fontSize: 13.5, lineHeight: 1.45, marginTop: 2, textWrap: "pretty" }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Section>

            {/* PITCH */}
            <Section C={C} last={true}>
              <div style={{ background: C.ink, borderRadius: 20, padding: "44px 38px", position: "relative", overflow: "hidden" }}>
                <div style={{ ...mono, fontSize: 11.5, letterSpacing: "0.15em", textTransform: "uppercase", color: C.bg, opacity: 0.55 }}>In one line</div>
                <blockquote style={{ color: C.bg, fontWeight: 600, fontSize: 26, lineHeight: 1.25, letterSpacing: "-0.02em", marginTop: 18, maxWidth: "26ch", textWrap: "pretty" }}>The portfolio tracker for people who don't want a Bloomberg terminal. It tells you how much you have, how you're doing, and the <span style={accentText}>one thing</span> that matters today, without sending your data to anyone.</blockquote>
                <div style={{ position: "absolute", right: -80, bottom: -120, width: 320, height: 320, borderRadius: "50%", background: `radial-gradient(circle, ${C.accent}33, transparent 65%)` }}></div>
              </div>
            </Section>
          </div>
        </div>
      </div>
    );
  }

  window.ProjectStoryModal = ProjectStoryModal;
})();