/* =========================================================
   app.jsx — root. Wires store → chrome + view + ledger.
   ========================================================= */

function App() {
  const store = window.useJourneyStore();
  const onHome = store.view === "home";

  // keyboard: left/right to move between reached waypoints
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.matches && e.target.matches("textarea, input")) return;
      if (typeof store.view !== "number") return;
      if (e.key === "ArrowRight" && store.stageComplete(store.WPS[store.view].id) && store.view < store.WPS.length - 1) {
        store.goTo(store.view + 1);
      }
      if (e.key === "ArrowLeft" && store.view > 0) store.goTo(store.view - 1);
      if (e.key === "Escape") store.setLedgerOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [store]);

  return (
    <window.JourneyContext.Provider value={store}>
      <window.Masthead />
      {onHome ? (
        <window.Home />
      ) : (
        <div className="shell">
          <window.TrailSpine />
          <window.StageView />
        </div>
      )}
      <window.LedgerDrawer />
    </window.JourneyContext.Provider>
  );
}

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