/* Tweaks for SRDN: hero animation style */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroMode": "particles"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (window.__setSrdnHeroMode) window.__setSrdnHeroMode(tweaks.heroMode);
  }, [tweaks.heroMode]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero animation">
        <TweakRadio
          label="Style"
          value={tweaks.heroMode}
          onChange={(v) => setTweak('heroMode', v)}
          options={[
            { value: 'particles', label: 'Orbit' },
            { value: 'constellation', label: 'Graph' },
            { value: 'ascii', label: 'ASCII' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);