/* global React, ReactDOM, SplitHome, EditorialHome,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */

const TWEAK_DEFAULTS_HOME = /*EDITMODE-BEGIN*/{
  "homeLayout": "editorial",
  "leafAccent": "#2F9E44"
}/*EDITMODE-END*/;

function InicioApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_HOME);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--leaf', t.leafAccent);
  }, [t.leafAccent]);

  return (
    <>
      {t.homeLayout === 'split' ? <SplitHome /> : <EditorialHome />}

      <TweaksPanel title="Tweaks · Inicio SLF">
        <TweakSection label="Variación de entrada">
          <TweakRadio
            label="Layout"
            value={t.homeLayout}
            onChange={(v) => setTweak('homeLayout', v)}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'split', label: 'Split' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Acento Hogar">
          <TweakColor
            label="Verde Hogar"
            value={t.leafAccent}
            onChange={(v) => setTweak('leafAccent', v)}
            options={['#2F9E44', '#1F8A5B', '#3FA34D', '#5BAE2F']}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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