/* App shell: routing, theme directions, page-transition wipe, Tweaks */
const { useState: uS, useEffect: uE, useRef: uR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "noir",
  "grain": true,
  "cursor": true,
  "display": "cormorant"
}/*EDITMODE-END*/;

const FONTS = {
  cormorant: '"Cormorant Garamond", Georgia, serif',
  playfair: '"Playfair Display", Georgia, serif',
  pt: '"PT Serif", Georgia, serif',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = uS(() => (location.hash.replace("#", "") || "home"));
  const [wipeKey, setWipeKey] = uS(0);
  const [wiping, setWiping] = uS(false);
  const contentRef = uR(null);

  // theme + font vars
  uE(() => { document.documentElement.dataset.theme = t.direction === "film" ? "film" : "noir"; }, [t.direction]);
  uE(() => { document.documentElement.style.setProperty("--serif", FONTS[t.display] || FONTS.cormorant); }, [t.display]);
  uE(() => { document.documentElement.style.setProperty("--grain-show", t.grain ? "1" : "0"); }, [t.grain]);

  const navigate = (id) => {
    if (id === route) { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    setWipeKey((k) => k + 1); setWiping(true);
    setTimeout(() => { setRoute(id); location.hash = id; window.scrollTo(0, 0); }, 380);
    setTimeout(() => setWiping(false), 900);
  };
  window.__navigate = navigate;

  uE(() => {
    const onHash = () => { const r = location.hash.replace("#", "") || "home"; setRoute(r); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const pages = {
    home: <Home navigate={navigate} />,
    people: <PeopleGallery />,
    food: <FoodGallery />,
    predmet: <PredmetGallery />,
    services: <Services navigate={navigate} />,
    contacts: <Contacts />,
  };

  return (
    <LightboxProvider>
      {t.cursor && <Cursor />}
      {t.grain && <div className="grain"></div>}
      <div className="app">
        <Sidebar route={route} navigate={navigate} />
        <main className="content" ref={contentRef}>
          <div className="banner">
            <div className="marquee">
              <span>{window.SITE.banner}</span><span>{window.SITE.banner}</span>
            </div>
          </div>
          {wiping && <div key={wipeKey} className="wipe run"></div>}
          <div key={route}>{pages[route] || pages.home}</div>
        </main>
      </div>

      <TweaksPanel>
        <TweakSection label="Направление стиля" />
        <TweakRadio label="Тема" value={t.direction}
          options={[{ value: "noir", label: "Кинематограф" }, { value: "film", label: "Плёнка" }]}
          onChange={(v) => setTweak("direction", v)} />
        <p style={{ fontSize: 11, color: "var(--tw-dim,#999)", margin: "0 0 6px", lineHeight: 1.5 }}>
          «Кинематограф» — тёмная подача с исходного сайта. «Плёнка» — тёплая светлая editorial-версия.
        </p>
        <TweakSection label="Типографика" />
        <TweakRadio label="Шрифт заголовков" value={t.display}
          options={[{ value: "cormorant", label: "Cormorant" }, { value: "playfair", label: "Playfair" }, { value: "pt", label: "PT Serif" }]}
          onChange={(v) => setTweak("display", v)} />
        <TweakSection label="Атмосфера" />
        <TweakToggle label="Плёночное зерно" value={t.grain} onChange={(v) => setTweak("grain", v)} />
        <TweakToggle label="Кастомный курсор" value={t.cursor} onChange={(v) => setTweak("cursor", v)} />
      </TweaksPanel>
    </LightboxProvider>
  );
}

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