/* global React, IOSDevice */
// =============================================================
// Offerroom mobile — companion screens for the new feature map.
// The phone is for approving, nudging, and tracking on the go;
// the heavy agent work happens in the cloud.
// Screens: Intake · Approve tailoring · Tracker · Prep · Board
// =============================================================
const { useState: useMP } = React;

const CARDINAL = "#8C1515";
const CARDINAL_50 = "#F9E9EA";
const PAPER = "#F6F4EF";
const SUNKEN = "#EFEBE2";
const INK = "#1F1B16";
const INK_700 = "#3A332A";
const INK_500 = "#5C544A";
const INK_300 = "#9A9182";
const INK_100 = "#E8E2D5";
const SAGE = "#5A7150", SAGE_T = "#E4EAE0", SAGE_TX = "#2F4528";
const SLATE = "#4A5868", SLATE_T = "#E1E5E9", SLATE_TX = "#2A3744";
const OCHRE = "#B08A3E", OCHRE_T = "#F2E9D2", OCHRE_TX = "#6E5418";

const PROV = {
  Vault: { c: SLATE, t: SLATE_T, x: SLATE_TX },
  Graph: { c: OCHRE, t: OCHRE_T, x: OCHRE_TX },
  Draft: { c: CARDINAL, t: CARDINAL_50, x: "#5E0E0E" },
  Web:   { c: SAGE, t: SAGE_T, x: SAGE_TX },
};

// ---------- shared primitives ----------
const I = ({ d, size = 22, c = "currentColor", w = 1.6, fill = "none" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const ICN = {
  mic: <><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></>,
  upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>,
  text: <><path d="M4 7V5h16v2M9 19h6M12 5v14"/></>,
  check: <polyline points="20 6 9 17 4 12"/>,
  zap: <polygon points="13 2 4 14 11 14 10 22 20 9 13 9 13 2" fill="currentColor"/>,
  bolt: <polygon points="13 2 4 14 11 14 10 22 20 9 13 9 13 2"/>,
  grad: <><path d="M22 9 12 5 2 9l10 4 10-4z"/><path d="M6 11v4c0 1.5 2.7 3 6 3s6-1.5 6-3v-4"/></>,
  spark: <><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z"/></>,
  star: <polygon points="12 2 15 9 22 9.3 16.5 13.8 18.5 21 12 16.8 5.5 21 7.5 13.8 2 9.3 9 9 12 2"/>,
  clock: <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></>,
  pin: <><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
  play: <polygon points="6 4 20 12 6 20 6 4" fill="currentColor"/>,
  globe: <><circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></>,
  arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
};

const Status = () => null;

const AgentMark = ({ size = 26, working }) => {
  const cx = size / 2, cy = size / 2;
  return (
    <span style={{ width: size, height: size, borderRadius: 999, background: CARDINAL, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, animation: working ? "cad-pulse-ring 1.6s ease-out infinite" : "none" }}>
      <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
        <line x1={cx - size*0.18} y1={cy - size*0.08} x2={cx + size*0.18} y2={cy - size*0.08} stroke={PAPER} strokeWidth={2} strokeLinecap="round"/>
        <line x1={cx - size*0.18} y1={cy + size*0.10} x2={cx + size*0.06} y2={cy + size*0.10} stroke={PAPER} strokeWidth={2} strokeLinecap="round"/>
      </svg>
    </span>
  );
};

const Header = ({ eyebrow, title, back }) => (
  <header style={{ padding: "8px 18px 14px", borderBottom: `1px solid ${INK_100}`, display: "flex", alignItems: "center", gap: 10 }}>
    {back && <span style={{ fontSize: 24, color: CARDINAL, marginTop: -3, marginLeft: -4 }}>‹</span>}
    <div style={{ flex: 1, minWidth: 0 }}>
      {eyebrow && <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: CARDINAL, marginBottom: 3 }}>{eyebrow}</div>}
      <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 23, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.05 }}>{title}</h1>
    </div>
    <span style={{ width: 30, height: 30, borderRadius: 999, background: INK, color: PAPER, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, flexShrink: 0 }}>MO</span>
  </header>
);

const Chip = ({ tone = "neutral", small, children, style = {} }) => {
  const T = { neutral: ["rgba(31,27,22,0.05)", INK], applied: [CARDINAL_50, "#5E0E0E"], interview: [SLATE_T, SLATE_TX], offer: [SAGE_T, SAGE_TX], draft: [OCHRE_T, OCHRE_TX], sage: [SAGE_T, SAGE_TX] }[tone] || ["rgba(31,27,22,0.05)", INK];
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 4, background: T[0], color: T[1], padding: small ? "2px 8px" : "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 600, ...style }}>{children}</span>;
};

const Card = ({ children, style = {}, onClick }) => (
  <div onClick={onClick} style={{ background: "#fff", border: "1px solid rgba(31,27,22,0.08)", borderRadius: 13, padding: 14, boxShadow: "0 1px 2px rgba(31,27,22,0.04)", ...style }}>{children}</div>
);

const SectionLabel = ({ children, style = {} }) => (
  <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: INK_500, margin: "18px 0 10px", ...style }}>{children}</div>
);

const Prim = ({ children, icon, onClick, style = {} }) => (
  <button onClick={onClick} style={{ background: CARDINAL, color: "#fff", border: "none", padding: "13px 16px", borderRadius: 11, fontSize: 14.5, fontWeight: 600, fontFamily: "var(--font-sans)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7, ...style }}>
    {icon && <I d={ICN[icon]} size={16} w={2.2}/>}{children}
  </button>
);
const Sec = ({ children, icon, onClick, style = {} }) => (
  <button onClick={onClick} style={{ background: "#fff", color: INK, border: "1px solid rgba(31,27,22,0.14)", padding: "13px 16px", borderRadius: 11, fontSize: 14.5, fontWeight: 600, fontFamily: "var(--font-sans)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7, ...style }}>
    {icon && <I d={ICN[icon]} size={16} w={2}/>}{children}
  </button>
);

const Tabs = ({ active }) => {
  const items = [
    ["memory", "Memory", <><path d="M12 2a4 4 0 0 0-4 4 4 4 0 0 0-1 7.9V18a3 3 0 0 0 6 0M12 2a4 4 0 0 1 4 4 4 4 0 0 1 1 7.9V18a3 3 0 0 1-6 0" stroke="currentColor"/></>],
    ["tailor", "Apply", ICN.spark],
    ["tracker", "Tracker", <><path d="M8 6h13M8 12h13M8 18h13M4 6h.01M4 12h.01M4 18h.01"/></>],
    ["board", "Board", <><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></>],
    ["prep", "Prep", ICN.grad],
  ];
  return (
    <nav style={{ borderTop: `1px solid ${INK_100}`, padding: "9px 6px 20px", display: "flex", justifyContent: "space-around", background: PAPER }}>
      {items.map(([k, label, d]) => (
        <button key={k} style={{ background: "transparent", border: "none", display: "flex", flexDirection: "column", alignItems: "center", gap: 3, color: k === active ? CARDINAL : INK_500, cursor: "pointer", fontSize: 10, fontWeight: k === active ? 600 : 500 }}>
          <I d={d} size={21} w={1.7}/><span>{label}</span>
        </button>
      ))}
    </nav>
  );
};

const Shell = ({ children, tab }) => (
  <div style={{ background: PAPER, height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", paddingTop: 54, position: "relative" }}>
    {children}
    <Tabs active={tab}/>
  </div>
);
const Scroll = ({ children, style = {} }) => (
  <div style={{ overflow: "auto", flex: 1, padding: "0 18px 22px", ...style }}>{children}</div>
);

// =============================================================
// 1 · INTAKE — work-history dump on the go
// =============================================================
function MIntake() {
  const [rec, setRec] = useMP(false);
  return (
    <Shell tab="memory">
      <Header eyebrow="Memory" title="Feed your memory"/>
      <Scroll>
        <div style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "14px 0", borderBottom: `1px solid ${INK_100}` }}>
          <AgentMark size={26}/>
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: INK_700 }}>
            Dump everything here, résumés, decks, voice notes, stories. The more it has, the better the tailoring. Nothing's shared without you.
          </div>
        </div>

        <SectionLabel>Add right now</SectionLabel>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <Card style={{ display: "flex", flexDirection: "column", gap: 8, padding: 16 }}>
            <span style={{ width: 36, height: 36, borderRadius: 9, background: CARDINAL_50, color: CARDINAL, display: "grid", placeItems: "center" }}><I d={ICN.mic} size={18}/></span>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Voice note</div>
            <div style={{ fontSize: 11.5, color: INK_500, lineHeight: 1.4 }}>Talk it out, auto-transcribed</div>
          </Card>
          <Card style={{ display: "flex", flexDirection: "column", gap: 8, padding: 16 }}>
            <span style={{ width: 36, height: 36, borderRadius: 9, background: SLATE_T, color: SLATE_TX, display: "grid", placeItems: "center" }}><I d={ICN.upload} size={18}/></span>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Upload files</div>
            <div style={{ fontSize: 11.5, color: INK_500, lineHeight: 1.4 }}>Decks, docs, PDFs</div>
          </Card>
        </div>

        <Card style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 12, background: rec ? CARDINAL_50 : "#fff", borderColor: rec ? "rgba(140,21,21,0.3)" : "rgba(31,27,22,0.08)" }} onClick={() => setRec(r => !r)}>
          <span style={{ width: 44, height: 44, borderRadius: 999, background: CARDINAL, color: "#fff", display: "grid", placeItems: "center", flexShrink: 0, animation: rec ? "cad-pulse-ring 1.4s ease-out infinite" : "none" }}><I d={ICN.mic} size={20} w={2}/></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>{rec ? "Listening… 0:12" : "Hold to tell a story"}</div>
            <div style={{ fontSize: 12, color: INK_500, marginTop: 1 }}>{rec ? "“At Plaid I owned checkout…”" : "Goes straight into your memory"}</div>
          </div>
          {rec && <div style={{ display: "flex", gap: 2, alignItems: "center" }}>{[8,14,6,16,10].map((h,i) => <span key={i} style={{ width: 3, height: h, borderRadius: 2, background: CARDINAL, animation: "cad-pulse 1s ease-in-out infinite", animationDelay: `${i*0.1}s` }}/>)}</div>}
        </Card>

        <SectionLabel>Worth adding</SectionLabel>
        <Card style={{ padding: 0 }}>
          {[
            { q: "A project you're proud of that isn't on your résumé", done: false },
            { q: "Sports, hobbies, or volunteering?", sub: "Helps connect in outreach", done: true },
            { q: "A time you changed someone's mind at work", done: false },
          ].map((n, i, a) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 14px", borderBottom: i < a.length - 1 ? `1px solid ${INK_100}` : "none" }}>
              <span style={{ width: 20, height: 20, borderRadius: 999, flexShrink: 0, display: "grid", placeItems: "center", background: n.done ? SAGE : "transparent", border: n.done ? "none" : `1.5px solid ${INK_100}`, color: "#fff" }}>{n.done && <I d={ICN.check} size={12} w={3}/>}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: n.done ? INK_300 : INK, textDecoration: n.done ? "line-through" : "none" }}>{n.q}</div>
                {n.sub && !n.done && <div style={{ fontSize: 11, color: INK_500, marginTop: 1 }}>{n.sub}</div>}
              </div>
              {!n.done && <I d={ICN.arrow} size={15} c={INK_300}/>}
            </div>
          ))}
        </Card>
        <div style={{ fontSize: 11.5, color: INK_500, textAlign: "center", marginTop: 14, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <I d={ICN.check} size={13} c={SAGE} w={2.4}/> 6 sources indexed · 251 chunks in memory
        </div>
      </Scroll>
    </Shell>
  );
}

// =============================================================
// 2 · APPROVE TAILORING — the core on-the-go moment
// =============================================================
function MApprove() {
  const [filling, setFilling] = useMP(false);
  return (
    <Shell tab="tailor">
      <Header eyebrow="Tailor & apply" title="Ready for Stripe" back/>
      <Scroll>
        <Card style={{ display: "flex", alignItems: "center", gap: 11, marginTop: 4 }}>
          <span style={{ width: 3, alignSelf: "stretch", background: SLATE, borderRadius: 2 }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500 }}>Senior PM, Payments</div>
            <div style={{ fontSize: 12, color: INK_500, marginTop: 1 }}>Stripe · SF · Hybrid · $240–290k</div>
          </div>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: CARDINAL, fontWeight: 600 }}>0.89</span>
        </Card>

        <div style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "14px 2px", marginTop: 4 }}>
          <AgentMark size={26}/>
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: INK_700 }}>Everything's tailored. Skim the changes and approve, or open any piece to edit.</div>
        </div>

        <SectionLabel style={{ marginTop: 4 }}>What changed</SectionLabel>
        {[
          { k: "Résumé", sub: "3 lines rewritten, 2 kept", tone: "Draft", icon: "text", chip: "3 edits" },
          { k: "Cover letter", sub: "Researched, nothing repeats résumé", tone: "Web", icon: "globe", chip: "New" },
          { k: "2 custom answers", sub: "1 flagged for your voice", tone: "Graph", icon: "text", chip: "Review" },
        ].map((r, i) => {
          const p = PROV[r.tone];
          return (
            <Card key={i} style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 9 }}>
              <span style={{ width: 36, height: 36, borderRadius: 9, background: p.t, color: p.x, display: "grid", placeItems: "center", flexShrink: 0 }}><I d={ICN[r.icon]} size={17}/></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.k}</div>
                <div style={{ fontSize: 11.5, color: INK_500, marginTop: 1 }}>{r.sub}</div>
              </div>
              <Chip tone={r.tone === "Graph" ? "draft" : "sage"} small>{r.chip}</Chip>
            </Card>
          );
        })}

        {/* a concrete diff peek */}
        <Card style={{ background: SUNKEN, padding: 13 }}>
          <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: INK_500, marginBottom: 8 }}>Example rewrite</div>
          <div style={{ fontSize: 12, color: INK_300, textDecoration: "line-through", lineHeight: 1.45, marginBottom: 5 }}>Led growth initiatives across the funnel.</div>
          <div style={{ fontSize: 12.5, color: INK_700, lineHeight: 1.5, background: "rgba(74,88,104,0.10)", borderRadius: 4, padding: "5px 7px" }}>Owned checkout experimentation, 40+ A/B tests that lifted conversion 18% across 2M sessions.</div>
          <div style={{ fontSize: 11, color: INK_500, marginTop: 7, display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: SLATE }}/> from Plaid QBR · slide 12
          </div>
        </Card>

        <div style={{ position: "sticky", bottom: 0, background: `linear-gradient(transparent, ${PAPER} 28%)`, paddingTop: 16, marginTop: 14, display: "flex", flexDirection: "column", gap: 9 }}>
          <Prim icon="zap" onClick={() => setFilling(true)}>Let Offerroom fill &amp; apply</Prim>
          <Sec>Approve &amp; I'll apply myself</Sec>
        </div>
      </Scroll>
      {filling && <FillSheet onClose={() => setFilling(false)}/>}
    </Shell>
  );
}

function FillSheet({ onClose }) {
  const [i, setI] = useMP(0);
  const [done, setDone] = useMP(false);
  const fields = [
    ["Work authorization", "International · work-authorized", "Vault"],
    ["Years in payments", "6", "Graph"],
    ["Why this role?", "Your tailored answer", "Draft"],
    ["Résumé + cover letter", "Uploaded", "Vault"],
  ];
  React.useEffect(() => {
    if (i >= fields.length) { const t = setTimeout(() => setDone(true), 400); return () => clearTimeout(t); }
    const t = setTimeout(() => setI(i + 1), 640); return () => clearTimeout(t);
  }, [i]);
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 30, background: "rgba(31,27,22,0.35)", display: "flex", alignItems: "flex-end" }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ width: "100%", background: PAPER, borderRadius: "20px 20px 0 0", padding: "8px 18px 30px", animation: "cad-rise 0.3s cubic-bezier(0.2,0.7,0.1,1) both" }}>
        <div style={{ width: 36, height: 4, borderRadius: 999, background: INK_100, margin: "0 auto 14px" }}/>
        <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 14 }}>
          <span style={{ width: 36, height: 36, borderRadius: 999, background: CARDINAL, color: "#fff", display: "grid", placeItems: "center", animation: done ? "none" : "cad-pulse-ring 1.5s ease-out infinite" }}><I d={ICN.zap} size={17}/></span>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 500 }}>{done ? "Filled. Nothing sent yet." : "Filling Stripe's form…"}</div>
            <div style={{ fontSize: 11.5, color: INK_500 }}>{done ? "Review on the site, then submit" : "Pulling from your memory"}</div>
          </div>
        </div>
        {fields.map(([label, val, db], idx) => {
          const f = idx < i, p = PROV[db];
          return (
            <div key={idx} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 0", borderBottom: idx < fields.length - 1 ? `1px solid ${INK_100}` : "none", opacity: f ? 1 : 0.4, transition: "opacity 200ms" }}>
              <span style={{ width: 18, height: 18, borderRadius: 999, flexShrink: 0, display: "grid", placeItems: "center", background: f ? SAGE : "transparent", border: f ? "none" : `1.5px solid ${INK_100}`, color: "#fff" }}>{f && <I d={ICN.check} size={11} w={3}/>}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11.5, color: INK_500 }}>{label}</div>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{val}</div>
              </div>
              {f && <span style={{ fontSize: 10, fontWeight: 600, color: p.x, background: p.t, padding: "2px 7px", borderRadius: 999 }}>{db}</span>}
            </div>
          );
        })}
        {done && <div style={{ display: "flex", gap: 9, marginTop: 16, animation: "cad-fade 0.3s both" }}>
          <Sec style={{ flex: 1 }} onClick={onClose}>Review on site</Sec>
          <Prim icon="check" style={{ flex: 1 }} onClick={onClose}>Submit</Prim>
        </div>}
      </div>
    </div>
  );
}

// =============================================================
// 3 · TRACKER — stages + verify-submitted + weekly insight
// =============================================================
function MTracker() {
  const jobs = [
    { t: "Senior PM, Payments", co: "Stripe", stage: "Interview", tone: "interview", fit: "0.89", next: "Onsite · Thu 2:00", prep: true },
    { t: "Senior PM", co: "Linear", stage: "Screen", tone: "interview", fit: "0.91", next: "Recruiter screen · Tue", prep: true },
    { t: "Group PM, Payments", co: "Ramp", stage: "Applied", tone: "applied", fit: "0.79", next: "Following up Thu" },
    { t: "PM, Editor", co: "Figma", stage: "To apply", tone: "draft", fit: "0.86", next: "Form-fill queued · 2m" },
    { t: "Director, Product", co: "Vercel", stage: "Offer", tone: "offer", fit: "0.88", next: "Negotiation open" },
  ];
  return (
    <Shell tab="tracker">
      <Header eyebrow="Track" title="Job tracker"/>
      <Scroll>
        {/* verify prompt */}
        <Card style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 4, borderColor: "rgba(176,138,62,0.4)", background: OCHRE_T }}>
          <span style={{ width: 34, height: 34, borderRadius: 9, background: "#fff", color: OCHRE_TX, display: "grid", placeItems: "center", flexShrink: 0 }}><I d={ICN.check} size={18} w={2.2}/></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: OCHRE_TX }}>Did the Notion application go through?</div>
            <div style={{ fontSize: 11.5, color: INK_500, marginTop: 1 }}>Added only once you confirm</div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: SAGE_TX, background: "#fff", borderRadius: 8, padding: "5px 10px" }}>Yes</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: INK_500, background: "#fff", borderRadius: 8, padding: "5px 9px" }}>No</span>
          </div>
        </Card>

        {/* weekly insight */}
        <Card style={{ marginTop: 10, padding: 0 }}>
          <div style={{ display: "flex" }}>
            {[["23", "applied", INK], ["34%", "reply rate", SAGE], ["5", "interviews", CARDINAL]].map(([n, l, c], i) => (
              <div key={i} style={{ flex: 1, padding: "13px 14px", borderRight: i < 2 ? `1px solid ${INK_100}` : "none" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, color: c, lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 10, color: INK_500, textTransform: "uppercase", letterSpacing: "0.04em", marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
          <div style={{ padding: "10px 14px", borderTop: `1px solid ${INK_100}`, fontSize: 11.5, color: INK_500, lineHeight: 1.45, display: "flex", gap: 7 }}>
            <I d={ICN.spark} size={13} c={CARDINAL}/><span><b style={{ color: INK }}>This week:</b> roles where you led with a number got 3× the replies.</span>
          </div>
        </Card>

        <SectionLabel>Active · 5</SectionLabel>
        <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
          {jobs.map((j, i) => (
            <Card key={i} style={{ padding: "12px 14px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{j.t}</div>
                  <div style={{ fontSize: 11.5, color: INK_500, marginTop: 1 }}>{j.co}</div>
                </div>
                <Chip tone={j.tone} small>{j.stage}</Chip>
              </div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 9 }}>
                <span style={{ fontSize: 11.5, color: INK_700, display: "inline-flex", alignItems: "center", gap: 5 }}><I d={ICN.clock} size={12} c={INK_300}/>{j.next}</span>
                {j.prep && <span style={{ fontSize: 11, fontWeight: 600, color: CARDINAL, background: CARDINAL_50, borderRadius: 999, padding: "3px 10px", display: "inline-flex", alignItems: "center", gap: 4 }}><I d={ICN.grad} size={11}/>Prep</span>}
              </div>
            </Card>
          ))}
        </div>
      </Scroll>
    </Shell>
  );
}

// =============================================================
// 4 · PREP — question + STAR + voice mock
// =============================================================
function MPrep() {
  const [tab, setTab] = useMP("behavioral");
  const Q = {
    behavioral: { q: "Tell me about a time you shipped something that failed.", star: "The trust-badge redesign. We spent a sprint, it did nothing, the data said latency. I cut losses publicly and moved to the real fix.", src: "Graph" },
    technical: { q: "Design an experiment to reduce checkout drop-off.", star: "Define the metric, instrument the funnel, pick one lever, power the test, guardrail on latency and fraud, ship to 5% first.", src: "Vault" },
  }[tab];
  const p = PROV[Q.src];
  return (
    <Shell tab="prep">
      <Header eyebrow="Prep · Stripe onsite" title="Two hours, on demand" back/>
      <Scroll>
        <Card style={{ display: "flex", alignItems: "center", gap: 11, marginTop: 4, background: CARDINAL_50, borderColor: "rgba(140,21,21,0.25)" }}>
          <span style={{ width: 38, height: 38, borderRadius: 999, background: CARDINAL, color: "#fff", display: "grid", placeItems: "center", flexShrink: 0 }}><I d={ICN.mic} size={18}/></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Rehearse out loud</div>
            <div style={{ fontSize: 11.5, color: INK_500 }}>Offerroom plays Priya, your interviewer</div>
          </div>
          <I d={ICN.play} size={26} c={CARDINAL}/>
        </Card>

        {/* dossier mini */}
        <Card style={{ marginTop: 10 }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <span style={{ width: 38, height: 38, borderRadius: 999, background: SLATE_T, color: SLATE_TX, display: "grid", placeItems: "center", fontSize: 13, fontWeight: 600 }}>PR</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Priya Raman</div>
              <div style={{ fontSize: 11.5, color: INK_500 }}>Director of Product · Stripe</div>
            </div>
            <Chip tone="sage" small><I d={ICN.globe} size={11}/>Researched</Chip>
          </div>
          <div style={{ fontSize: 12, color: INK_700, lineHeight: 1.45, marginTop: 10, padding: "9px 11px", background: PAPER, borderRadius: 8 }}>Ex-Square. Writes about checkout latency. Likely to go deep on metrics.</div>
        </Card>

        <SectionLabel>Likely questions</SectionLabel>
        <div style={{ display: "inline-flex", background: SUNKEN, borderRadius: 9, padding: 3, gap: 2, marginBottom: 12 }}>
          {[["behavioral", "Behavioral"], ["technical", "Technical"]].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{ border: "none", cursor: "pointer", padding: "6px 14px", borderRadius: 7, fontSize: 12.5, fontWeight: 600, fontFamily: "var(--font-sans)", background: tab === k ? "#fff" : "transparent", color: tab === k ? INK : INK_500, boxShadow: tab === k ? "0 1px 2px rgba(31,27,22,0.08)" : "none" }}>{l}</button>
          ))}
        </div>
        <Card>
          <div style={{ fontSize: 14.5, fontWeight: 600, lineHeight: 1.35 }}>{Q.q}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 7, margin: "12px 0 7px" }}>
            <Chip tone="applied" small>Your draft</Chip>
            <span style={{ fontSize: 11, color: INK_500 }}>STAR · from your memory</span>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: INK_700, padding: "11px 13px", background: PAPER, borderRadius: 9 }}>{Q.star}</div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 11 }}>
            <span style={{ fontSize: 11, color: INK_500, display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: p.c }}/>{Q.src === "Graph" ? "Story: card-entry redesign" : "Memory: experimentation"}</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: CARDINAL, display: "inline-flex", alignItems: "center", gap: 5 }}><I d={ICN.mic} size={13}/>Practice</span>
          </div>
        </Card>
      </Scroll>
    </Shell>
  );
}

// =============================================================
// 5 · BOARD — internal job board, high match + sponsored
// =============================================================
function MBoard() {
  const jobs = [
    { t: "Senior PM, Payments", co: "Stripe", loc: "SF · Hybrid", comp: "$240–290k", fit: "0.89", badge: "High match", tone: "sage" },
    { t: "Senior PM, Growth", co: "Brex", loc: "Remote · US", comp: "$220–260k", fit: "0.87", badge: "Sponsored", tone: "draft" },
    { t: "Group PM, Checkout", co: "Shopify", loc: "Remote", comp: "$250–300k", fit: "0.81", badge: "High match", tone: "sage" },
    { t: "Senior PM, Spend", co: "Ramp", loc: "NYC · Hybrid", comp: "$230–270k", fit: "0.76", badge: "Sponsored", tone: "draft" },
    { t: "PM, Payments Risk", co: "Mercury", loc: "SF", comp: "$210–250k", fit: "0.78", badge: null },
  ];
  return (
    <Shell tab="board">
      <Header eyebrow="Discover" title="Job board"/>
      <Scroll>
        <div style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "14px 0", borderBottom: `1px solid ${INK_100}` }}>
          <AgentMark size={26}/>
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: INK_700 }}>Roles matched to where you stand, in payments, remote-friendly, sponsorship-aware.</div>
        </div>
        <div style={{ display: "flex", gap: 7, margin: "14px 0", overflowX: "auto", paddingBottom: 2 }}>
          {["High match", "Sponsors visa", "Remote", "Senior+"].map((f, i) => (
            <span key={i} style={{ flexShrink: 0, fontSize: 12, fontWeight: 500, padding: "6px 12px", borderRadius: 999, background: i === 0 ? INK : "#fff", color: i === 0 ? PAPER : INK_700, border: i === 0 ? "none" : `1px solid ${INK_100}` }}>{f}</span>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {jobs.map((j, i) => (
            <Card key={i}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500 }}>{j.t}</div>
                  <div style={{ fontSize: 12, color: INK_500, marginTop: 2 }}>{j.co} · {j.loc}</div>
                </div>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: CARDINAL, fontWeight: 600 }}>{j.fit}</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 11 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: INK_700 }}>{j.comp}</span>
                  {j.badge && <Chip tone={j.tone} small>{j.tone === "draft" && <I d={ICN.star} size={10} c={OCHRE_TX} fill={OCHRE_TX}/>}{j.badge}</Chip>}
                </div>
                <span style={{ fontSize: 12, fontWeight: 600, color: "#fff", background: CARDINAL, borderRadius: 999, padding: "5px 13px" }}>Tailor</span>
              </div>
            </Card>
          ))}
        </div>
      </Scroll>
    </Shell>
  );
}

window.MIntake = MIntake;
window.MApprove = MApprove;
window.MTracker = MTracker;
window.MPrep = MPrep;
window.MBoard = MBoard;
