/* chapter-l2-oscillator.jsx — Level 2 · Chapter 8: The Oscillator.
   Build a blinker from scratch (2-transistor astable) BEFORE meeting the 555,
   then crack the chip open. Applies Ch4 (capacitors) + Ch6 (transistor).
   Uses AstableScene + Timer555Scene from visuals555.jsx. */

const { useState, useEffect } = React;

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

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

  // discrete astable controls
  const [rAst, setRAst] = useState(47);   // kΩ
  const [cAst, setCAst] = useState(10);   // µF
  // 555 controls
  const [ra, setRa] = useState(10);       // kΩ
  const [rb, setRb] = useState(47);       // kΩ
  const [c5, setC5] = useState(10);       // µF
  const f555 = 1.44 / ((ra + 2 * rb) * 1000 * c5 * 1e-6);

  const navItems = [
    { id: "cover", label: "Cover" },
    { id: "recall", label: kids ? "Remember" : "Recall" },
    { id: "blinker", label: kids ? "From scratch" : "The astable" },
    { id: "guts", label: kids ? "Inside the chip" : "The 555 inside" },
    { id: "bench", label: kids ? "Wire one" : "Wire it" },
    { id: "tune", label: kids ? "Tune it" : "Design" },
    { id: "practice", label: "Practice" },
    { id: "quiz", label: "Quiz" },
    { id: "whats-next", label: "What's next" },
  ];

  return (
    <>
      <ChapterStartMarker chapterN="L2-08" />
      <ProgressBar />
      <TopBar currentN="L2-08" chapterLabel="Level 2 · The Oscillator"
              audience={t.audience}
              setAudience={(v) => setTweak("audience", v)} />
      <ChapterNav items={navItems} />

      <main>
        {/* ── cover ── */}
        <section className="cover-page" id="cover" data-screen-label="L2-08 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 2 · applied</span>
              <span className="eyebrow" style={{ color: "var(--ink-faint)" }}>·</span>
              <span className="eyebrow">Chapter 8</span>
            </div>
            <h1 className="serif cover-title">The <em>Oscillator</em>.</h1>
            <div className="eyebrow" style={{ marginTop: 36, marginBottom: 16, color: "var(--current)" }}>
              Applying Chapter 4 · Capacitors  +  Chapter 6 · The Transistor
            </div>
            <div className="cover-lede">
              {kids
                ? <>The Beacon needs to <em>flash</em>. There's a famous little chip that does it — but first, let's build a blinker with our own bare parts, so the chip stops being magic.</>
                : <>Every blinker, every clock, every beep starts with one trick: a circuit that flips back and forth on its own. We'll build one from scratch with two transistors and two capacitors — then crack open the chip that packages it: the <em>555</em>.</>}
            </div>
            <div className="cover-cta">
              <a href="#recall" className="arrow-link"><span>Begin chapter</span><span className="arrow-glyph">↓</span></a>
            </div>
          </div>
        </section>

        {/* ── recall ── */}
        <section className="section" id="recall" data-screen-label="Recall">
          <div className="marker">§ 01 · two things you already own</div>
          <div className="section-inner">
            <h2 className="serif">{kids ? "A bucket that fills, and a switch you can trigger." : "An RC delay, and a transistor switch."}</h2>
            <p className="lede" style={{ maxWidth: "44em" }}>
              {kids
                ? <>You've met both pieces already. A <em>capacitor</em> is a bucket that fills up over time (Chapter 4). A <em>transistor</em> is a switch a tiny signal can flip (Chapter 6). Put them together and something new happens — the circuit starts flipping <em>by itself</em>.</>
                : <>You have both ingredients. From Chapter 4: a capacitor charges through a resistor on a τ = R·C clock. From Chapter 6: a transistor is a switch flipped by a small base current. Wire two of each so that each side's charging cap eventually switches the <em>other</em> side — and the circuit never settles. That's an oscillator.</>}
            </p>
            <div className="card" style={{ background: "transparent", padding: "18px 20px", marginTop: 16, maxWidth: 600 }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{kids ? "the big idea" : "key idea"}</div>
              <p style={{ margin: 0, fontSize: 16, color: "var(--ink-soft)" }}>
                {kids
                  ? <>A bucket alone can't blink — it just fills once and stops. You need a <em>switch</em> that flips when the bucket is full. Two of them, taking turns, blink forever.</>
                  : <>R and C alone cannot oscillate — they only charge once and rest. Oscillation needs an active switching element. The transistor is that element; the cap sets the tempo.</>}
              </p>
            </div>
          </div>
        </section>

        {/* ── the astable ── */}
        <section className="section" id="blinker" data-screen-label="The astable"
                 style={{ background: "var(--bg-deeper)" }}>
          <div className="marker">§ 02 · build it from scratch · the astable multivibrator</div>
          <div className="section-inner" style={{ maxWidth: 1180 }}>
            <h2 className="serif" style={{ marginBottom: 10 }}>{kids ? "Two lights that take turns." : "Two transistors, taking turns."}</h2>
            <p className="lede" style={{ marginBottom: 22, maxWidth: "44em" }}>
              {kids
                ? <>Here are two transistors, each with its own light and its own bucket. When one side's bucket fills, it flips the other side off — so the two lights blink back and forth, forever. Try bigger buckets or tighter pipes and watch the blink slow down.</>
                : <>This is the classic <em>astable multivibrator</em>. Each side charges a cap that, once full enough, switches the opposite transistor — so the two collectors (and their LEDs) alternate. The blink rate is set entirely by R and C: T ≈ 1.38·R·C.</>}
            </p>

            <div className="osc-stage">
              <div className="osc-scene">
                <AstableScene R={rAst} C={cAst} kids={kids} height={400} />
              </div>
              <div className="osc-controls">
                <div className="osc-ctrl-head">{kids ? "play with it" : "tune R and C"}</div>
                <Slider name={kids ? "Pipe (R)" : "Resistor R"} value={rAst} min={10} max={150} step={1}
                        unit=" kΩ" accent="current" onChange={setRAst}
                        hint={kids ? "tighter pipe = slower fill" : "timing resistor on each base"} />
                <Slider name={kids ? "Bucket (C)" : "Capacitor C"} value={cAst} min={1} max={100} step={1}
                        unit=" µF" accent="water" onChange={setCAst}
                        hint={kids ? "bigger bucket = slower blink" : "cross-coupling timing cap"} />
                <div className="card" style={{ background: "var(--bg-deeper)", padding: "12px 14px" }}>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>{kids ? "blink speed" : "period"}</div>
                  <div className="mono" style={{ fontSize: 18, color: "var(--ink)" }}>
                    {(1.38e-3 * rAst * cAst).toFixed(2)} s <span style={{ color: "var(--ink-faint)", fontSize: 13 }}>/ cycle</span>
                  </div>
                  <div className="marg" style={{ marginTop: 6 }}>
                    {kids ? "longer = slower blinking" : `≈ ${(1 / (1.38e-3 * rAst * cAst)).toFixed(1)} Hz · T ≈ 1.38·R·C`}
                  </div>
                </div>
              </div>
            </div>

            <p className="note" style={{ marginTop: 16, maxWidth: "44em" }}>
              {kids
                ? <>It works! But notice: that's <em>eight</em> parts just to blink two lights. Engineers got tired of wiring this every time…</>
                : <>It works — but it's eight-plus parts, the duty cycle is awkward to make even, and the timing drifts with temperature and supply. Engineers wanted this in one tidy, predictable package.</>}
            </p>
          </div>
        </section>

        {/* ── the 555 inside ── */}
        <section className="section" id="guts" data-screen-label="The 555 inside">
          <div className="marker">§ 03 · the same idea, in one chip · crack it open</div>
          <div className="section-inner" style={{ maxWidth: 1180 }}>
            <h2 className="serif" style={{ marginBottom: 10 }}>{kids ? "Inside the 555: a referee and a bucket." : "Inside the 555."}</h2>
            <p className="lede" style={{ marginBottom: 20, maxWidth: "46em" }}>
              {kids
                ? <>The 555 chip hides a tiny <em>referee</em> that watches one bucket. When the bucket gets to ⅔ full, the referee shouts "stop!" and empties it. When it drops to ⅓, it shouts "go!" and fills it again. Up, down, up, down — that's your blink, and the light follows along.</>
                : <>It's not magic — it's exactly what you just built, made precise. Three 5 kΩ resistors (that's the "555") set two reference levels: ⅓ and ⅔ of Vcc. Two comparators watch the cap against those levels and drive a flip-flop. The flip-flop runs the output and a discharge transistor. The cap ramps between ⅓ and ⅔ forever.</>}
            </p>

            <PredictReveal
              accent="current"
              question={kids
                ? "When the bucket inside the chip reaches ⅔ full, what happens to the light?"
                : "When the timing cap charges up to ⅔ Vcc, the comparator trips the flip-flop. The output then…"}
              options={kids
                ? ["It turns ON brighter", "It turns OFF and the bucket starts emptying", "Nothing happens", "The chip breaks"]
                : ["stays high and the cap keeps charging", "goes low; the discharge transistor pulls the cap back down toward ⅓ Vcc", "latches high forever", "shorts Vcc to ground"]}
              correct={1}
              explanation={kids
                ? "At ⅔ full the referee flips the light OFF and opens a drain, so the bucket falls back to ⅓ — then it flips ON again. That back-and-forth is the blink."
                : "Reaching ⅔ Vcc resets the flip-flop: output goes low and the discharge transistor turns on, draining the cap through RB until it hits ⅓ Vcc, which sets it again. The cap sawtooths between ⅓ and ⅔ Vcc."}
            />

            <div className="t555-wrap" style={{ marginTop: 22 }}>
              <Timer555Scene RA={ra} RB={rb} C={c5} kids={kids} height={430} />
              <div className="t555-controls">
                <Slider name={kids ? "Fill pipe A (RA)" : "RA"} value={ra} min={1} max={100} step={1}
                        unit=" kΩ" accent="current" onChange={setRa}
                        hint={kids ? "affects on-time only" : "charge path: Vcc→RA→RB→C"} />
                <Slider name={kids ? "Pipe B (RB)" : "RB"} value={rb} min={1} max={100} step={1}
                        unit=" kΩ" accent="current" onChange={setRb}
                        hint={kids ? "affects on and off" : "discharge path: C→RB→DIS"} />
                <Slider name={kids ? "Bucket (C)" : "Timing C"} value={c5} min={1} max={100} step={1}
                        unit=" µF" accent="water" onChange={setC5}
                        hint={kids ? "bigger = slower blink" : "scales the whole period"} />
              </div>
            </div>
          </div>
        </section>

        {/* ── hands-on: wire a 555 yourself ── */}
        <section className="section" id="bench" data-screen-label="Wire a 555">
          <div className="marker">§ 04 · now wire one yourself · the timing network</div>
          <div className="section-inner" style={{ maxWidth: 1180 }}>
            <h2 className="serif" style={{ marginBottom: 10 }}>{kids ? "Wire your own 555 blinker." : "Wire the 555 yourself."}</h2>
            <p className="lede" style={{ marginBottom: 22, maxWidth: "46em" }}>
              {kids
                ? <>You've seen inside the chip — now build the outside. The 555's power pins are already hooked up. Add the two pipes, the bucket, the jumper, and the light, then switch it on and watch the wave.</>
                : <>You've seen the guts; now wire the parts that make it tick. The power pins (1, 4, 8) are pre-connected — you place Rₐ, Rᵇ, the timing cap, the THR↔TRG jumper, and the LED output, then power up and scope the real square wave.</>}
            </p>
            <Osc555Bench kids={kids} />
          </div>
        </section>

        {/* ── design gate / tune ── */}
        <section className="section" id="tune" data-screen-label="Design"
                 style={{ background: "var(--bg-deeper)" }}>
          <div className="marker">§ 05 · your turn · size the blink</div>
          <div className="section-inner" style={{ maxWidth: 1180 }}>
            <h2 className="serif" style={{ marginBottom: 10 }}>{kids ? "How fast will it blink?" : "Predict the frequency, then tune it."}</h2>
            <p className="lede" style={{ marginBottom: 24, maxWidth: "44em" }}>
              {kids
                ? <>Before you play with the sliders above, work out the blink rate for one set of parts. Engineers always do the math first — then check it on the bench.</>
                : <>The Beacon's blink engine is a 555 in astable mode. Compute its frequency from the parts, then go back up and tune the sliders to feel how RA, RB, and C trade off.</>}
            </p>
            <DesignGate kids={kids} chapterN="L2-08"
              spec={{ adult: "A 555 in astable mode with RA = 10 kΩ, RB = 47 kΩ, and C = 10 µF.",
                      kids: "A 555 blinker with a 10 kΩ pipe A, a 47 kΩ pipe B, and a 10 µF bucket." }}
              prompt={{ adult: "What is the output frequency? (Answer in Hz.)",
                        kids: "About how many times per second does it blink? (per second)" }}
              formula={{ adult: "f = 1.44 / ((RA + 2·RB) · C)", kids: "blinks/sec = 1.44 ÷ ((A + 2·B) × bucket)" }}
              unit="Hz" answer={1.38} tol={0.1}
              hint={{ adult: "RA + 2·RB = 10k + 94k = 104 kΩ = 104000 Ω. C = 10 µF = 1e−5 F.",
                      kids: "10 + 2×47 = 104 (in kΩ). Then 1.44 ÷ (104000 × 0.00001)." }}
              solution={{ adult: "f = 1.44 / (104000 × 1e−5) = 1.44 / 1.04 ≈ 1.38 Hz — just over one blink a second.",
                          kids: "1.44 ÷ 1.04 ≈ 1.4 — a touch faster than one blink each second." }}>
              <div className="card" style={{ background: "var(--bg-card)", padding: "18px 20px" }}>
                <div className="eyebrow" style={{ marginBottom: 8, color: "var(--current)" }}>nicely done — now feel it</div>
                <p style={{ margin: 0, fontSize: 16, color: "var(--ink-soft)" }}>
                  {kids
                    ? <>Scroll back up to the chip and drag the sliders. Make the biggest bucket — see how slow you can make it blink. That same chip is the heart of your Beacon!</>
                    : <>Scroll up to the live 555 and tune RA, RB, and C. Notice RA only stretches the on-time, RB stretches both, and C scales everything. This exact circuit drives the Beacon's flash.</>}
                </p>
              </div>
            </DesignGate>
          </div>
        </section>

        {/* ── practice ── */}
        <PracticeProblems chapterN="L2-08" kids={kids}
          intro={kids ? "Blink-rate puzzles for your timer." : "555 timing design math. Enter a number and check it."}
          problems={[
          (rng) => {
            const ra = rng.pick([1, 4.7, 10]), rb = rng.pick([22, 47, 68]), c = rng.pick([1, 10, 47]);
            const f = +(1.44 / ((ra + 2 * rb) * 1000 * c * 1e-6)).toFixed(2);
            return {
              q: { adult: `A 555 astable uses RA = ${ra} kΩ, RB = ${rb} kΩ, C = ${c} µF. What's the frequency? (Hz)`,
                   kids: `A blinker has pipe A = ${ra} kΩ, pipe B = ${rb} kΩ, bucket = ${c} µF. Blinks per second?` },
              unit: "Hz", answer: f, tol: 0.1,
              hint: `f = 1.44 / ((RA + 2·RB) · C); use ohms and farads.`,
              solution: { adult: `RA+2RB = ${ra + 2 * rb} kΩ = ${(ra + 2 * rb) * 1000} Ω; f = 1.44 / (${(ra + 2 * rb) * 1000} × ${c}e−6) ≈ ${f} Hz.`,
                          kids: `1.44 ÷ ((${ra}+2×${rb}) × ${c}, scaled) ≈ ${f}.` } };
          },
          (rng) => {
            const rab = rng.pick([20, 50, 80]), c = rng.pick([1, 10, 22]);
            const th = +(0.693 * rab * 1000 * c * 1e-6).toFixed(3);
            return {
              q: { adult: `The charge path (RA+RB) is ${rab} kΩ into a ${c} µF cap. How long is the output HIGH each cycle? (seconds)`,
                   kids: `The fill path is ${rab} kΩ into a ${c} µF bucket. How long is the light ON each time? (seconds)` },
              unit: "s", answer: th, tol: 0.1,
              hint: `t_high = 0.693 · (RA+RB) · C.`,
              solution: { adult: `t_high = 0.693 × ${rab * 1000} × ${c}e−6 ≈ ${th} s.`, kids: `0.693 × ${rab} × ${c} (scaled) ≈ ${th} s.` } };
          },
          (rng) => {
            const ra = rng.pick([10, 20, 33]), rb = rng.pick([33, 47, 68]);
            const duty = +(100 * (ra + rb) / (ra + 2 * rb)).toFixed(0);
            return {
              q: { adult: `With RA = ${ra} kΩ and RB = ${rb} kΩ, what's the duty cycle (percent of time HIGH)?`,
                   kids: `With pipe A = ${ra} kΩ and pipe B = ${rb} kΩ, what percent of the time is the light ON?` },
              unit: "%", answer: duty, tol: 0.08,
              hint: `duty = (RA + RB) / (RA + 2·RB) × 100.`,
              solution: { adult: `(${ra}+${rb}) / (${ra}+${2 * rb}) × 100 ≈ ${duty}% — always above 50% with this basic wiring.`,
                          kids: `(${ra}+${rb}) ÷ (${ra}+${2 * rb}) ≈ ${duty}%.` } };
          },
        ]} />

        {/* ── quiz ── */}
        <ChapterQuiz
          chapterN="L2-08"
          title={kids ? "Quick quiz!" : "Check your understanding."}
          intro={kids ? "Five questions about blinkers and the 555." : "Oscillators & the 555. 70% to pass; retry freely."}
          questions={kids ? OSC_QUIZ_KIDS : OSC_QUIZ_ADULT}
          pick={5}
        />

        <WhatsNext
          currentN="L2-08"
          kids={kids}
          summary={kids
            ? <>You built a blinker from bare parts <em>and</em> learned what's hiding inside the 555 — the chip that makes your Beacon flash. Time to assemble the whole thing!</>
            : <>You built an oscillator from scratch and opened up the 555 that packages it. That blink engine is the last piece — next you assemble the entire Beacon.</>}
          prevHref="chapter-l2-rectifier.html"
          prevLabel="L2 · The Rectifier"
          nextHref="chapter-l2-beacon.html"
          nextLabel="L2 · Assemble the Beacon"
        />
      </main>

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

const OSC_QUIZ_ADULT = [
  { q: "Why can't a resistor and capacitor alone make a light blink?", kind: "concept", options: ["They get too hot", "They have no active switching element — RC just charges once and rests", "Capacitors can't store charge", "Resistors block all current"], correct: 1, explain: "Oscillation needs something that flips state — a transistor (or the comparators inside a 555). RC only sets the timing." },
  { q: "In the two-transistor astable, the blink period is roughly…", kind: "math", options: ["R + C", "1.38 · R · C", "R / C", "independent of R and C"], correct: 1, explain: "T ≈ 1.38·R·C — each half is ~0.69·R·C, set by the cap charging through the timing resistor." },
  { q: "The '555' in the chip's name refers to…", kind: "concept", options: ["555 transistors inside", "three 5 kΩ resistors forming its voltage divider", "a 555 Hz output", "the year it was invented"], correct: 1, explain: "Three 5 kΩ resistors set the ⅓ and ⅔ Vcc reference levels for the two comparators." },
  { q: "In a 555 astable, the timing capacitor oscillates between…", kind: "concept", options: ["0 V and Vcc", "⅓ Vcc and ⅔ Vcc", "−Vcc and +Vcc", "a fixed steady voltage"], correct: 1, explain: "The two comparators flip the flip-flop at ⅓ and ⅔ Vcc, so the cap sawtooths between those levels." },
  { q: "The 555 output frequency is given by…", kind: "math", options: ["f = R · C", "f = 1.44 / ((RA + 2·RB) · C)", "f = (RA + RB) / C", "f = 1 / (RA · RB)"], correct: 1, explain: "f = 1.44 / ((RA + 2·RB)·C). Bigger resistors or cap → lower frequency." },
  { q: "While the 555's discharge transistor is ON, the output is…", kind: "concept", options: ["high, cap charging", "low, cap discharging through RB toward ⅓ Vcc", "floating", "destroyed"], correct: 1, explain: "Output low and discharge on go together: the cap drains through RB until it hits ⅓ Vcc and flips again." },
  { q: "Compared with the discrete astable, the 555 mainly buys you…", kind: "concept", options: ["more parts to wire", "precision, stability, and one tidy package", "the ability to blink at all", "lower voltage only"], correct: 1, explain: "The discrete version blinks fine — the 555 just makes it predictable, stable, and compact." },
  {
    q: "The discrete two-transistor astable and the 555 astable both blink using the SAME underlying idea. What is it?",
    kind: "concept",
    options: [
      "Neither actually uses a capacitor",
      "A capacitor charges toward a threshold, something flips when it's crossed, and the flip resets the charge — repeat forever",
      "They use completely unrelated physics",
      "Both rely on a mechanical clock",
    ],
    correct: 1,
    explain: "Fill → trip → dump → repeat. Whether the 'tripwire' is a transistor's turn-on voltage or the 555's internal comparators, every self-blinking circuit in this course reduces to this one RC loop.",
  },
];

const OSC_QUIZ_KIDS = [
  { q: "To make a light blink by itself, you need a bucket AND a…", kind: "concept", options: ["bigger battery", "switch that flips when the bucket is full", "longer wire", "magnet"], correct: 1, explain: "A switch (transistor) that flips when the bucket fills — that's what makes it go back and forth." },
  { q: "In the two-light blinker, the two lights…", kind: "concept", options: ["are always both on", "take turns, on and off", "never light", "explode"], correct: 1, explain: "They take turns — while one bucket fills, the other light is on. Then they swap." },
  { q: "A BIGGER bucket (capacitor) makes the blink…", kind: "concept", options: ["faster", "slower", "stop", "louder"], correct: 1, explain: "Bigger bucket takes longer to fill, so the blink slows down." },
  { q: "Inside the 555, the 'referee' watches the bucket and flips at…", kind: "concept", options: ["only when full", "⅓ full and ⅔ full", "never", "random times"], correct: 1, explain: "At ⅔ full it empties; at ⅓ it fills again. Up and down, forever." },
  { q: "Why use the 555 chip instead of building the blinker yourself?", kind: "concept", options: ["It's the only way to blink", "It packs the whole thing into one tidy, reliable part", "It needs no battery", "It's slower"], correct: 1, explain: "You CAN build it yourself — the chip just does it in one neat, dependable package." },
  {
    q: "In the two-light blinker, while one bucket fills…",
    kind: "concept",
    options: ["both lights are off", "the other light is on", "the battery rests", "nothing happens"],
    correct: 1,
    explain: "They take turns: fill on one side, glow on the other, then swap.",
  },
  {
    q: "Engineers made the 555 chip because wiring the blinker from scratch was…",
    kind: "concept",
    options: ["impossible", "lots of parts every time", "too colorful", "against the rules"],
    correct: 1,
    explain: "It works with bare parts — the chip just packs the whole trick into one tidy piece.",
  },
  {
    q: "Make the pipe (R) tighter in the blinker and the blinking gets…",
    kind: "math",
    options: ["faster", "slower", "louder", "brighter"],
    correct: 1,
    explain: "A tighter pipe fills the bucket more slowly — longer waits between flips.",
  },
  {
    q: "Both blinkers in this chapter — the one with two lights and the one with the special chip — work by the SAME trick. What is it?",
    kind: "concept",
    options: [
      "They don't share anything in common",
      "Fill the bucket, flip something when it hits a mark, empty it, and repeat forever",
      "Both need a spinning motor",
      "Both need you to press a button every time",
    ],
    correct: 1,
    explain: "Every self-blinking circuit in this course is the same loop: fill, trip, dump, repeat — whether the tripwire is a transistor or the fancy chip.",
  },
];

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