// Root composition + Tweaks panel for gohegan.net landing.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "animate": true,
  "density": "cosy"
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme to document root
  React.useEffect(() => {
    if (t.theme === 'dark') {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
  }, [t.theme]);

  return (
    <>
      <MarketingNav/>
      <main>
        <Hero animate={t.animate} density={t.density}/>
        <UpstreamsSection animate={t.animate}/>
        <NetworkPanel/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Surface"/>
        <TweakRadio
          label="Theme"
          value={t.theme}
          onChange={v => setTweak('theme', v)}
          options={[
            { value: 'light', label: 'light' },
            { value: 'dark',  label: 'dark'  },
          ]}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'cosy',    label: 'cosy'    },
            { value: 'compact', label: 'compact' },
          ]}
        />
        <TweakSection label="Topology"/>
        <TweakToggle
          label="Live packets"
          value={t.animate}
          onChange={v => setTweak('animate', v)}
        />
      </TweaksPanel>
    </>
  );
};

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