// Single-site entry. The masthead homepage + all inner pages, full viewport.
// One route + theme + language state owns the whole page; the route is
// mirrored into the URL, see ppPathFor / ppRouteFrom in theme.jsx.
// Tweaks (toolbar → Tweaks): typography variants, essay text size, photo edit tools.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "titles": "mono",
  "proseSize": 20,
  "editPhotos": false
}/*EDITMODE-END*/;

function Site() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Seed from the address bar so a deep link renders the right page on the
  // first paint rather than flashing the homepage.
  const first = ppRouteFrom(window.location.pathname);
  const [route, setRoute] = React.useState(first.route);
  const [paramId, setParamId] = React.useState(first.id);

  const go = (r, id) => {
    setRoute(r);
    setParamId(id);
    const path = ppPathFor(r, id);
    if (path !== window.location.pathname) window.history.pushState({ r, id }, '', path);
  };

  // Back and forward move through the site rather than out of it.
  React.useEffect(() => {
    const pop = () => {
      const s = ppRouteFrom(window.location.pathname);
      setRoute(s.route);
      setParamId(s.id);
    };
    window.addEventListener('popstate', pop);
    return () => window.removeEventListener('popstate', pop);
  }, []);

  let body;
  if (route === 'home')         body = <HomeB />;
  else if (route === 'about')   body = <PageAbout />;
  else if (route === 'cv')      body = <PageCV />;
  else if (route === 'projects') body = <PageProjects />;
  else if (route === 'photos')  body = <PagePhotos />;
  else if (route === 'series')  body = <PageSeries id={paramId || 's6'} />;
  else if (route === 'essays' && ESSAYS_ENABLED)  body = <PageEssays />;
  else if (route === 'essay' && ESSAYS_ENABLED)   body = <PageEssay id={paramId || 'e1'} />;
  else if (route === 'contact') body = <PageContact />;
  else body = <HomeB />;

  const typeClass = t.titles === 'serif' ? 'type-serif' : t.titles === 'serif +' ? 'type-serifplus' : '';

  return (
    <PhotoEditCtx.Provider value={!!t.editPhotos}>
      <PageShell route={route} setRoute={go} pageClass={typeClass} styleVars={{ '--prose': t.proseSize + 'px' }}>
        {body}
      </PageShell>
      <TweaksPanel>
        <TweakSection label="Typography" />
        <TweakRadio label="Titles" value={t.titles}
                    options={['mono', 'serif', 'serif +']}
                    onChange={(v) => setTweak('titles', v)} />
        <div style={{ fontSize: 11, color: '#8a857c', lineHeight: 1.5, margin: '2px 0 6px' }}>
          mono — current voice · serif — item titles in Garamond · serif + — intro paragraphs too
        </div>
        <TweakSlider label="Essay text" value={t.proseSize} min={17} max={24} unit="px"
                     onChange={(v) => setTweak('proseSize', v)} />
        <TweakSection label="Photos" />
        <TweakToggle label="Edit tools" value={!!t.editPhotos}
                     onChange={(v) => setTweak('editPhotos', v)} />
        <div style={{ fontSize: 11, color: '#8a857c', lineHeight: 1.5 }}>
          Only you see these tools — they never appear on the published site. Drag image files onto frames; drag inside a photo to reframe. Frame buttons: order / width / aspect / cover / remove; name &amp; description fields sit under each frame. Series pages can take text blocks; essays can take photos (“+ add photo” at the end, or a [photo:01] token in the essay file).
        </div>
      </TweaksPanel>
    </PhotoEditCtx.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider>
    <Site />
  </LangProvider>
);