/* simplemap.jsx — the streamlined course map: a calm, vertical journey in two
   numbered steps (Learn → Build) plus a quiet "anytime" shelf. Same data, same
   progress, none of the PCB density. The home page offers this and the circuit
   board view as a toggle (persisted in hte-mapstyle). Names sm*. */

/* ─── the journey strip — the course as a four-beat story ─────────────────
   Water → the ideas → the build → the beacon. Pure narrative, no chrome;
   sits between the hero and the simple map. */
function JourneyStrip() {
  const stops = [
    {
      t: "See it as water", s: "Pressure is voltage. Flow is current. A pinch is resistance.",
      art: (
        <svg viewBox="0 0 84 56" width="84" height="56" aria-hidden="true">
          <rect x="10" y="8" width="26" height="30" rx="3" fill="none" stroke="var(--water)" strokeWidth="2" />
          <path d="M13 20 q5 -4 10 0 t10 0" fill="none" stroke="var(--water)" strokeWidth="1.8" />
          <path d="M36 30 h14 q6 0 6 6 v6" fill="none" stroke="var(--water)" strokeWidth="2.4" strokeLinecap="round" />
          <circle cx="56" cy="48" r="2.6" fill="var(--water)" />
          <circle cx="46" cy="30" r="2.2" fill="var(--water)" />
        </svg>
      ),
    },
    {
      t: "Learn the rules", s: "Ten short chapters — every idea moves on screen.",
      art: (
        <svg viewBox="0 0 84 56" width="84" height="56" aria-hidden="true">
          <text x="26" y="36" fontFamily="Newsreader, serif" fontSize="30" fill="var(--current)">Ω</text>
          <path d="M48 22 h8 l3 -8 l6 16 l3 -8 h8" fill="none" stroke="var(--current)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
    },
    {
      t: "Build it for real", s: "A breadboard build for every idea you meet.",
      art: (
        <svg viewBox="0 0 84 56" width="84" height="56" aria-hidden="true">
          <rect x="14" y="14" width="56" height="28" rx="4" fill="none" stroke="var(--water)" strokeWidth="2" />
          {[26, 36, 46, 56].map(x => <circle key={"a" + x} cx={x} cy="24" r="1.8" fill="var(--water)" />)}
          {[26, 36, 46, 56].map(x => <circle key={"b" + x} cx={x} cy="32" r="1.8" fill="var(--water)" />)}
        </svg>
      ),
    },
    {
      t: "Leave with a beacon", s: "A blinking device you specced, sized and wired yourself.",
      art: (
        <svg viewBox="0 0 84 56" width="84" height="56" aria-hidden="true">
          <line x1="42" y1="26" x2="42" y2="44" stroke="var(--ink-soft)" strokeWidth="2.4" />
          <line x1="32" y1="48" x2="52" y2="48" stroke="var(--ink-soft)" strokeWidth="2.4" strokeLinecap="round" />
          <circle className="jn-lamp" cx="42" cy="17" r="7" fill="var(--current)" />
          <circle cx="42" cy="17" r="11" fill="none" stroke="var(--current)" strokeWidth="1.2" opacity="0.5" />
        </svg>
      ),
    },
  ];
  return (
    <div className="jn-strip" aria-label="The journey">
      {stops.map((st, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="jn-arrow" aria-hidden="true">→</span>}
          <div className="jn-stop">
            {st.art}
            <div className="jn-text"><b>{st.t}</b><span>{st.s}</span></div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

function smStatus(progress, n) {
  return progress[n] === "done" ? "done" : progress[n] === "in-progress" ? "inprog" : "";
}

function SmRow({ c, progress, isNext, num }) {
  const st = smStatus(progress, c.n);
  return (
    <a className={"sm-row" + (st === "done" ? " done" : "") + (isNext ? " next" : "")} href={c.href}>
      <span className="sm-tick" aria-hidden="true">{st === "done" ? "✓" : isNext ? "▸" : "○"}</span>
      {num != null && <span className="sm-num">{num}</span>}
      <span className="sm-title">{c.t}</span>
      <span className="sm-sub">{c.sub}</span>
      {isNext ? <span className="sm-go">Continue →</span> : c.min ? <span className="sm-min">{c.min} min</span> : null}
    </a>
  );
}

function SmExamRow({ t, sub, href, done, isNext }) {
  return (
    <a className={"sm-row sm-exam" + (done ? " done" : "") + (isNext ? " next" : "")} href={href}>
      <span className="sm-tick" aria-hidden="true">{done ? "✓" : "★"}</span>
      <span className="sm-title">{t}</span>
      <span className="sm-sub">{sub}</span>
      {done ? <span className="sm-min">passed</span> : <span className="sm-go">{isNext ? "Up next →" : "Open →"}</span>}
    </a>
  );
}

function SmChips({ label, items, progress }) {
  return (
    <div className="sm-chip-group">
      <span className="sm-chip-label">{label}</span>
      <span className="sm-chip-row">
        {items.map(c => {
          const done = progress[c.n] === "done";
          return (
            <a key={c.href} className={"sm-chip" + (done ? " done" : "")} href={c.href} title={c.sub || ""}>
              {done ? "✓ " : ""}{c.t.replace(/^The\s+/i, "")}
            </a>
          );
        })}
      </span>
    </div>
  );
}

function SimpleMap({ progress }) {
  const theory = ALL_CHAPTERS;
  const builds = L2_CHAPTERS.filter(c => !c.capstone && c.ready !== false);
  const beacon = L2_CHAPTERS.find(c => c.capstone);

  // the one place to continue: first not-done stop along the main line
  const mainLine = [...theory, ...builds, ...(beacon ? [beacon] : [])];
  const next = mainLine.find(c => progress[c.n] !== "done");
  const theoryDone = theory.every(c => progress[c.n] === "done");

  const tools = [
    { n: "tool-cl", t: "Circuit Lab", sub: "One circuit, two views, in sync", href: "circuit-lab.html" },
    { n: "tool-lab", t: "The Sandbox", sub: "Wire & probe anything", href: "flow-sandbox.html" },
    { n: "tool-bench", t: "The Workbench", sub: "Free-build breadboard", href: "sandbox.html" },
    { n: "tool-scope", t: "The Oscilloscope", sub: "Read signals like a pro", href: "scope.html" },
    { n: "tool-drill", t: "Today's Drill", sub: "Three quick questions a day", href: "daily.html" },
  ];
  const story = [
    { n: "L0-00", t: "Before You Start", sub: "Safety, parts & how this works", href: "primer.html" },
    ...L0_CHAPTERS.filter(c => c.ready !== false),
  ];

  return (
    <div className="sm-wrap">
      {/* Step 1 — learn */}
      <div className="sm-step">
        <div className="sm-step-head">
          <span className="sm-step-num">1</span>
          <h2>Learn the ideas</h2>
          <span className="sm-step-note">ten chapters · water first, math later</span>
        </div>
        <div className="sm-list sm-cols">
          {theory.map((c, i) => (
            <SmRow key={c.n} c={c} progress={progress} num={i + 1} isNext={next && next.n === c.n} />
          ))}
        </div>
        <div className="sm-list" style={{ marginTop: 8 }}>
          <SmExamRow t="The Theory Exam" sub="Four design briefs · your Level 1 certificate" href="capstone.html"
                     done={progress["capstone"] === "done"} isNext={theoryDone && progress["capstone"] !== "done"} />
        </div>
      </div>

      {/* Step 2 — build */}
      <div className="sm-step">
        <div className="sm-step-head">
          <span className="sm-step-num">2</span>
          <h2>Build for real</h2>
          <span className="sm-step-note">a breadboard build for every idea</span>
        </div>
        <div className="sm-list sm-cols">
          {builds.map(c => (
            <SmRow key={c.n} c={c} progress={progress} isNext={next && next.n === c.n} />
          ))}
        </div>
        <div className="sm-list" style={{ marginTop: 8 }}>
          {beacon && <SmExamRow t={beacon.t} sub={beacon.sub} href={beacon.href}
                                done={progress[beacon.n] === "done"} isNext={next && next.n === beacon.n} />}
          <SmExamRow t="The Build Exam" sub="Master Engineer · the final certificate" href="capstone-l2.html"
                     done={progress["capstone-l2"] === "done"} isNext={false} />
        </div>
      </div>

      {/* the quiet shelf */}
      <div className="sm-step sm-anytime">
        <div className="sm-step-head">
          <span className="sm-step-num">·</span>
          <h2>Anytime</h2>
          <span className="sm-step-note">optional — dip in whenever</span>
        </div>
        <SmChips label="The story" items={story} progress={progress} />
        <SmChips label="Math help" items={M_CHAPTERS} progress={progress} />
        <SmChips label="Go deeper" items={L15_CHAPTERS} progress={progress} />
        <SmChips label="Tools" items={tools} progress={progress} />
        <SmChips label="For kids" items={[{ n: "_exr", t: "The Explorer Route", sub: "A complete trail · no heavy math", href: "explorer.html" }]} progress={progress} />
      </div>
    </div>
  );
}

Object.assign(window, { SimpleMap, JourneyStrip });