/* global React, ReactDOM */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#7c9cff",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const { active, done } = window.useScrollSpy(window.SECTIONS.map((s) => s.id));

  // Apply theme + accent to document root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.theme, t.accent, t.density]);

  return (
    <>
      <window.TopNav active={active} />
      <window.ProgressRail active={active} done={done} />

      <window.Hero />
      <window.WhatIs />
      <window.Structure />
      <window.Script />
      <window.Media />
      <window.Tools />
      <window.Narration />
      <window.Editing />
      <window.Music />
      <window.Publish />
      <window.Player />
      <window.Gallery />
      <window.Pitfalls />
      <window.Templates />
      <window.Faq />
      <window.Footer />

      <window.TweaksPanel>
        <window.TweakSection label="Theme" />
        <window.TweakRadio
          label="Mode"
          value={t.theme}
          options={["dark", "light", "sepia"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <window.TweakColor
          label="Accent"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
        />
        <window.TweakSection label="Layout" />
        <window.TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular", "spacious"]}
          onChange={(v) => setTweak("density", v)}
        />
      </window.TweaksPanel>
    </>
  );
}

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