// Mission 001 — production app shell. Design: Dashboard v3 ("Deadpan Mission Control").
// Differences from the concept build: no tweaks panel, and the default stage is
// the LATEST REAL stage — the scrubber replays recorded history only.
function App() {
  const [stage, setStageRaw] = React.useState(MD.STAGES.length - 1);
  const [share, setShare] = React.useState(false);
  const st = MD.STAGES[stage];
  const setStage = (i) => setStageRaw(Math.max(0, Math.min(MD.STAGES.length - 1, i)));

  return (
    <div className={"app" + (st.complete ? " complete" : "")}>
      <div className="wrap">
        <Masthead st={st} onShare={() => setShare(true)} />
        <StatusStrip st={st} />
        <div className="main">
          <div className="graphwrap">
            <NetGraph stage={stage} density="standard" />
            <GraphLegend stage={stage} />
          </div>
          <div className="rail">
            <RouteCard st={st} />
            <NextAction st={st} />
          </div>
        </div>
        <div className="lower">
          <Candidates st={st} />
          <Feed st={st} />
        </div>
        <footer className="site-foot">
          <a href="scoreboard.html">SCOREBOARD</a>
          <a href="episodes.html">EPISODES</a>
          <a href="rules.html">RULES &amp; ETHICS</a>
          <a href="mission.html">BRIEFING</a>
          <span>EVERY NUMBER REGISTERED BEFORE ACTING · VOIDED LINES PUBLISHED FOREVER</span>
        </footer>
      </div>
      <Scrubber stage={stage} setStage={setStage} />
      {share && <ShareCard st={st} stage={stage} onClose={() => setShare(false)} />}
    </div>
  );
}

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