// Mount Contatti page
const { useState: useStateContatti } = React;
const {
  ContattiApp, useTweaks, TweaksPanel,
  TweakSection, TweakColor, TweakSelect, TweakRadio, TweakSlider
} = window;

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

function RootContatti() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_CONTATTI);
  return (
    <>
      <ContattiApp 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(<RootContatti />);