// app.jsx — root for the Rosa Chover landing

const PALETTES = [
  { key: "malva",  swatch: ["#6b5b9a", "#f8f6f1", "#1c1a17"] },
  { key: "tierra", swatch: ["#b15a3c", "#f4e6df", "#1c1a17"] },
  { key: "salvia", swatch: ["#6e7d63", "#e9ece4", "#1c1a17"] },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "palette": ["#6b5b9a", "#f8f6f1", "#1c1a17"],
  "density": "regular"
}/*EDITMODE-END*/;

function paletteKeyFromSwatch(sw) {
  if (!Array.isArray(sw)) return "malva";
  const found = PALETTES.find((p) => p.swatch[0] === sw[0]);
  return found ? found.key : "malva";
}

function applyThemeToDOM(t) {
  document.documentElement.setAttribute("data-theme", t.theme);
  document.documentElement.setAttribute("data-palette", paletteKeyFromSwatch(t.palette));
  if (t.density === "compact") {
    document.documentElement.style.setProperty("--container", "1140px");
  } else if (t.density === "comfy") {
    document.documentElement.style.setProperty("--container", "1320px");
  } else {
    document.documentElement.style.setProperty("--container", "1240px");
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(() => localStorage.getItem('rcl') || 'es');
  const [langLoading, setLangLoading] = useState(false);

  // Apply theme on tweak changes
  useEffect(() => {
    applyThemeToDOM(t);
  }, [t.theme, t.palette, t.density]);

  // Language change
  async function changeLang(next) {
    if (next === lang) return;
    setLangLoading(true);
    try {
      await window.applyLanguage(next);
      localStorage.setItem('rcl', next);
      setLang(next);
    } finally {
      setLangLoading(false);
    }
  }

  useReveal();

  // Re-apply translations after every React render (before paint)
  // Needed because React re-renders reset textContent back to Spanish JSX.
  // Also handles restoring ES explicitly so switching back to Spanish always works.
  useLayoutEffect(() => {
    const rawDict = (window.TRANSLATIONS && window.TRANSLATIONS[lang]) || {};
    const dict = {}; Object.keys(rawDict).forEach(k => { dict[k.trim().replace(/\s+/g, " ")] = rawDict[k]; });
    document.querySelectorAll('[data-i18n]').forEach(n => {
      if (!n.dataset.i18nSrc) n.dataset.i18nSrc = n.textContent.trim().replace(/\s+/g, " ");
      if (lang === 'es') {
        n.textContent = n.dataset.i18nSrc;
      } else if (Object.keys(dict).length) {
        const translated = dict[n.dataset.i18nSrc];
        if (translated) n.textContent = translated;
      }
    });
  });

  return (
    <React.Fragment>
      <Nav lang={lang} onLang={changeLang} langLoading={langLoading} />
      <main>
        <Hero />
        <Trust />
        <WhatIsMediation />
        <Services />
        <LeyBanner />
        <About />
        <CTABlock />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Apariencia" />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Paleta"
          value={t.palette}
          options={PALETTES.map((p) => p.swatch)}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Densidad" />
        <TweakRadio
          label="Ancho"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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