// Mount the app with tweaks panel
const { useState } = React;
const {
  App, useTweaks, TweaksPanel,
  TweakSection, TweakColor, TweakSelect, TweakRadio, TweakSlider
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff4a1f",
  "display": "Inter Tight",
  "density": 1,
  "theme": "dark"
}/*EDITMODE-END*/;

function Root() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <App tweaks={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Identità" />
        <TweakColor
          label="Accento"
          value={t.accent}
          options={['#ff4a1f', '#e8ff3a', '#5b8cff', '#ff2e6b', '#19c37d', '#ffffff']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSelect
          label="Font display"
          value={t.display}
          options={[
            'Inter Tight',
            'Bricolage Grotesque',
            'Space Grotesk',
            'Archivo',
            'system-ui'
          ]}
          onChange={(v) => setTweak('display', v)}
        />

        <TweakSection label="Aspetto" />
        <TweakRadio
          label="Tema"
          value={t.theme}
          options={['dark', 'light']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakSlider
          label="Margini"
          value={t.density}
          min={0.6} max={1.8} step={0.05}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </>
  );
}

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