/* app.jsx — CherryMarket landing — root app + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF0A3C",
  "theme": "light",
  "previewModule": 0,
  "showProblem": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeModule, setActiveModule] = React.useState(t.previewModule ?? 0);

  // keep modules in sync with tweak
  React.useEffect(() => { setActiveModule(t.previewModule ?? 0); }, [t.previewModule]);
  React.useEffect(() => { setTweak("previewModule", activeModule); }, [activeModule]);

  // apply accent + theme as CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty("--brand", t.accent);
    document.documentElement.setAttribute("data-theme", t.theme === "dark" ? "dark" : "light");
  }, [t.accent, t.theme]);

  useReveal();

  return (
    <>
      <Nav theme={t.theme} onTheme={(v) => setTweak("theme", v)} />
      <Hero/>
      <Metrics/>
      <ClientStrip/>
      {t.showProblem && <Problem/>}
      <Modules active={activeModule} setActive={setActiveModule}/>
      <Benchmark/>
      <Audience/>
      <FruitMarkets/>
      <CTA/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Marca"/>
        <TweakColor
          label="Color de acento"
          value={t.accent}
          options={["#FF0A3C", "#E11D48", "#B91C1C", "#D9480F", "#7C2D6F"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Tema"
          value={t.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakSection label="Contenido"/>
        <TweakSelect
          label="Módulo previsualizado"
          value={String(t.previewModule)}
          options={[
            { value: "0", label: "Mercado" },
            { value: "1", label: "Liquidaciones" },
            { value: "2", label: "Comparativas" },
            { value: "3", label: "Preliquidación" },
          ]}
          onChange={(v) => setTweak("previewModule", Number(v))}
        />
        <TweakToggle
          label="Mostrar sección Problema"
          value={t.showProblem}
          onChange={(v) => setTweak("showProblem", v)}
        />
      </TweaksPanel>
    </>
  );
}

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