// Main composition + Tweaks panel.

const { useState: useSt, useEffect: useEf } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "rotateMs": 5000
}/*EDITMODE-END*/;

function App() {
  // Lang priority: HTML wrapper (/it/index.html sets window.__sonaroLang = "it")
  // > Tweaks panel saved value > "en".
  //
  // Critical: seed BOTH the tweaks store and the `lang` state with the same
  // initial value. The two sync-useEffects below are written to keep them
  // aligned when the dev Tweaks radio is toggled, but if they start out of
  // sync (e.g. lang="it" from URL but tweaks defaults to "en"), they fight
  // each other every render and flicker the whole page between locales.
  const initialLang = (typeof window !== "undefined" && window.__sonaroLang) ||
                      TWEAK_DEFAULTS.lang || "en";
  const initialDefaults = { ...TWEAK_DEFAULTS, lang: initialLang };
  const [tweaks, setTweak] = useTweaks(initialDefaults);
  const [lang, setLang] = useSt(initialLang);

  // expose to children via window for non-prop reads
  useEf(() => { window.__tweaks = tweaks; }, [tweaks]);

  // sync lang -> tweak
  useEf(() => {
    if (tweaks.lang !== lang) setTweak({ lang });
  }, [lang]);
  // sync tweak -> lang (when user clicks language radio in Tweaks)
  useEf(() => {
    if (tweaks.lang && tweaks.lang !== lang) setLang(tweaks.lang);
  }, [tweaks.lang]);

  const dict = (window.CONTENT && window.CONTENT[lang]) || window.CONTENT.en;

  return (
    <div id="top">
      <Nav t={dict} lang={lang} setLang={setLang} />
      <Hero t={dict} />
      <IntegrationsStrip t={dict} />
      <ProductSplit t={dict} />
      <WhySonaro t={dict} />
      <DashboardSnapshot t={dict} />
      <FAQ t={dict} />
      <FooterCTA t={dict} />
      <Footer t={dict} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            label="Locale"
            value={lang}
            onChange={v => setLang(v)}
            options={[{ value: "en", label: "EN" }, { value: "it", label: "IT" }]}
          />
        </TweakSection>

        <TweakSection label="Hero preview">
          <TweakSlider
            label="Rotation"
            value={tweaks.rotateMs}
            onChange={v => setTweak({ rotateMs: v })}
            min={2000} max={12000} step={500}
            unit="ms"
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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