/* app.jsx — top-level app composition */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "nodeScale": 1.6,
  "labelScale": 1.35,
  "smallTextScale": 1.2,
  "axisLabelScale": 1.25,
  "lineWeight": 1.3,
  "showHints": true
}/*EDITMODE-END*/;

const TweakCtx = React.createContext(TWEAK_DEFAULTS);
window.TweakCtx = TweakCtx;

function App() {
  const sectionIds = ['hero', 'tempos', 'absorb', 'pressures', 'inverse', 'cascade', 'offerings', 'close'];
  const active = useActiveSection(sectionIds);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Expose scaling via CSS vars for non-SVG text (sidebars, captions, etc.)
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--scale-small', t.smallTextScale);
    r.style.setProperty('--scale-axis', t.axisLabelScale);
  }, [t.smallTextScale, t.axisLabelScale]);

  return (
    <TweakCtx.Provider value={t}>
      <Topbar active={active} />
      <Hero />
      <Tempos />
      <PumpAbsorption />
      <Pressures />
      <InverseDesign />
      <Cascade />
      <Offerings />
      <Closing />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Graph nodes & dots" />
        <TweakSlider label="Node size" value={t.nodeScale} min={0.8} max={2.5} step={0.05}
                     onChange={(v) => setTweak('nodeScale', v)} />
        <TweakSlider label="Line weight" value={t.lineWeight} min={0.8} max={2.5} step={0.05}
                     onChange={(v) => setTweak('lineWeight', v)} />

        <TweakSection label="Text size in graphs" />
        <TweakSlider label="Data labels" value={t.labelScale} min={0.9} max={2} step={0.05}
                     onChange={(v) => setTweak('labelScale', v)} />
        <TweakSlider label="Axis labels" value={t.axisLabelScale} min={0.9} max={2} step={0.05}
                     onChange={(v) => setTweak('axisLabelScale', v)} />
        <TweakSlider label="Captions / asides" value={t.smallTextScale} min={0.9} max={1.6} step={0.05}
                     onChange={(v) => setTweak('smallTextScale', v)} />

        <TweakSection label="Display" />
        <TweakToggle label="Show hint text" value={t.showHints}
                     onChange={(v) => setTweak('showHints', v)} />
      </TweaksPanel>
    </TweakCtx.Provider>
  );
}

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