/* =========================================================================
   app.jsx — shell, routing, language, a couple of quiet tweaks.
   ========================================================================= */
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "oklch(0.52 0.15 28)",
  "paper": "warm"
}/*EDITMODE-END*/;

const PAPERS = {
  warm:   { paper: "oklch(0.987 0.006 90)", paper2: "oklch(0.968 0.007 88)" },
  cool:   { paper: "oklch(0.984 0.004 230)", paper2: "oklch(0.963 0.005 232)" },
  bright: { paper: "oklch(0.995 0.001 100)", paper2: "oklch(0.972 0.002 100)" },
};

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useS(() => localStorage.getItem("xl_view") || "home");
  const [lang, setLang] = useS(() => localStorage.getItem("xl_lang") || "en");

  useE(() => { localStorage.setItem("xl_view", view); window.scrollTo(0, 0); }, [view]);
  useE(() => { localStorage.setItem("xl_lang", lang); }, [lang]);

  useE(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", tw.accent);
    const p = PAPERS[tw.paper] || PAPERS.warm;
    r.style.setProperty("--paper", p.paper);
    r.style.setProperty("--paper-2", p.paper2);
  }, [tw.accent, tw.paper]);

  return (
    <div className="app">
      <Masthead view={view} setView={setView} lang={lang} setLang={setLang} />
      <main key={view + lang}>
        {view === "home" && <Home lang={lang} setView={setView} />}
        {view === "daily" && <Daily lang={lang} />}
        {view === "work" && <Works lang={lang} />}
      </main>
      <Footer lang={lang} />

      <TweaksPanel>
        <TweakSection label="Tone" />
        <TweakColor
          label="Accent"
          value={tw.accent}
          options={[
            "oklch(0.52 0.15 28)",   /* quiet red */
            "oklch(0.30 0.02 60)",   /* near-black ink */
            "oklch(0.48 0.10 250)",  /* muted blue */
            "oklch(0.46 0.08 150)",  /* muted green */
            "oklch(0.50 0.10 60)",   /* ochre */
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Paper"
          value={tw.paper}
          options={["warm", "cool", "bright"]}
          onChange={(v) => setTweak("paper", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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