// App composition + Tweaks + i18n

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayWeight": 400
}/*EDITMODE-END*/;

function applyDisplayWeight(w) {
  let s = document.getElementById("__display-weight-style");
  if (!s) { s = document.createElement("style"); s.id = "__display-weight-style"; document.head.appendChild(s); }
  s.textContent = `
    .hero-mark .serif-display,
    .manifesto-title,
    .sec-title,
    .contact-title,
    .pillar-title,
    .bleed-quote { font-weight: ${w}; }
  `;
}

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const { TweaksPanel, TweakSection, TweakSlider } = window;

  // i18n
  const initLang = (() => {
    try { return localStorage.getItem("rossetto.lang") || "es"; } catch { return "es"; }
  })();
  const [lang, setLangRaw] = React.useState(initLang);
  const setLang = (l) => {
    setLangRaw(l);
    try { localStorage.setItem("rossetto.lang", l); } catch {}
    document.documentElement.setAttribute("lang", l);
  };
  React.useEffect(() => { document.documentElement.setAttribute("lang", lang); }, [lang]);

  React.useEffect(() => { applyDisplayWeight(t.displayWeight); }, [t.displayWeight]);

  const tr = window.TR[lang];

  return (
    <window.LangContext.Provider value={{ lang, setLang, t: tr }}>
      <Spine />
      <Nav />
      <Hero />
      <Manifesto />
      <Studio />
      <Pillars />
      <Atmosphere />
      <Sectors />
      <Capabilities />
      <Bleed />
      <Treatments />
      <Process />
      <Contact />
      <Footer />

      <TweaksPanel title="Ajustes">
        <TweakSection label="Tipografía">
          <TweakSlider
            label="Peso del display"
            min={300} max={600} step={100}
            value={t.displayWeight}
            onChange={(v) => setTweak('displayWeight', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </window.LangContext.Provider>
  );
}

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