/* OpenSyn homepage — app root + Tweaks */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroField": "flow",
  "scanlines": true
}/*EDITMODE-END*/;

const FIELD_LABELS = {
  flow: "Field · Flow streams",
  lattice: "Field · L1–L5 lattice",
  grid: "Field · Signal grid",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [theme, setTheme] = React.useState(
    () => document.documentElement.getAttribute("data-os-theme") || "light"
  );

  React.useEffect(() => {
    document.documentElement.setAttribute("data-os-theme", theme);
    try { localStorage.setItem("opensyn-theme", theme); } catch (e) {}
  }, [theme]);

  const toggleTheme = () => setTheme((m) => (m === "dark" ? "light" : "dark"));

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--os-scanline-op", t.scanlines ? "0.7" : "0"
    );
  }, [t.scanlines]);

  return (
    <React.Fragment>
      <Hero treatment={t.heroField} theme={theme} onToggleTheme={toggleTheme} />
      <ConnectionSection />
      <PrinciplesSection />
      <ArchitectureSection />
      <WorkflowSection />
      <FooterSection theme={theme} />

      <TweaksPanel>
        <TweakSection label="Appearance" />
        <TweakRadio
          label="Theme"
          value={theme}
          options={["light", "dark"]}
          onChange={(v) => setTheme(v)}
        />
        <TweakSection label="Hero motion field" />
        <TweakRadio
          label="Treatment"
          value={t.heroField}
          options={["flow", "lattice", "grid"]}
          onChange={(v) => setTweak("heroField", v)}
        />
        <TweakToggle
          label="CRT scanlines"
          value={t.scanlines}
          onChange={(v) => setTweak("scanlines", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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