const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "grain": 0,
  "scanlines": 0,
  "fontPair": "fraunces",
  "accent": "#a64024"
}/*EDITMODE-END*/;

function App() {
  const tweaks = useTweaks(DEFAULTS);
  const [theme, setTheme] = useState(tweaks.values.theme || "light");
  const [openHot, setOpenHot] = useState(null);

  // Apply CSS vars from tweaks
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    document.documentElement.style.setProperty("--grain-opacity", String(tweaks.values.grain));
    document.documentElement.style.setProperty("--scanline-opacity", String(tweaks.values.scanlines));
    document.documentElement.style.setProperty("--accent", tweaks.values.accent);
  }, [theme, tweaks.values.grain, tweaks.values.scanlines, tweaks.values.accent]);

  useEffect(() => {
    // Sync tweaks theme → local
    if (tweaks.values.theme !== theme) setTheme(tweaks.values.theme);
  }, [tweaks.values.theme]);

  const onToggleTheme = () => {
    const next = theme === "dark" ? "light" : "dark";
    setTheme(next);
    tweaks.set("theme", next);
  };

  const openVideo = (hot) => setOpenHot(hot);
  const closeVideo = () => setOpenHot(null);

  return (
    <>
      <TopBar theme={theme} onToggleTheme={onToggleTheme} />
      <Hero />
      <MapSection onOpenVideo={openVideo} />
      <ArchiveSection onOpenVideo={openVideo} />
      <DecadesSection />
      <AboutSection />
      <Footer />
      {openHot && <VideoModal hot={openHot} onClose={closeVideo} />}

      <TweaksPanel tweaks={tweaks} title="Tweaks">
        <TweakSection title="Tema">
          <TweakRadio
            label="Modo"
            value={tweaks.values.theme}
            options={[{ value: "light", label: "Papel" }, { value: "dark", label: "Archivo" }]}
            onChange={(v) => { tweaks.set("theme", v); setTheme(v); }}
          />
        </TweakSection>
        <TweakSection title="Textura">
          <TweakSlider
            label="Grano"
            min={0} max={0.5} step={0.01}
            value={tweaks.values.grain}
            onChange={(v) => tweaks.set("grain", v)}
          />
          <TweakSlider
            label="Líneas CRT"
            min={0} max={0.4} step={0.01}
            value={tweaks.values.scanlines}
            onChange={(v) => tweaks.set("scanlines", v)}
          />
        </TweakSection>
        <TweakSection title="Color">
          <TweakColor
            label="Acento"
            value={tweaks.values.accent}
            onChange={(v) => tweaks.set("accent", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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