// app.jsx — root mount with Tweaks

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "ru",
  "module": 126,
  "showHeroPattern": true,
  "showJurPattern": true,
  "showBigCtaArt": true,
  "patternDensity": "medium",
  "stripeBands": 8,
  "checkerN": 2,
  "dotsN": 2,
  "tileStyle": "mixed"
}/*EDITMODE-END*/;

const App = () => {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(() => {
    try { return localStorage.getItem("sbor-lang") || tw.lang || "ru"; } catch (e) { return "ru"; }
  });
  useEffect(() => {
    try { localStorage.setItem("sbor-lang", lang); } catch (e) {}
    document.documentElement.lang = lang;
    setTweak("lang", lang);
  }, [lang]);
  // when tweak lang changes via panel, sync state
  useEffect(() => {
    if (tw.lang && tw.lang !== lang) setLang(tw.lang);
  }, [tw.lang]);
  useEffect(() => {
    if (tw.tileStyle === "panot") setTweak("tileStyle", "mixed");
  }, [tw.tileStyle]);

  // Apply module size live; colors come from the shared UI-kit tokens.
  useEffect(() => {
    document.documentElement.style.setProperty("--m", tw.module + "px");
    document.documentElement.style.removeProperty("--sb-red");
  }, [tw.module]);

  return (
    <>
      <Landing
        lang={lang}
        setLang={setLang}
        tw={tw}
      />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Language" />
        <TweakRadio label="Locale" value={lang}
          options={["ru", "en", "ca", "es"]}
          onChange={(v) => setLang(v)} />

        <TweakSection label="Grid" />
        <TweakSlider label="Module" value={tw.module} min={96} max={160} step={2} unit="px"
          onChange={(v) => setTweak("module", v)} />

        <TweakSection label="Patterns" />
        <TweakSelect label="Tile mix" value={tw.tileStyle}
          options={["mixed", "stripes", "geometric"]}
          onChange={(v) => setTweak("tileStyle", v)} />
        <TweakSlider label="Stripe bands" value={tw.stripeBands} min={2} max={16} step={1}
          onChange={(v) => setTweak("stripeBands", v)} />
        <TweakSlider label="Checker N" value={tw.checkerN} min={2} max={6} step={1}
          onChange={(v) => setTweak("checkerN", v)} />
        <TweakSlider label="Dots N" value={tw.dotsN} min={2} max={4} step={1}
          onChange={(v) => setTweak("dotsN", v)} />
        <TweakToggle label="Hero pattern" value={tw.showHeroPattern}
          onChange={(v) => setTweak("showHeroPattern", v)} />
        <TweakToggle label="Jur pattern" value={tw.showJurPattern}
          onChange={(v) => setTweak("showJurPattern", v)} />
        <TweakToggle label="CTA pattern" value={tw.showBigCtaArt}
          onChange={(v) => setTweak("showBigCtaArt", v)} />

      </TweaksPanel>
    </>
  );
};

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