/* teachers.jsx — "For teachers & homeschoolers": run the course as a class.
   Hours are computed live from the chapter lists in shared.jsx (min fields),
   so they stay correct as the curriculum grows. */

const { useEffect } = React;

const TCH_TWEAK_DEFAULTS = { theme: "paper", audience: "adult" };

function tchHours(list) {
  const min = list.reduce((s, c) => s + (c.min || 0), 0);
  const h = min / 60;
  return h >= 10 ? Math.round(h) : Math.round(h * 2) / 2;
}

function TchSection({ eyebrow, title, lede, children, topRule = true }) {
  return (
    <section style={{ padding: "40px 0 60px", borderTop: topRule ? "1px solid var(--rule)" : "none" }}>
      {eyebrow && <div className="eyebrow" style={{ color: "var(--current)", marginBottom: 14 }}>{eyebrow}</div>}
      <h2 className="serif" style={{ fontFamily: "Newsreader, serif", fontWeight: 400, fontSize: "clamp(34px, 4.4vw, 56px)", margin: "0 0 28px" }}>
        {title}
      </h2>
      {lede && <p className="lede" style={{ fontSize: 19, color: "var(--ink-soft)", maxWidth: "34em" }}>{lede}</p>}
      {children}
    </section>
  );
}

function TchCardGrid({ cards, minW = 260 }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(auto-fit, minmax(${minW}px, 1fr))`, gap: 18, marginTop: 32 }}>
      {cards.map(c => (
        <div key={c.title} style={{ border: "1px solid var(--rule)", borderRadius: 10, background: "var(--bg-card)", padding: "22px 24px" }}>
          <h3 style={{ fontFamily: "Newsreader, serif", fontWeight: 400, fontStyle: "italic", fontSize: 22, lineHeight: 1.2, margin: "0 0 10px" }}>
            {c.title}
          </h3>
          <p style={{ color: "var(--ink-soft)", lineHeight: 1.55, margin: 0 }}>{c.body}</p>
          {c.link && <p style={{ margin: "12px 0 0" }}><a href={c.link.href}>{c.link.label}</a></p>}
        </div>
      ))}
    </div>
  );
}

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

  const hTheory = tchHours(ALL_CHAPTERS);
  const hBuild  = tchHours(L2_CHAPTERS.filter(c => c.ready !== false));
  const hStory  = tchHours(L0_CHAPTERS);
  const hMath   = tchHours(M_CHAPTERS);
  const hCore   = tchHours([...ALL_CHAPTERS, ...L2_CHAPTERS.filter(c => c.ready !== false)]);

  return (
    <>
      <TopBar audience={t.audience} setAudience={(v) => setTweak("audience", v)} />
      <main className="home">

        {/* Hero */}
        <section style={{ paddingBottom: 40, borderBottom: "1px solid var(--rule)" }}>
          <div className="badges" style={{
            display: "flex", gap: "8px 14px", marginBottom: 14,
            fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
            letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-faint)",
          }}>
            <a href="index.html" style={{ border: "none", color: "var(--ink-soft)" }}>← Home</a>
            <span>·</span>
            <span>For teachers</span>
          </div>
          <h1 style={{
            fontFamily: "Newsreader, serif", fontWeight: 400,
            fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 0.96,
            letterSpacing: "-0.015em", margin: "10px 0 24px",
          }}>
            Run it as a class.
          </h1>
          <p className="lede" style={{ fontSize: 22, maxWidth: "34em", color: "var(--ink-soft)" }}>
            The whole course is free, needs no accounts or installs, and runs in
            any modern browser. Students read, predict, and experiment at their
            own pace; every chapter ends in a quiz that must be passed to earn
            the checkmark. Here's how to use it with a class or at the kitchen
            table.
          </p>
        </section>

        {/* Why it works */}
        <TchSection topRule={false} eyebrow="Why it fits a classroom" title="Built for self-paced learning.">
          <TchCardGrid cards={[
            { title: "Nothing to set up.",
              body: "No accounts, no logins, no student data collected. Open the site and start. Works on school Chromebooks, tablets, and home computers alike." },
            { title: "Predict before reveal.",
              body: "Chapters pause and ask students to commit to a prediction before showing the answer — ready-made moments for a class discussion or a show of hands." },
            { title: "One page, two depths.",
              body: "The Explorer/Engineer toggle at the top of every chapter rewrites the prose (and hides the equations) without changing the visuals — mixed-age groups can share one lesson plan." },
            { title: "Earned checkmarks.",
              body: "A chapter counts as complete only when its end-of-chapter quiz is passed (70%, retry freely). The dashboard shows exactly where each student stands." },
            { title: "Theory, then hands.",
              body: "Every theory chapter has a matching breadboard build in Level 2, first on a virtual breadboard, then — if you have parts — for real." },
            { title: "Spaced review built in.",
              body: "Today's Drill serves a short daily mixed quiz from everything already covered — a ready-made warm-up for the start of each session." },
          ]} />
        </TchSection>

        {/* Hours & arcs */}
        <TchSection eyebrow="Scope & pacing" title="How much time it takes."
          lede="Times are computed from the chapters themselves and assume a focused reader; classes discussing as they go should plan for roughly double.">
          <TchCardGrid minW={220} cards={[
            { title: `Core course · ~${hCore} h`,
              body: "Ten theory chapters (Level 1) plus the breadboard build track (Level 2), each ending in a quiz, each level ending in an exam." },
            { title: `Story track · ~${hStory} h`,
              body: "Five short history chapters — Volta to the transistor. Ungated; works as homework reading or a gentle on-ramp." },
            { title: `Math support · ~${hMath} h`,
              body: "Five ten-minute units (rearranging equations, powers of ten, reading graphs…) for students who need the toolkit." },
            { title: "Electives · optional",
              body: "Deeper theory (voltage dividers, op-amps, logic) after the Level 1 exam, for students who race ahead." },
          ]} />
          <div style={{ marginTop: 32, border: "1px solid var(--rule)", borderRadius: 10, background: "var(--bg-card)", padding: "22px 24px", maxWidth: "44em" }}>
            <h3 style={{ fontFamily: "Newsreader, serif", fontWeight: 400, fontStyle: "italic", fontSize: 22, margin: "0 0 10px" }}>
              Two arcs to choose from.
            </h3>
            <p style={{ color: "var(--ink-soft)", lineHeight: 1.6, margin: 0 }}>
              That same toggle sets the arc: <strong>Explorer</strong> mode
              keeps quizzes short and the math light — right for younger groups
              or a one-week taster — while <strong>Engineer</strong> mode is a
              complete semester unit ending in both exams. The{" "}
              <a href="map.html">course map</a> shows the whole territory on one
              page.
            </p>
          </div>
        </TchSection>

        {/* Projector demos */}
        <TchSection eyebrow="Teach from the front" title="Good things to put on a projector."
          lede="Every simulation is live — drag the sliders while the class predicts what will happen.">
          <TchCardGrid cards={[
            { title: "The water loop.",
              body: "Chapter 1's pump-and-pipe next to its circuit twin. Raise the pressure, pinch the pipe — the analogy the whole course is built on.",
              link: { href: "chapter1.html", label: "Chapter 1 · The Flow →" } },
            { title: "The Workbench.",
              body: "A free-build virtual breadboard. Invite a student up to wire an LED — the simulator says exactly why a circuit does or doesn't work.",
              link: { href: "sandbox.html", label: "Open the Workbench →" } },
            { title: "The Oscilloscope.",
              body: "Watch waveforms live: DC vs AC, a capacitor charging, a 555 blinking. Good for the 'electricity moves in time' moment.",
              link: { href: "scope.html", label: "Open the Scope →" } },
            { title: "Today's Drill.",
              body: "Run the daily mixed quiz on the projector as a class warm-up — five questions drawn from everything covered so far.",
              link: { href: "daily.html", label: "Today's Drill →" } },
          ]} />
        </TchSection>

        {/* Logistics */}
        <TchSection eyebrow="Logistics" title="The fine print.">
          <TchCardGrid cards={[
            { title: "Progress is per device.",
              body: "Everything is saved in the browser's local storage — there are no accounts. Each student should use the same device (and browser) throughout, and shared machines share progress. Clearing cookies clears it." },
            { title: "Certificates.",
              body: "Passing the Level 1 exam and the Level 2 build exam each produces a certificate students can print — a nice end-of-unit artifact.",
              link: { href: "capstone.html", label: "The Level 1 exam →" } },
            { title: "Real parts (optional).",
              body: "The whole course works on-screen. If you want physical builds, the kit page lists the exact parts with quantities — one set per bench is plenty.",
              link: { href: "get-the-kit.html", label: "Parts list & kits →" } },
            { title: "Safety first.",
              body: "Everything here runs on battery voltages. Read the safety section with the class before any physical building.",
              link: { href: "about.html", label: "About & Safety →" } },
          ]} />
        </TchSection>

        {/* Feedback */}
        <TchSection eyebrow="Help make it better" title="Tell me what confused your class."
          lede="This course is built by one person and improved by reports from real learners. If a chapter lost your students, that's exactly what I want to hear about — what page, what moment, what they said.">
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 22 }}>
            <a href={HTE_FEEDBACK_URL} className="cta cta-primary">Send feedback →</a>
            <a href="map.html" className="cta cta-secondary">See the course map</a>
          </div>
        </TchSection>

        {/* Footer */}
        <footer className="home-footer">
          <span>Fath<span style={{ color: "var(--current)" }}>ohm</span> · A field guide</span>
          <span style={{ display: "flex", gap: 22 }}>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="get-the-kit.html">Store</a>
            <a href={HTE_FEEDBACK_URL}>Feedback</a>
            <a href="chapter1.html">Begin →</a>
          </span>
        </footer>
      </main>
      <TweaksPanel title="Tweaks">
        <CommonTweaks t={t} setTweak={setTweak} />
      </TweaksPanel>
      <GlossaryFab />
    </>
  );
}

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