// Public-facing screens: Landing, Login, Search, Formula Bank

// ────────────────────────────────────────────────
// 1. LANDING — A: Exam booklet cover
// ────────────────────────────────────────────────
const LandingA = ({ w = 1024, h = 768 }) => (
  <div className="paper" style={{ width: w, height: h, position: "relative", overflow: "hidden" }}>
    {/* Outer page rule */}
    <div style={{ position: "absolute", inset: 24, border: "1.2px solid var(--ink)" }}/>
    <div style={{ position: "absolute", inset: 30, border: "0.6px solid var(--ink-faint)" }}/>

    <TopBar
      style={{ position: "relative", padding: "16px 48px", borderBottom: "none" }}
      left={<Brand/>}
      right={<>
        <span className="hand soft">for parents · teachers</span>
        <button className="sk-btn">sign in</button>
      </>}
    />

    <div style={{ padding: "10px 60px 0", position: "relative" }}>
      <div className="smallcaps">Cambridge Lower Secondary · Stage 9</div>
      <h1 className="serif" style={{ fontSize: 54, lineHeight: 1.02, margin: "8px 0 6px", maxWidth: 760 }}>
        Y9 Checkpoint <em>Mathematics</em><br/>
        — <HU>practiced properly.</HU>
      </h1>
      <p className="lg" style={{ maxWidth: 600, color: "var(--ink-soft)", marginTop: 10 }}>
        1,206 past-paper questions. 181 sub-skills. One paper-and-ink workspace that knows what your student needs next.
      </p>

      {/* Three cards */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, marginTop: 32 }}>
        {[
          { tag: "01", title: "Track skills", body: "A heatmap of all 181 sub-skills — see where to push, where to consolidate.", inner: <CardHeat/> },
          { tag: "02", title: "Sit past papers", body: "Every Y9 Paper 1 + Paper 2 question, with mark schemes and similar-question search.", inner: <CardPaper/> },
          { tag: "03", title: "Teacher dashboard", body: "Roster, annotations and live progress for your whole tutoring group.", inner: <CardRoster/> },
        ].map((c, i) => (
          <Box key={i} className="paper warm" p={18} h={290} wobble="soft" style={{ display: "flex", flexDirection: "column" }}>
            <div className="mono soft tiny">{c.tag}</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 4 }}><HU>{c.title}</HU></div>
            <div style={{ marginTop: 10, height: 110 }}>{c.inner}</div>
            <div className="small soft" style={{ marginTop: 12 }}>{c.body}</div>
          </Box>
        ))}
      </div>

      {/* footer */}
      <div style={{ position: "absolute", left: 60, right: 60, bottom: 36, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
        <div>
          <div className="hand red lg">mr Jay · tutoring</div>
          <div className="small soft">KL & Petaling Jaya · in-person and online · contact via mersenne.club</div>
        </div>
        <div className="mono tiny soft">last updated · 14 may 2026</div>
      </div>
    </div>
  </div>
);

const CardHeat = () => (
  <div className="hm-grid" style={{ gridTemplateColumns: "repeat(18, 1fr)", gridAutoRows: 10, color: "var(--gold)" }}>
    {Array.from({length: 54}).map((_, i) => {
      const m = [4,3,2,2,1,0,0,1,3,4,2,1][i % 12];
      const col = [
        "var(--gold)", "var(--algebra)", "var(--graphs)", "var(--ratio)",
        "var(--geom)", "var(--prob)", "var(--stats)"
      ][Math.floor(i / 8) % 7];
      return <div key={i} className={"hm-cell m" + m} style={{ color: col }}/>;
    })}
  </div>
);
const CardPaper = () => (
  <div style={{ display: "flex", gap: 8, height: "100%" }}>
    <div className="img-placeholder" style={{ flex: 1, fontSize: 9 }}>P1 page<br/>1 of 12</div>
    <div className="img-placeholder" style={{ flex: 1, fontSize: 9 }}>P2 page<br/>1 of 14</div>
  </div>
);
const CardRoster = () => (
  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
    {["Aisha · y9", "Hassan · y9", "Mei-Ling · y9", "Tariq · y8"].map((n, i) => (
      <div key={i} style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px dotted var(--ink-faint)", padding: "2px 0", fontSize: 12 }}>
        <span>{n}</span>
        <span className="mono tiny soft">{[" ▓▓▓▓░", " ▓▓░░░", " ▓▓▓░░", " ▓▓▓▓▓"][i]}</span>
      </div>
    ))}
  </div>
);

// ────────────────────────────────────────────────
// 1. LANDING — B: Notebook spread (open book)
// ────────────────────────────────────────────────
const LandingB = ({ w = 1024, h = 768 }) => (
  <div className="paper warm ruled" style={{ width: w, height: h, position: "relative", overflow: "hidden" }}>
    <TopBar
      style={{ padding: "12px 80px 12px 88px", borderBottom: "1.2px solid var(--ink)" }}
      left={<Brand/>}
      right={<>
        <span className="hand soft">for teachers + parents</span>
        <button className="sk-btn primary">sign in</button>
      </>}
    />

    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0, padding: "32px 60px 32px 88px", height: "calc(100% - 60px)" }}>
      {/* Left page — intro */}
      <div style={{ paddingRight: 28, borderRight: "1px dashed var(--ink-faint)" }}>
        <div className="smallcaps">a study journal for · stage 9 maths</div>
        <h1 className="serif" style={{ fontSize: 56, lineHeight: 1.0, margin: "12px 0 8px" }}>
          The exam paper, <br/><span className="hand red" style={{ fontSize: 64 }}>but it remembers</span>.
        </h1>
        <p className="lg" style={{ maxWidth: 460, color: "var(--ink-soft)", marginTop: 14 }}>
          Built for Cambridge Checkpoint Y9 tutoring. Questions, mark schemes,
          annotations and progress — all on the same warm page your student already trusts.
        </p>

        <div style={{ display: "flex", gap: 12, marginTop: 26 }}>
          <button className="sk-btn lg primary">i'm a student</button>
          <button className="sk-btn lg">i'm mrjay</button>
        </div>

        <StickyNote style={{ position: "absolute", left: 32, bottom: 56 }} rot={-4} w={180}>
          1,206 questions · <br/>2,400 past-paper qs · <br/>211 formulas · 422 vocab terms
        </StickyNote>
      </div>

      {/* Right page — three feature panels stacked */}
      <div style={{ paddingLeft: 32, display: "flex", flexDirection: "column", gap: 14 }}>
        {[
          { num: "i", title: "Track 181 sub-skills", body: "A printed-in-ink heatmap of every Y9 expectation across 7 strands." },
          { num: "ii", title: "Annotate as you teach", body: "Mr Jay's red-ink working stays on the page — students see exactly what you drew." },
          { num: "iii", title: "Find every similar question", body: "Type a topic, get the closest 5 past-paper questions. No tags needed." },
        ].map((f, i) => (
          <div key={i} style={{ display: "flex", gap: 14, paddingBottom: 12, borderBottom: i < 2 ? "1px solid var(--rule)" : "none" }}>
            <div className="mono soft" style={{ fontSize: 22, width: 32 }}>{f.num}</div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 22 }}><HU>{f.title}</HU></div>
              <div className="small soft" style={{ marginTop: 6, lineHeight: 1.4, maxWidth: 320 }}>{f.body}</div>
            </div>
          </div>
        ))}
        <div className="mono tiny soft" style={{ marginTop: "auto", textAlign: "right" }}>
          mr jay · tutoring · KL + PJ · last updated 14 may 2026
        </div>
      </div>
    </div>
  </div>
);

// ────────────────────────────────────────────────
// 2. LOGIN — A: Index card centered
// ────────────────────────────────────────────────
const LoginA = ({ w = 1024, h = 768 }) => (
  <div className="paper" style={{ width: w, height: h, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
    <div style={{ position: "absolute", top: 22, left: 32 }}><Brand/></div>
    <a className="hand soft" style={{ position: "absolute", top: 28, right: 36 }}>← back to home</a>

    <Box w={420} p={32} className="paper warm" wobble="soft">
      <div className="smallcaps">sign in</div>
      <div className="serif" style={{ fontSize: 30, marginTop: 6 }}><HU>Welcome back.</HU></div>

      <div style={{ display: "flex", gap: 0, marginTop: 22 }}>
        <div className="sk-tab active">student</div>
        <div className="sk-tab">mr jay</div>
      </div>
      <div style={{ borderTop: "1.2px solid var(--ink)", marginTop: -1, paddingTop: 22 }}>
        <div className="hand soft" style={{ fontSize: 14 }}>username</div>
        <input className="sk-input" defaultValue="aisha-y9" style={{ width: "100%", marginTop: 4 }}/>

        <div className="hand soft" style={{ fontSize: 14, marginTop: 18 }}>password</div>
        <input className="sk-input" type="password" defaultValue="••••••••" style={{ width: "100%", marginTop: 4 }}/>

        <button className="sk-btn primary lg" style={{ width: "100%", justifyContent: "center", marginTop: 26 }}>open my book</button>

        <div className="small soft" style={{ marginTop: 14, textAlign: "center" }}>
          forgot password? <span className="underline-hand">ask mr jay to reset</span>
        </div>
      </div>
    </Box>

    <StickyNote rot={3} style={{ position: "absolute", right: 60, top: 80 }}>
      mrjay → master pw only.<br/>no self-signup.
    </StickyNote>
  </div>
);

// ────────────────────────────────────────────────
// 2. LOGIN — B: Two-up door
// ────────────────────────────────────────────────
const LoginB = ({ w = 1024, h = 768 }) => (
  <div className="paper cool" style={{ width: w, height: h, position: "relative" }}>
    <div style={{ position: "absolute", top: 22, left: 32 }}><Brand/></div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2px 1fr", height: "100%" }}>
      {/* Student door */}
      <div style={{ padding: "120px 60px 0", textAlign: "center" }}>
        <div className="smallcaps">student door</div>
        <div className="serif" style={{ fontSize: 38, marginTop: 8 }}><HU>I'm a student</HU></div>
        <div className="hand red xl" style={{ marginTop: 6 }}>your username + password</div>

        <Box className="paper warm" p={22} style={{ marginTop: 26, textAlign: "left" }} wobble="soft">
          <div className="small soft">username</div>
          <input className="sk-input" defaultValue="aisha-y9" style={{ width: "100%" }}/>
          <div className="small soft" style={{ marginTop: 16 }}>password</div>
          <input className="sk-input" type="password" defaultValue="••••••••" style={{ width: "100%" }}/>
          <button className="sk-btn primary lg" style={{ width: "100%", justifyContent: "center", marginTop: 22 }}>enter →</button>
        </Box>
      </div>

      <div style={{ background: "var(--ink)" }}/>

      {/* mrjay door */}
      <div style={{ padding: "120px 60px 0", textAlign: "center" }}>
        <div className="smallcaps">teacher door</div>
        <div className="serif" style={{ fontSize: 38, marginTop: 8 }}><HU>I'm mr Jay</HU></div>
        <div className="hand red xl" style={{ marginTop: 6 }}>requires master password</div>

        <Box className="paper warm" p={22} style={{ marginTop: 26, textAlign: "left" }} wobble="soft">
          <div className="small soft">master pw</div>
          <input className="sk-input" type="password" defaultValue="••••••••" style={{ width: "100%" }}/>
          <div className="small soft" style={{ marginTop: 16 }}>2nd factor (optional)</div>
          <input className="sk-input" style={{ width: "100%" }}/>
          <button className="sk-btn primary lg" style={{ width: "100%", justifyContent: "center", marginTop: 22 }}>open dashboard →</button>
        </Box>
      </div>
    </div>
  </div>
);

// ────────────────────────────────────────────────
// 4. SEARCH — A: Wide bar, ranked list
// ────────────────────────────────────────────────
const SearchA = ({ w = 1280, h = 800 }) => (
  <div className="paper" style={{ width: w, height: h }}>
    <TopBar
      left={<Brand/>}
      center={<span className="hand soft">search · 1,206 questions · 181 skills</span>}
      right={<button className="sk-btn ghost">sign in</button>}
    />
    <div style={{ padding: "30px 60px" }}>
      <div className="smallcaps">smart search</div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 10, borderBottom: "2px solid var(--ink)", paddingBottom: 8 }}>
        <span className="xxl serif faint">?</span>
        <input className="sk-input" defaultValue="rounding to 2 decimal places" style={{ flex: 1, fontSize: 30, borderBottom: "none" }}/>
        <span className="mono tiny soft">enter ↵</span>
      </div>
      <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
        {["all strands", "P1 non-calc", "P2 calc", "has diagram", "y8 only", "y9 only"].map((c, i) => (
          <span key={i} className="sk-btn sm" style={{ borderStyle: i === 1 ? "solid" : "dashed", background: i === 1 ? "var(--ink)" : "transparent", color: i === 1 ? "var(--paper)" : "var(--ink)" }}>{c}</span>
        ))}
      </div>

      <div className="small soft" style={{ marginTop: 22 }}>10 matches · ranked by similarity</div>
      <div style={{ marginTop: 8 }}>
        {[
          { id: "MCK-Y9-0247", skill: "Y8-3.2 Rounding to significant figures", score: 0.94, s: STRANDS[0], strong: true },
          { id: "MCK-Y9-0091", skill: "Y9-3.1 Rounding to decimal places",      score: 0.91, s: STRANDS[0] },
          { id: "MCK-Y9-0512", skill: "Y9-3.4 Upper & lower bounds",             score: 0.83, s: STRANDS[0] },
          { id: "MCK-Y9-0608", skill: "Y9-2.7 Estimation in calculation",        score: 0.78, s: STRANDS[0] },
          { id: "MCK-Y9-0103", skill: "Y8-3.5 Truncation",                       score: 0.66, s: STRANDS[0] },
          { id: "MCK-Y9-0844", skill: "Y9-6.2 Mean from frequency",              score: 0.41, s: STRANDS[6] },
        ].map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "8px 80px 1fr 240px 80px 30px",
            gap: 14, alignItems: "center",
            padding: "12px 0", borderBottom: "1px dashed var(--rule)",
            opacity: 0.4 + r.score * 0.6,
          }}>
            <div style={{ width: 4, height: 30, background: r.s.color }}/>
            <div className="img-placeholder" style={{ width: 70, height: 50, fontSize: 8 }}>thumb</div>
            <div>
              <div className="mono small">{r.id}</div>
              <div className="serif" style={{ fontSize: 16 }}>{r.skill}</div>
            </div>
            <StrandChip s={r.s}/>
            <div>
              <div className="mono tiny soft">match</div>
              <div className="hand" style={{ fontSize: 22, color: r.strong ? "var(--graphs)" : "var(--ink)" }}>{Math.round(r.score * 100)}%</div>
            </div>
            <span className="hand soft xl">→</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ────────────────────────────────────────────────
// 4. SEARCH — B: Sidebar filters + grid thumbnails
// ────────────────────────────────────────────────
const SearchB = ({ w = 1280, h = 800 }) => (
  <div className="paper warm" style={{ width: w, height: h }}>
    <TopBar
      left={<Brand/>}
      right={<button className="sk-btn ghost">sign in</button>}
    />
    <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", height: "calc(100% - 56px)" }}>
      {/* Sidebar */}
      <div style={{ padding: "22px 18px", borderRight: "1.2px solid var(--ink)" }}>
        <div className="smallcaps">filter by</div>

        <div className="hand" style={{ fontSize: 19, marginTop: 16 }}>strand</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 6 }}>
          {STRANDS.map((s, i) => (
            <label key={s.key} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
              <span className="sk-box" style={{ width: 14, height: 14, background: i < 3 ? s.color : "transparent" }}/>
              <span style={{ color: i < 3 ? "var(--ink)" : "var(--ink-soft)" }}>{s.name}</span>
            </label>
          ))}
        </div>

        <div className="hand" style={{ fontSize: 19, marginTop: 18 }}>paper</div>
        <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
          <span className="sk-btn sm" style={{ background: "var(--ink)", color: "var(--paper)" }}>P1</span>
          <span className="sk-btn sm">P2</span>
        </div>

        <div className="hand" style={{ fontSize: 19, marginTop: 18 }}>shape</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 6, fontSize: 12 }}>
          <label><input type="checkbox" defaultChecked/> has diagram</label>
          <label><input type="checkbox"/> multi-part</label>
          <label><input type="checkbox"/> table/chart</label>
        </div>

        <div className="hand" style={{ fontSize: 19, marginTop: 18 }}>year</div>
        <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
          <span className="sk-btn sm">y7</span>
          <span className="sk-btn sm">y8</span>
          <span className="sk-btn sm" style={{ background: "var(--ink)", color: "var(--paper)" }}>y9</span>
        </div>
      </div>

      {/* Results */}
      <div style={{ padding: "22px 36px", overflow: "hidden" }}>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <input className="sk-input lg" defaultValue="pythagoras with decimals" style={{ flex: 1, fontSize: 24 }}/>
          <button className="sk-btn primary lg">find →</button>
        </div>
        <div className="small soft" style={{ marginTop: 8 }}>showing 9 of 38 matches · sorted by similarity</div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginTop: 18 }}>
          {Array.from({length: 9}).map((_, i) => {
            const ids = ["0247","0091","0512","0608","0103","0844","0044","0210","0399"];
            const skills = ["Pythagoras with decimal sides","Hypotenuse 3D","Distance between coords","Right-triangle word problem","Pythag triples","Surd answers","Ladder against wall","Rectangle diagonal","Perimeter of triangle"];
            const score = [94, 92, 88, 86, 82, 78, 72, 68, 60][i];
            return (
              <Box key={i} className="paper" p={10} h={170} wobble="soft" style={{ display: "flex", flexDirection: "column" }}>
                <div className="img-placeholder" style={{ flex: 1, marginBottom: 6 }}>q.png · diagram</div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span className="mono tiny">MCK-Y9-0{ids[i]}</span>
                  <span className="hand" style={{ color: i < 2 ? "var(--graphs)" : "var(--ink-soft)", fontSize: 16 }}>{score}%</span>
                </div>
                <div className="small" style={{ marginTop: 2 }}>{skills[i]}</div>
              </Box>
            );
          })}
        </div>
      </div>
    </div>
  </div>
);

// ────────────────────────────────────────────────
// 11. FORMULA BANK — A: Tabbed by strand
// ────────────────────────────────────────────────
const FormulaA = ({ w = 1280, h = 800 }) => (
  <div className="paper" style={{ width: w, height: h }}>
    <TopBar
      left={<Brand/>}
      center={<span className="hand soft">formula + vocab bank · 633 entries</span>}
      right={<button className="sk-btn ghost">sign in</button>}
    />
    <div style={{ padding: "20px 60px" }}>
      <div className="smallcaps">stage 9 reference</div>
      <h2 className="serif" style={{ fontSize: 38, margin: "6px 0 16px" }}>
        <HU>Formulas &amp; vocabulary,</HU> <span className="hand red">tickable</span>.
      </h2>

      <div style={{ display: "flex", gap: 0, alignItems: "flex-end" }}>
        {STRANDS.map((s, i) => (
          <div key={s.key} className={"sk-tab " + (i === 1 ? "active" : "")}
               style={{ borderBottomColor: s.color, borderBottomStyle: "solid", borderBottomWidth: 4 }}>
            {s.name}
          </div>
        ))}
        <div className="sk-tab">all</div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <input className="sk-input" placeholder="filter formulas + terms…" style={{ width: 240 }}/>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 26, marginTop: 18 }}>
        {/* Formulas */}
        <Box p={0} wobble="soft" className="paper warm">
          <div style={{ padding: "10px 16px", borderBottom: "1.2px solid var(--ink)", display: "flex", justifyContent: "space-between" }}>
            <span className="serif lg">Formulas <span className="soft small">· 22</span></span>
            <span className="mono tiny soft">tick = i can recall</span>
          </div>
          <div>
            {[
              ["solve linear eq", "ax + b = c → x = (c−b)/a", true],
              ["expand single", "a(b + c) = ab + ac", true],
              ["expand double", "(a+b)(c+d) = ac + ad + bc + bd", false],
              ["factorise diff sq", "a² − b² = (a−b)(a+b)", false],
              ["nth term linear", "U_n = a + (n−1)d", false],
              ["complete square", "x² + bx + c = (x + b/2)² − b²/4 + c", false],
              ["gradient", "m = (y₂ − y₁) / (x₂ − x₁)", true],
            ].map(([n, f, t], i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 16px", borderBottom: "1px dotted var(--rule)" }}>
                <span className="sk-box" style={{ width: 18, height: 18, display: "inline-flex", alignItems: "center", justifyContent: "center", background: t ? "var(--algebra)" : "transparent", color: "var(--paper)", fontFamily: "var(--font-hand)" }}>{t ? "✓" : ""}</span>
                <div style={{ flex: 1 }}>
                  <div className="small">{n}</div>
                  <div className="mono small">{f}</div>
                </div>
              </div>
            ))}
          </div>
        </Box>
        {/* Vocab */}
        <Box p={0} wobble="soft" className="paper warm">
          <div style={{ padding: "10px 16px", borderBottom: "1.2px solid var(--ink)", display: "flex", justifyContent: "space-between" }}>
            <span className="serif lg">Vocabulary <span className="soft small">· 38</span></span>
            <span className="mono tiny soft">tick = i can define</span>
          </div>
          <div>
            {[
              ["coefficient", "the number multiplying a variable in a term", true],
              ["identity", "an equation true for all values of x", false],
              ["like terms", "terms with identical variable parts", true],
              ["expression", "letters and numbers without an equals sign", true],
              ["linear", "the highest power of x is 1", false],
              ["quadratic", "the highest power of x is 2", false],
              ["subject", "the variable a formula is solved for", false],
            ].map(([n, d, t], i) => (
              <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "8px 16px", borderBottom: "1px dotted var(--rule)" }}>
                <span className="sk-box" style={{ width: 18, height: 18, display: "inline-flex", alignItems: "center", justifyContent: "center", background: t ? "var(--algebra)" : "transparent", color: "var(--paper)", fontFamily: "var(--font-hand)" }}>{t ? "✓" : ""}</span>
                <div style={{ flex: 1 }}>
                  <div className="small" style={{ fontWeight: 700 }}>{n}</div>
                  <div className="small soft">{d}</div>
                </div>
              </div>
            ))}
          </div>
        </Box>
      </div>
    </div>
  </div>
);

// ────────────────────────────────────────────────
// 11. FORMULA BANK — B: Index page (all strands columned)
// ────────────────────────────────────────────────
const FormulaB = ({ w = 1280, h = 900 }) => (
  <div className="paper warm" style={{ width: w, height: h }}>
    <TopBar
      left={<Brand/>}
      right={<>
        <input className="sk-input" placeholder="search 211 formulas + 422 terms" style={{ width: 280 }}/>
        <button className="sk-btn">my ticks · 47</button>
      </>}
    />
    <div style={{ padding: "20px 60px" }}>
      <div className="smallcaps">reference index — stage 9</div>
      <h2 className="serif" style={{ fontSize: 36, margin: "6px 0 4px" }}>
        Everything to <em>remember</em>, on one page.
      </h2>
      <div className="hand red lg">tap any item to tick it off — auto-saves to your book.</div>

      <div style={{ columnCount: 4, columnGap: 28, marginTop: 22 }}>
        {STRANDS.map((s) => (
          <div key={s.key} style={{ breakInside: "avoid", marginBottom: 22 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, borderBottom: `3px solid ${s.color}`, paddingBottom: 4 }}>
              <span style={{ width: 10, height: 10, background: s.color }}/>
              <span className="serif lg">{s.name}</span>
              <span className="mono tiny soft" style={{ marginLeft: "auto" }}>fx · 22</span>
            </div>
            <div style={{ fontSize: 12, marginTop: 8, lineHeight: 1.5 }}>
              {[
                "expand (a+b)(c+d)",
                "factorise a²−b²",
                "linear nth term",
                "completing the square",
                "gradient m = Δy/Δx",
                "y = mx + c",
                "midpoint formula",
                "distance formula",
                "Pythagoras a²+b²=c²",
              ].map((f, i) => (
                <div key={i} style={{ display: "flex", gap: 6 }}>
                  <span style={{ color: i % 3 === 0 ? s.color : "var(--ink-faint)" }}>{i % 3 === 0 ? "✓" : "·"}</span>
                  <span>{f}</span>
                </div>
              ))}
              <div className="hand soft" style={{ marginTop: 4 }}>+ 13 more</div>
            </div>
            <div style={{ marginTop: 10 }}>
              <div className="smallcaps">vocab</div>
              <div style={{ fontSize: 12, marginTop: 4, lineHeight: 1.45 }}>
                {[
                  "coefficient", "identity", "like terms", "expression", "subject", "quadratic"
                ].map((t, i) => (
                  <span key={i} style={{ marginRight: 8, borderBottom: "1px dotted var(--ink-faint)" }}>{t}</span>
                ))}
                <div className="hand soft" style={{ marginTop: 4 }}>+ 24 more</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, { LandingA, LandingB, LoginA, LoginB, SearchA, SearchB, FormulaA, FormulaB });