/* primer.jsx — "Before You Start" — the minimum you need to follow the
   equations as an adult. Kids mode reassures and waves it off. Renders a
   self-contained page in the Level 0 / story visual register. */

const { useState, useEffect } = React;

/* Interactive: rearrange V = I·R by tapping which value you're solving for. */
function RearrangeDemo() {
  const [solve, setSolve] = useState("I"); // V | I | R
  const V = 9, I = 3, R = 3;
  const forms = {
    V: { eq: <><span className="V">V</span><span className="op">=</span><span className="I">I</span><span className="op">·</span><span className="R">R</span></>,
         say: "Know the flow and the squeeze? Multiply them for the push.", num: <>9 = 3 · 3</> },
    I: { eq: <><span className="I">I</span><span className="op">=</span><span className="frac"><span className="V">V</span><span className="bar"></span><span className="R">R</span></span></>,
         say: "Know the push and the squeeze? Divide to get the flow.", num: <>3 = 9 ÷ 3</> },
    R: { eq: <><span className="R">R</span><span className="op">=</span><span className="frac"><span className="V">V</span><span className="bar"></span><span className="I">I</span></span></>,
         say: "Know the push and the flow? Divide to get the squeeze.", num: <>3 = 9 ÷ 3</> },
  };
  const f = forms[solve];
  return (
    <div className="primer-rearrange">
      <div className="pr-tabs">
        {["V", "I", "R"].map(k => (
          <button key={k} className={`pr-tab ${solve === k ? "on" : ""}`} onClick={() => setSolve(k)}>
            Solve for {k}
          </button>
        ))}
      </div>
      <div className="pr-stage">
        <div className="pr-eq eq">{f.eq}</div>
        <div className="pr-num mono">{f.num}</div>
      </div>
      <p className="pr-say">{f.say}</p>
    </div>
  );
}

/* Units mini-reference */
function UnitTable() {
  const rows = [
    ["V", "Volt", "the push (voltage)", "var(--water)"],
    ["I", "Ampere (amp)", "the flow (current)", "var(--current)"],
    ["R", "Ohm · Ω", "the squeeze (resistance)", "var(--ink)"],
    ["P", "Watt", "how fast work happens (power)", "var(--ink)"],
  ];
  return (
    <div className="primer-units">
      {rows.map(([s, u, d, c]) => (
        <div key={s} className="pu-row">
          <span className="pu-sym" style={{ color: c }}>{s}</span>
          <span className="pu-unit mono">{u}</span>
          <span className="pu-desc">{d}</span>
        </div>
      ))}
    </div>
  );
}

function PrimerApp() {
  const [t, setTweak] = useTweaks({ theme: "paper", audience: "adult" });
  useCrossChapterPersistence(t, setTweak);
  useEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]);
  const kids = t.audience === "kids";

  const navItems = [
    { id: "cover", label: "Cover" },
    { id: "how-much", label: kids ? "Don't worry" : "How much math" },
    { id: "symbols", label: "Symbols" },
    { id: "scale", label: "Big & small" },
    { id: "rearrange", label: "Rearranging" },
    { id: "ready", label: "Ready" },
  ];

  return (
    <>
      <ProgressBar />
      <TopBar currentN="L0-00" chapterLabel="Level 0 · Before You Start"
              audience={t.audience} setAudience={(v) => setTweak("audience", v)} />
      <ChapterNav items={navItems} />

      <main>
        <section className="cover-page" id="cover" data-screen-label="Primer Cover">
          <div className="hero-grid"></div>
          <div className="cover-inner">
            <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 28 }}>
              <span className="eyebrow" style={{ color: "var(--current)" }}>Level 0 · Prep</span>
              <span className="eyebrow" style={{ color: "var(--ink-faint)" }}>·</span>
              <span className="eyebrow">Optional</span>
            </div>
            <h1 className="serif cover-title">Before You <em>Start</em>.</h1>
            <div className="eyebrow" style={{ marginTop: 36, marginBottom: 16, color: "var(--current)" }}>
              The little bit of math you'll want — and nothing more
            </div>
            <div className="cover-lede">
              {kids
                ? <>Good news: you don't need <em>any</em> math to enjoy this. Just drag the sliders and watch what happens. This page is for grown-ups who want to follow the equations.</>
                : <>You can do this whole course on intuition alone. But if you want to <em>follow the equations</em>, here's the honest, complete list of what you need — about ten minutes of arithmetic, no more.</>}
            </div>
            <div className="cover-cta">
              <a href="#how-much" className="arrow-link"><span>{kids ? "Take a peek" : "What you'll need"}</span><span className="arrow-glyph">↓</span></a>
            </div>
          </div>
        </section>

        <section className="section" id="how-much" data-screen-label="How much math">
          <div className="marker">§ 01 · the honest answer</div>
          <div className="section-inner" style={{ maxWidth: 820 }}>
            <h2 className="serif">{kids ? "You need… nothing!" : "How much math is this, really?"}</h2>
            {kids ? (
              <p className="lede">
                Seriously — zero. Drag a slider, watch the water and the lights. That's the
                whole course. The rest of this page is grown-up stuff you can skip.
              </p>
            ) : (
              <>
                <p className="lede">
                  Less than you fear. The entire course needs exactly three things:
                </p>
                <div className="primer-need">
                  <div className="pn-item"><span className="pn-n">1</span><span>Arithmetic — adding, multiplying, and dividing numbers.</span></div>
                  <div className="pn-item"><span className="pn-n">2</span><span>Reading a few letters as stand-ins for quantities (V, I, R, P).</span></div>
                  <div className="pn-item"><span className="pn-n">3</span><span>Rearranging <em>one</em> equation three ways. We'll practice it below.</span></div>
                </div>
                <p className="note" style={{ marginTop: 18 }}>
                  No algebra beyond that. No trigonometry, no calculus. If a later chapter
                  ever needs more, it will teach it on the spot.
                </p>
              </>
            )}
          </div>
        </section>

        <section className="section" id="symbols" data-screen-label="Symbols"
                 style={{ background: "var(--bg-deeper)" }}>
          <div className="marker">§ 02 · the four letters</div>
          <div className="section-inner" style={{ maxWidth: 820 }}>
            <h2 className="serif">Four symbols,<br/>four units.</h2>
            <p className="lede">
              {kids
                ? <>These letters show up in the diagrams. You don't have to memorize them — here's what they mean if you're curious.</>
                : <>Every equation in the course is built from these four. A letter is just shorthand for a quantity; the unit is how we measure it.</>}
            </p>
            <UnitTable />
            <p className="note" style={{ marginTop: 16 }}>
              Mnemonic: <em>V</em>oltage pushes, <em>I</em> (current) flows, <em>R</em>esistance
              resists, <em>P</em>ower is the result.
            </p>
          </div>
        </section>

        <section className="section" id="scale" data-screen-label="Big and small">
          <div className="marker">§ 03 · big numbers & small ones</div>
          <div className="section-inner" style={{ maxWidth: 820 }}>
            <h2 className="serif">{kids ? "Tiny and huge" : "milli, kilo, and powers of ten"}</h2>
            <p className="lede">
              {kids
                ? <>Electricity comes in tiny amounts and huge amounts. We use little words so we don't write a million zeros.</>
                : <>Real circuits span an enormous range, so we attach prefixes instead of writing long strings of zeros.</>}
            </p>
            <div className="primer-scale">
              <div className="ps-row"><span className="ps-pre mono">milli- (m)</span><span className="ps-eq mono">÷ 1,000</span><span className="ps-ex">20 mA = 0.02 A</span></div>
              <div className="ps-row"><span className="ps-pre mono">kilo- (k)</span><span className="ps-eq mono">× 1,000</span><span className="ps-ex">2 kΩ = 2,000 Ω</span></div>
              <div className="ps-row"><span className="ps-pre mono">mega- (M)</span><span className="ps-eq mono">× 1,000,000</span><span className="ps-ex">1 MΩ = 1,000,000 Ω</span></div>
              <div className="ps-row"><span className="ps-pre mono">micro- (µ)</span><span className="ps-eq mono">÷ 1,000,000</span><span className="ps-ex">100 µF = 0.0001 F</span></div>
            </div>
            {!kids && (
              <p className="note" style={{ marginTop: 16 }}>
                You'll also see "×10⁶" notation — that just means "move the decimal point 6
                places." 6.24 × 10¹⁸ is a 6 with eighteen digits after it. Big.
              </p>
            )}
          </div>
        </section>

        <section className="section" id="math-needed" data-screen-label="How much math">
          <div className="marker">§ 04 · how much math, exactly?</div>
          <div className="section-inner" style={{ maxWidth: 820 }}>
            <h2 className="serif">{kids ? "Will the math be hard?" : "What the engineer track expects"}</h2>
            <p className="lede">
              {kids
                ? <>Nope! If you can multiply and divide, you can do every puzzle in this course. And the pictures always tell the same story as the numbers.</>
                : <>Honestly: arithmetic. If you can multiply, divide, and move one number across an equals sign, you can follow the whole engineer track — including every practice problem and the Beacon design math.</>}
            </p>
            {!kids && (
              <div className="primer-scale" style={{ marginTop: 6 }}>
                <div className="ps-row"><span className="ps-pre mono">you'll use</span><span className="ps-eq mono">× ÷ %</span><span className="ps-ex">multiply, divide, the odd percentage</span></div>
                <div className="ps-row"><span className="ps-pre mono">you'll use</span><span className="ps-eq mono">V = I·R ⇄</span><span className="ps-ex">one rearrangement (next section)</span></div>
                <div className="ps-row"><span className="ps-pre mono">you'll SEE</span><span className="ps-eq mono">e⁻ᵗ/ᵀ</span><span className="ps-ex">the charging curve — shown as a picture, never computed by hand</span></div>
                <div className="ps-row"><span className="ps-pre mono">never needed</span><span className="ps-eq mono">—</span><span className="ps-ex">calculus, trig, complex numbers</span></div>
              </div>
            )}
            <div className="card" style={{ marginTop: 22, background: "transparent" }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>{kids ? "secret symbols" : "shorthand you'll meet"}</div>
              <div className="primer-scale">
                <div className="ps-row"><span className="ps-pre mono">~ and ≈</span><span className="ps-eq mono">"roughly"</span><span className="ps-ex">~0.7 V means "around 0.7 volts"</span></div>
                <div className="ps-row"><span className="ps-pre mono">·</span><span className="ps-eq mono">"times"</span><span className="ps-ex">V = I·R is just V = I × R</span></div>
                <div className="ps-row"><span className="ps-pre mono">Vᵢₙ, I_C</span><span className="ps-eq mono">labels</span><span className="ps-ex">small subscripts only NAME a thing — "the voltage going in"</span></div>
                <div className="ps-row"><span className="ps-pre mono">τ, β, Δ</span><span className="ps-eq mono">names</span><span className="ps-ex">Greek letters are nicknames, not operations (Δ = "the change in")</span></div>
              </div>
            </div>
            <p className="note" style={{ marginTop: 16 }}>
              {kids
                ? <>One more secret: when an equation shows up, you NEVER have to understand it right away. Keep scrolling — the pictures underneath always explain it.</>
                : <>And a standing promise: when an equation appears early in a chapter, you are not expected to absorb it on sight. Examples, sliders, and plain-words breakdowns always follow. Scroll on, circle back — that's the intended reading order.</>}
            </p>
          </div>
        </section>

        <section className="section" id="rearrange" data-screen-label="Rearranging"
                 style={{ background: "var(--bg-deeper)" }}>
          <div className="marker">§ 05 · the one skill that matters</div>
          <div className="section-inner" style={{ maxWidth: 820 }}>
            <h2 className="serif">Rearranging<br/><em>one</em> equation.</h2>
            <p className="lede">
              {kids
                ? <>Grown-ups like to flip this equation around to find different things. Tap the buttons to watch it flip!</>
                : <>This is the only algebra you truly need. The relationship V = I·R can be read three ways depending on what you're solving for. Tap each to see it rearrange.</>}
            </p>
            <RearrangeDemo />
            <p className="note" style={{ marginTop: 16 }}>
              {kids
                ? <>That's the trickiest math in the whole course — and you just watched it happen.</>
                : <>That's it. If you can move a number across the "=" by flipping × into ÷, you can follow every equation here.</>}
            </p>
          </div>
        </section>

        <section className="section" id="ready" data-screen-label="Ready"
                 style={{ paddingBottom: "12vh" }}>
          <div className="marker">§ you're ready</div>
          <div className="section-inner">
            <div style={{ display: "grid", gridTemplateColumns: "minmax(280px,1fr) 1.1fr", gap: "clamp(28px,5vw,72px)", alignItems: "center" }}>
              <div>
                <h2 className="serif">That's the whole<br/><em>toolkit</em>.</h2>
                <p className="lede" style={{ marginTop: 10 }}>
                  {kids
                    ? <>Now go play! Start with Chapter 1 and drag everything you can find.</>
                    : <>Four symbols, a handful of prefixes, and one rearrangement. Everything else in the course is intuition you'll build by doing. Time to start.</>}
                </p>
                <div style={{ display: "flex", gap: 12, marginTop: 22, flexWrap: "wrap" }}>
                  <a href="chapter1.html" className="cta cta-primary">Start Chapter 1 →</a>
                  <a href="map.html" className="cta cta-secondary">Course map</a>
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <div className="primer-seal">
                  <div className="eq" style={{ fontSize: 44 }}>
                    <span className="V">V</span><span className="op">=</span><span className="I">I</span><span className="R">R</span>
                  </div>
                  <div className="eyebrow" style={{ textAlign: "center", marginTop: 10 }}>the only equation<br/>you must know</div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <TweaksPanel title="Tweaks">
        <CommonTweaks t={t} setTweak={setTweak} />
      </TweaksPanel>
      <GlossaryFab />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PrimerApp />);