// ============ Restager marketing entry — locale-aware ============

const App = () => {
  const [tweaks, setTweaks] = React.useState(window.TWEAKS);
  const [tweakVisible, setTweakVisible] = React.useState(false);

  const lang = window.APP_LANG || "en";
  window.COPY = window.MARKETING_COPY_BY_LANG[lang] || window.MARKETING_COPY_BY_LANG.en;
  const C = window.COPY;

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-palette", tweaks.palette);
    root.setAttribute("data-theme", tweaks.theme);
    root.setAttribute("data-type", tweaks.typography);
    root.setAttribute("data-density", tweaks.density);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: tweaks }, "*");
  }, [tweaks]);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setTweakVisible(true);
      if (e.data.type === "__deactivate_edit_mode") setTweakVisible(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <>
      <Announce items={C.announce}/>
      <Nav brand="restager" brandName={C.brandName} links={C.nav}/>
      <Hero variant={tweaks.heroVariant}/>
      <Trust/>
      <Steps/>
      <Gallery/>
      <Styles/>
      <LogoStrip/>
      <Features/>
      <Testimonials/>
      <Pricing/>
      <Faq/>
      <CtaBlock/>
      <Footer/>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={tweakVisible} onClose={() => setTweakVisible(false)}/>
    </>
  );
};

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