/* chapter13.jsx — Ch. 13 · The Adding Machine (Level 1½).
   Chapter 5's switches become gates; gates become arithmetic. The learner
   toggles real inputs and watches AND/OR/XOR, a half adder, then a 2-bit
   ripple adder genuinely compute. */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "paper",
  "audience": "adult"
}/*EDITMODE-END*/;

/* ─── tiny shared pieces ───────────────────────────────────────────────── */
function Ch13Toggle({ on, label, onFlip, color = "var(--current)" }) {
  return (
    <button onClick={onFlip}
            style={{
              appearance: "none", cursor: "pointer",
              display: "flex", alignItems: "center", gap: 10,
              border: `2px solid ${on ? color : "var(--rule-strong)"}`,
              background: on ? "color-mix(in oklch, " + color.replace("var(", "var(") + " 12%, var(--bg-card))" : "var(--bg-card)",
              borderRadius: 10, padding: "10px 16px",
              fontFamily: "IBM Plex Mono, monospace", fontSize: 14, color: "var(--ink)",
            }}>
      <span style={{
        width: 36, height: 20, borderRadius: 10, position: "relative",
        background: on ? color : "var(--bg-deeper)", border: "1.5px solid var(--rule-strong)",
        transition: "background 140ms ease",
      }}>
        <span style={{
          position: "absolute", top: 1.5, left: on ? 17 : 2, width: 14, height: 14,
          borderRadius: "50%", background: "var(--bg-card)", border: "1px solid var(--rule-strong)",
          transition: "left 140ms ease",
        }}></span>
      </span>
      <b>{label} = {on ? 1 : 0}</b>
    </button>
  );
}

function Ch13Lamp({ on, label, big }) {
  const r = big ? 17 : 13;
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
      <svg width={r * 2 + 14} height={r * 2 + 14} viewBox={`0 0 ${r * 2 + 14} ${r * 2 + 14}`}>
        {on && <circle cx={r + 7} cy={r + 7} r={r + 5} fill="var(--current)" opacity="0.25" />}
        <circle cx={r + 7} cy={r + 7} r={r} fill={on ? "var(--current)" : "var(--bg-deeper)"}
                stroke="var(--ink)" strokeWidth="2" />
      </svg>
      <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 12, color: on ? "var(--current-deep)" : "var(--ink-faint)" }}>
        {label} = {on ? 1 : 0}
      </span>
    </div>
  );
}

/* ─── §02 three gates, live ────────────────────────────────────────────── */
function Ch13Gates({ kids }) {
  const [a, setA] = useState(true);
  const [b, setB] = useState(false);
  return (
    <section className="section" id="gates" data-screen-label="02 Gates">
      <div className="marker">§ 02 · three gates is all it takes</div>
      <div className="section-inner">
        <div className="two-col">
          <div>
            <h2 className="serif">Switch circuits,<br/>given <em>names</em>.</h2>
            <p className="lede">
              {kids
                ? <>Chapter 5 ended with gates in a row (AND) and gates side-by-side (OR). Engineers got tired of drawing the whole plumbing every time, so they gave each pattern a name and a symbol. Same circuits — new vocabulary.</>
                : <>Chapter 5 built AND (switches in series) and OR (switches in parallel) from plumbing. Name those patterns, treat each as a sealed box, and you can compose them without re-deriving the pipes every time. That move — name it, box it, stack it — is the whole secret of digital design.</>}
            </p>
            <p>
              {kids
                ? <>One newcomer: <b>XOR</b>, the "different detector." It lights only when the two inputs <em>disagree</em> — one on, one off. (Two switches working a hallway light from both ends of the hall: flip either one and the light changes!)</>
                : <>One newcomer: <b>XOR</b> — exclusive-OR, the disagreement detector. High when inputs differ, low when they match. In switch form it's the two-way hallway light: two 3-way switches, either one toggles the outcome. Keep XOR in your pocket; it's about to do something remarkable.</>}
            </p>
            <div className="marg" style={{ marginTop: 14 }}>
              {kids
                ? <>Flip A and B and watch all three judges react to the same two inputs.</>
                : <>Flip A and B — all three gates watch the same two inputs and render different verdicts. A truth table is just this panel, written down.</>}
            </div>
          </div>
          <div>
            <div className="card" style={{ padding: "24px 26px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>two inputs · three verdicts</div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Ch13Toggle on={a} label="A" onFlip={() => setA(v => !v)} color="var(--water)" />
                <Ch13Toggle on={b} label="B" onFlip={() => setB(v => !v)} color="var(--water)" />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginTop: 22 }}>
                {[
                  { name: "AND", desc: kids ? "both" : "series", out: a && b },
                  { name: "OR", desc: kids ? "either" : "parallel", out: a || b },
                  { name: "XOR", desc: kids ? "different" : "disagree", out: a !== b },
                ].map(g => (
                  <div key={g.name} style={{ textAlign: "center", padding: "14px 8px 10px", border: "1.5px solid var(--rule)", borderRadius: 8, background: g.out ? "color-mix(in oklch, var(--current) 7%, var(--bg-card))" : "var(--bg-card)" }}>
                    <div style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 15, fontWeight: 600, marginBottom: 2 }}>{g.name}</div>
                    <div style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 10.5, color: "var(--ink-faint)", letterSpacing: "0.08em", marginBottom: 8 }}>{g.desc}</div>
                    <Ch13Lamp on={g.out} label="out" />
                  </div>
                ))}
              </div>
              <div className="marg" style={{ marginTop: 14, fontSize: 13 }}>
                {kids
                  ? <>Try every combo: 0+0, 0+1, 1+0, 1+1. Which gates agree with each other? Which never do?</>
                  : <>Note where XOR and OR differ: only at 1,1. And where XOR and AND agree: never. Hold that thought.</>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── §03 the half adder ───────────────────────────────────────────────── */
function Ch13HalfAdder({ kids }) {
  const [a, setA] = useState(true);
  const [b, setB] = useState(true);
  const sum = a !== b, carry = a && b;
  return (
    <section className="section" id="half" data-screen-label="03 Half adder" style={{ background: "var(--bg-deeper)" }}>
      <div className="marker">§ 03 · the trick of the century</div>
      <div className="section-inner">
        <div className="two-col">
          <div>
            <h2 className="serif">Now watch:<br/><em>gates can count.</em></h2>
            <p className="lede">
              {kids
                ? <>Add two one-digit binary numbers by hand: 0+0=0, 0+1=1, 1+0=1… and 1+1 = 10 (that's "two" in binary — a 0, carry the 1). Look at the answer's LAST digit: 0,1,1,0. Now look at XOR's column: 0,1,1,0. <b>They're the same!</b></>
                : <>Write the addition table for two bits: 0+0=00, 0+1=01, 1+0=01, 1+1=10. Now stare at the two output columns. The low bit goes 0,1,1,0 — <em>that's XOR</em>. The high bit goes 0,0,0,1 — <em>that's AND</em>. Addition was hiding inside the gates all along.</>}
            </p>
            <p>
              {kids
                ? <>And the carry digit goes 0,0,0,1 — exactly AND's column! So one XOR plus one AND <em>is</em> an adding machine for two digits. Nobody "programmed" it. The arithmetic is built out of the wiring itself.</>
                : <>So: one XOR (sum) + one AND (carry) = a <em>half adder</em>. No program, no instructions — the arithmetic is the wiring. This is the moment "circuits" become "computers," and it's also the answer to chapter 5's cliffhanger about why switches matter so much.</>}
            </p>
            <div className="marg" style={{ marginTop: 14 }}>
              {kids
                ? <>Set both switches ON: the SUM lamp goes dark and the CARRY lights — the machine just wrote "10," which is binary for two!</>
                : <>Set 1+1: SUM drops to 0, CARRY rises — the pair reads "10₂" = 2. The machine added. Feel free to be impressed; 1937 Claude Shannon certainly was.</>}
            </div>
          </div>
          <div>
            <div className="card" style={{ padding: "24px 26px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>half adder · XOR + AND</div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Ch13Toggle on={a} label="A" onFlip={() => setA(v => !v)} color="var(--water)" />
                <Ch13Toggle on={b} label="B" onFlip={() => setB(v => !v)} color="var(--water)" />
              </div>
              <div style={{ display: "flex", justifyContent: "center", gap: 44, margin: "24px 0 8px" }}>
                <Ch13Lamp on={carry} label={kids ? "CARRY (AND)" : "CARRY · AND"} big />
                <Ch13Lamp on={sum} label={kids ? "SUM (XOR)" : "SUM · XOR"} big />
              </div>
              <div style={{ textAlign: "center", fontFamily: "IBM Plex Mono, monospace", fontSize: 20, marginTop: 8 }}>
                {a ? 1 : 0} + {b ? 1 : 0} = <b style={{ color: "var(--current-deep)" }}>{carry ? 1 : 0}{sum ? 1 : 0}</b>
                <span style={{ fontSize: 13, color: "var(--ink-faint)" }}> ₂</span>
                <span style={{ fontSize: 14, color: "var(--ink-soft)" }}>  ({(a ? 1 : 0) + (b ? 1 : 0)} in decimal)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── §04 the ripple adder ─────────────────────────────────────────────── */
function Ch13Ripple({ kids }) {
  const [a, setA] = useState([true, false]);   // [bit1(2s), bit0(1s)]
  const [b, setB] = useState([false, true]);
  const av = (a[0] ? 2 : 0) + (a[1] ? 1 : 0);
  const bv = (b[0] ? 2 : 0) + (b[1] ? 1 : 0);
  const total = av + bv;
  const bits = [(total >> 2) & 1, (total >> 1) & 1, total & 1];
  const flip = (which, i) => {
    (which === "a" ? setA : setB)(arr => arr.map((v, j) => j === i ? !v : v));
  };
  return (
    <section className="section" id="ripple" data-screen-label="04 Ripple adder">
      <div className="marker">§ 04 · stack it and it scales</div>
      <div className="section-inner">
        <div className="two-col">
          <div>
            <h2 className="serif">Chain the adders,<br/>and the carry <em>ripples</em>.</h2>
            <p className="lede">
              {kids
                ? <>One half adder handles one digit. For bigger numbers, line adders up like columns in pencil-and-paper addition — each column passes its carry to the next, like a little bucket brigade.</>
                : <>To add multi-bit numbers, chain adders column-by-column, each passing its carry leftward — exactly your grade-school algorithm, in copper. (Columns past the first need a <em>full</em> adder — a half adder upgraded to accept the incoming carry as a third input.)</>}
            </p>
            <p>
              {kids
                ? <>This two-digit machine is built from just FOUR gate-patterns from chapter 5. Your computer does the same thing — with 64 columns instead of 2, billions of times every second.</>
                : <>This 2-bit ripple adder is a handful of gates. A CPU's arithmetic unit is the same idea at 64 bits with cleverer carry plumbing — but nothing conceptually new. From here, multiplication is repeated addition, memory is gates holding their own output (feedback again!), and the rest is scale.</>}
            </p>
            <div className="marg" style={{ marginTop: 14 }}>
              {kids
                ? <>Try 3 + 3 — watch the carry ripple all the way into the third lamp: 110, which is six!</>
                : <>Try 3 + 3 = 110₂ and 2 + 1 = 011₂. Then remember: every spreadsheet cell, rendered frame, and autocorrected word bottoms out in exactly this.</>}
            </div>
          </div>
          <div>
            <div className="card" style={{ padding: "24px 26px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>2-bit ripple adder</div>
              {[{ k: "a", arr: a, val: av, name: "A" }, { k: "b", arr: b, val: bv, name: "B" }].map(row => (
                <div key={row.k} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10, flexWrap: "wrap" }}>
                  <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 14, width: 60 }}>{row.name} = {row.val}</span>
                  {row.arr.map((bit, i) => (
                    <Ch13Toggle key={i} on={bit} label={i === 0 ? "2s" : "1s"} onFlip={() => flip(row.k, i)} color="var(--water)" />
                  ))}
                </div>
              ))}
              <div style={{ borderTop: "1.5px solid var(--rule-strong)", margin: "16px 0", paddingTop: 14, display: "flex", justifyContent: "center", gap: 30 }}>
                <Ch13Lamp on={!!bits[0]} label="4s" big />
                <Ch13Lamp on={!!bits[1]} label="2s" big />
                <Ch13Lamp on={!!bits[2]} label="1s" big />
              </div>
              <div style={{ textAlign: "center", fontFamily: "IBM Plex Mono, monospace", fontSize: 20 }}>
                {av} + {bv} = <b style={{ color: "var(--current-deep)" }}>{bits.join("")}</b>
                <span style={{ fontSize: 13, color: "var(--ink-faint)" }}> ₂</span>
                <span style={{ fontSize: 14, color: "var(--ink-soft)" }}>  = {total}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── App ─────────────────────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  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: "gates", label: "Gates" },
    { id: "half", label: kids ? "It counts!" : "Half adder" },
    { id: "ripple", label: kids ? "Bigger sums" : "Ripple" },
    { id: "practice", label: "Practice" },
    { id: "quiz", label: "Quiz" },
  ];

  return (
    <>
      <ProgressBar />
      <TopBar currentN="13" audience={t.audience} setAudience={(a) => setTweak("audience", a)} />
      <ChapterNav items={navItems} />

      <main>
        <CoverPage chapterN="13"
                   chapterTitle={<>The <em>Adding Machine</em>.</>}
                   chapterSub="Logic gates that count"
                   kids={kids}
                   lede={kids
                     ? <>Chapter 5 promised that on/off switches secretly run the world. Time to pay that off: you're going to wire gates together until they do real math — with nobody doing the math.</>
                     : <>The payoff of chapter 5's binary cliffhanger: compose AND, OR, and one newcomer into a circuit that performs genuine arithmetic. No program, no magic — addition as a property of wiring.</>
                   }>
          <ChapterStartMarker chapterN="13" />
          <div className="marg">
            Level 1½ · builds on chapter 5 (switches & AND/OR). No math beyond counting to three.
          </div>
        </CoverPage>

        <Ch13Gates kids={kids} />

        <CheckpointQuiz kids={kids} label="Checkpoint 1" pick={2}
          title={kids ? "Quick check!" : "Did it stick?"}
          questions={[
            { q: "XOR lights when…", options: ["the inputs disagree — exactly one is on", "both are on", "both are off", "always"], correct: 0,
              explain: kids ? "It's the different-detector: one on AND one off. Matching inputs (both on or both off) leave it dark."
                            : "Exclusive-OR: high iff inputs differ. It's OR minus the both-on case." },
            { q: "AND, in chapter-5 plumbing, was…", options: ["two switches in series", "two switches in parallel", "a capacitor", "a pinch"], correct: 0,
              explain: kids ? "Gates in a row — the water needs BOTH open." : "Series switches: one path, every contact must close." },
            { q: "A hallway light controlled from BOTH ends of the hall behaves like…", options: ["XOR — either switch flips the result", "AND", "a dimmer", "a fuse"], correct: 0,
              explain: kids ? "Flip either switch and the light changes — it's on exactly when the two disagree!"
                            : "The 3-way switch arrangement is XOR in domestic disguise." },
            { q: kids ? "Why give the switch-patterns names like AND and OR?" : "Naming gate patterns matters because…",
              options: [kids ? "So you can build with them like LEGO bricks, without redrawing the pipes" : "sealed, named boxes compose — you stack them without re-deriving the internals",
                        kids ? "Names are prettier" : "it shortens datasheets", kids ? "You can't" : "gates require names to work", kids ? "For the quiz" : "no reason"], correct: 0,
              explain: kids ? "Once a pattern has a name, you can snap it together with other patterns and build BIG things fast."
                            : "Abstraction: verified once, reused forever. Every layer of computing is built this way." },
          ]} />

        <Ch13HalfAdder kids={kids} />
        <Ch13Ripple kids={kids} />

        <CheckpointQuiz kids={kids} label="Checkpoint 2" pick={2}
          title={kids ? "Spot it in real life!" : "Out in the wild."}
          questions={[
            { q: "A half adder's SUM and CARRY outputs are, respectively…", options: ["XOR and AND", "AND and OR", "OR and XOR", "two ANDs"], correct: 0,
              explain: kids ? "Last digit = the different-detector. Carry = the both-detector. Two gates, real adding!"
                            : "Sum = A⊕B, Carry = A·B. The addition table's two columns, as gates." },
            { q: "1 + 1 on the half adder shows…", options: ["SUM 0, CARRY 1 — binary '10'", "SUM 1, CARRY 1", "SUM 1, CARRY 0", "nothing"], correct: 0,
              explain: kids ? "Two in binary is '10' — a zero, carry the one. Just like carrying in regular adding!"
                            : "1+1 = 10₂: XOR(1,1)=0, AND(1,1)=1." },
            { q: kids ? "How does a computer add BIG numbers?" : "Multi-bit addition works by…",
              options: [kids ? "A column of adders passing carries along, like pencil-and-paper math" : "chaining full adders, each passing its carry to the next column",
                        kids ? "A really big single switch" : "one giant gate", kids ? "Asking the internet" : "lookup tables only", kids ? "Magic" : "analog summing"], correct: 0,
              explain: kids ? "Same as you do it on paper — column by column, carry the one. Just… really fast."
                            : "Ripple carry: the grade-school algorithm in hardware. CPUs add lookahead tricks, but the concept stands." },
            { q: "What 'programs' a half adder to do arithmetic?", options: ["Nothing — the arithmetic IS the wiring", "Software", "The factory", "A tiny CPU inside"], correct: 0,
              explain: kids ? "Nobody tells it to add. The pipes themselves can't do anything else!"
                            : "The truth table is baked into topology. Computation as physics — Shannon's 1937 insight." },
          ]} />

        <PracticeProblems chapterN="13" kids={kids} problems={[
          (rng) => {
            const a = rng.int(0, 3), b = rng.int(0, 3);
            return {
              q: { adult: `In binary: ${a.toString(2).padStart(2, "0")} + ${b.toString(2).padStart(2, "0")} = ? (answer in decimal)`,
                   kids: `The adding machine gets ${a} + ${b}. What number do its lamps show (in regular counting)?` },
              unit: "", answer: a + b,
              hint: { adult: "Convert, add, or just add in decimal — the machine agrees either way.", kids: "Just add them — the lamps always agree with regular math!" },
              solution: { adult: `${a} + ${b} = ${a + b} = ${(a + b).toString(2)}₂.`, kids: `${a} + ${b} = ${a + b}. In lamp-language: ${(a + b).toString(2)}.` },
            };
          },
          (rng) => {
            const a = rng.pick([0, 1]), b = rng.pick([0, 1]);
            return {
              q: { adult: `Half adder inputs A=${a}, B=${b}. What does CARRY read?`,
                   kids: `The both-detector (CARRY) sees A=${a} and B=${b}. Does it light? (1 = yes, 0 = no)` },
              unit: "", answer: a && b ? 1 : 0,
              hint: { adult: "Carry = AND.", kids: "It lights only if BOTH are 1." },
              solution: { adult: `AND(${a},${b}) = ${a && b ? 1 : 0}.`, kids: `${a === 1 && b === 1 ? "Both on — it lights: 1." : "Not both on — dark: 0."}` },
            };
          },
          (rng) => {
            const n = rng.pick([5, 6, 9, 10, 12]);
            return {
              q: { adult: `How many bits (lamps) do you need to display the number ${n} in binary?`,
                   kids: `You want lamps to show the number ${n} in lamp-language (binary). How many lamps do you need?` },
              unit: "", answer: n.toString(2).length,
              hint: { adult: "Smallest k with 2^k > n.", kids: "Lamps count 1, 2, 4, 8… how many until you can reach it?" },
              solution: { adult: `${n} = ${n.toString(2)}₂ — ${n.toString(2).length} bits.`, kids: `${n} is ${n.toString(2)} in lamps — that's ${n.toString(2).length} lamps.` },
            };
          },
        ]} />

        <ChapterQuiz chapterN="13" pick={5}
          title={kids ? "Quick quiz!" : "Check your understanding."}
          questions={kids ? [
            { q: "The different-detector (XOR) is dark when…", kind: "concept", options: ["the inputs match", "the inputs disagree", "always", "never"], correct: 0,
              explain: "Matching inputs — both on or both off — leave it dark. Disagreement lights it." },
            { q: "The SUM lamp of the adding machine is really…", kind: "concept", options: ["an XOR gate", "an AND gate", "a battery", "a bucket"], correct: 0,
              explain: "The answer's last digit goes 0,1,1,0 — exactly the different-detector's column!" },
            { q: "The CARRY lamp is really…", kind: "concept", options: ["an AND gate", "an OR gate", "a switch", "a pinch"], correct: 0,
              explain: "Carry happens only for 1+1 — only when BOTH are on. That's AND." },
            { q: "1 + 1 in lamp-language is…", kind: "concept", options: ["10", "2", "11", "0"], correct: 0,
              explain: "A zero, carry the one: '10' means two!" },
            { q: "To add bigger numbers, the machine…", kind: "concept", options: ["chains columns that pass the carry along", "uses a bigger lamp", "asks you", "can't"], correct: 0,
              explain: "Column by column, carry the one — a bucket brigade of little adders." },
            { q: "Who does the math inside the adding machine?", kind: "concept", options: ["Nobody — the wiring itself is the math", "A tiny calculator", "The battery", "You do"], correct: 0,
              explain: "The pipes can only behave one way — and that way happens to be addition!" },
          ] : [
            { q: "XOR's truth column for inputs 00, 01, 10, 11 is…", kind: "concept", options: ["0, 1, 1, 0", "0, 0, 0, 1", "0, 1, 1, 1", "1, 0, 0, 1"], correct: 0,
              explain: "High iff inputs differ — and identical to binary addition's low bit." },
            { q: "A half adder consists of…", kind: "concept", options: ["XOR (sum) + AND (carry)", "two ORs", "OR + NOT", "four NANDs minimum"], correct: 0,
              explain: "The two columns of the 2-bit addition table, implemented directly. (NAND-only builds exist, but this is the canonical pair.)" },
            { q: "A FULL adder differs from a half adder by…", kind: "concept", options: ["accepting an incoming carry as a third input", "being twice as fast", "using XNOR", "having two outputs"], correct: 0,
              explain: "Columns past the first must add A + B + carry-in. Half adders only handle two inputs." },
            { q: "Ripple-carry addition is slow for wide numbers because…", kind: "concept", options: ["each column must wait for the previous column's carry", "gates wear out", "binary is inefficient", "voltage drops"], correct: 0,
              explain: "The carry propagates serially. Real ALUs add carry-lookahead to parallelize it — engineering, not new concepts." },
            { q: "Computer memory, at the gate level, is…", kind: "concept", options: ["gates feeding their own outputs back — holding a state", "tiny capacitors only", "magnetized wires", "software"], correct: 0,
              explain: "Cross-coupled gates latch a bit — feedback again, chapter 12's idea in digital clothing. (DRAM does also use capacitors — chapter 4 never dies.)" },
            { q: "Shannon's 1937 insight was…", kind: "concept", options: ["switch circuits implement Boolean logic — and thus arithmetic", "the transistor", "Ohm's law", "the telegraph"], correct: 0,
              explain: "His master's thesis connected switching circuits to Boole's algebra — arguably the founding document of digital design." },
            { q: "Adding 3-bit binary 101 + 011, the ripple-carry chain must resolve columns…", kind: "math", options: ["in parallel, all at once", "one at a time, right to left, each waiting on the previous carry", "left to right only", "in any order"], correct: 1,
              explain: "101 + 011 = 1000. Each column's carry depends on the one before it — that dependency is exactly why ripple-carry is serial, not parallel." },
          ]} />

        <WhatsNext currentN="13" kids={kids}
          summary={kids
            ? <>Switch-patterns got names (AND, OR, XOR), the names turned out to secretly be an adding table, and chaining them adds any number. Computers aren't magic — they're plumbing with very good vocabulary.</>
            : <>Gates are named switch topologies; XOR+AND happen to BE the binary addition table; chaining full adders scales it. Computation falls out of wiring — the rest of computer architecture is this, repeated with taste.</>}
          prevHref="chapter12.html" prevLabel="Ch. 12 · The Gatekeeper"
          nextHref="map.html" nextLabel="Back to the course map" />
      </main>

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

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