/* home.jsx — the front page: pure story. A trimmed hero, the five-beat
   scrollytelling loop (homestory.jsx), a "what's inside" glance, and one CTA.
   The full course map lives on its own page now: map.html (map.jsx). */

const { useEffect } = React;

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

function hgHours(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 App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useCrossChapterPersistence(t, setTweak);
  useEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]);

  const progress = useProgressState();
  const stats = courseStats(progress);
  const seq = [...ALL_CHAPTERS, ...L2_CHAPTERS.filter(c => c.ready !== false)];
  const nextCh = seq.find(c => progress[c.n] !== "done");
  const resumeHref = nextCh ? nextCh.href : "chapter1.html";
  const ctaLabel = stats.done === 0
    ? "Start at Chapter 1"
    : !nextCh
      ? "Review from the top"
      : `Resume — ${nextCh.t}`;

  const l1h = hgHours(ALL_CHAPTERS);
  const l2h = hgHours(L2_CHAPTERS.filter(c => c.ready !== false));

  const glance = [
    { n: String(ALL_CHAPTERS.length), t: "short chapters", s: `≈ ${l1h} hours · every idea is animated water first` },
    { n: String(L2_CHAPTERS.filter(c => c.ready !== false).length), t: "real builds", s: `≈ ${l2h} hours · each idea wired on a breadboard` },
    { n: "3", t: "live sim tools", s: "Circuit Lab · Sandbox · Workbench — play anytime" },
    { n: "1", t: "blinking beacon", s: "the final device, specced and built by you" },
  ];

  return (
    <>
      <TopBar audience={t.audience} setAudience={(v) => setTweak("audience", v)} />
      <main className="map-page">
        <header className="map-hero hg-hero">
          <div className="mh-left">
            <div className="badges">
              <span>A free field guide</span><span>·</span>
              <span>self-paced</span>
            </div>
            <h1>Fath<span style={{ color: "var(--current)" }}>ohm</span>.</h1>
            <p className="mh-tagline"><em>How to engineer</em> — from the water up.</p>
            <p className="lede">
              Start with water in a barrel. Finish with a blinking beacon you
              designed and built — and every idea along the way is something
              you can watch move. Scroll — the loop below tells the story.
            </p>
            <div className="home-cta-row">
              <a href={resumeHref} className="cta cta-primary">{ctaLabel} →</a>
              <a href="map.html" className="cta cta-secondary">The course map</a>
            </div>
            <p className="mh-howto">
              <strong>Younger explorer?</strong> <a href="explorer.html">The Explorer
              Route</a> is a complete trail with its own certificate — no heavy math.
            </p>
          </div>
        </header>

        <HomeStory kids={t.audience === "kids"} resumeHref={resumeHref} ctaLabel={ctaLabel} />

        {/* what's inside, at a glance */}
        <section className="hg-glance" id="course">
          <div className="eyebrow" style={{ marginBottom: 14 }}>what's inside</div>
          <div className="hg-grid">
            {glance.map((g, i) => (
              <div className="hg-stat" key={i}>
                <span className="hg-num">{g.n}</span>
                <b>{g.t}</b>
                <span className="hg-sub">{g.s}</span>
              </div>
            ))}
          </div>
          <p className="hg-facts">
            Free, no account, no ads. An <b>Explorer / Engineer</b> switch on every
            page keeps it kid-friendly or fully technical. Optional story &amp; math
            streams. Certificates at each level.
          </p>
          <div className="home-cta-row" style={{ marginTop: 22 }}>
            <a href={resumeHref} className="cta cta-primary">{ctaLabel} →</a>
            <a href="map.html" className="cta cta-secondary">Browse the full course map →</a>
          </div>
        </section>

        <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="map.html">Course map</a>
            <a href="projects.html">Projects</a>
            <a href="about.html">About</a>
            <a href="dashboard.html">Progress</a>
            <a href="https://ko-fi.com/fathohm" target="_blank" rel="noopener noreferrer">Support</a>
          </span>
        </footer>
      </main>

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

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