// Home — Tweaks island. Drives hero layout + brand accent.
const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split-right",
  "accent": "#b3974c",
  "headerTone": "#b4a169"
}/*EDITMODE-END*/;

function HomeTweaks() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.setAttribute('data-hero', t.heroLayout);
  }, [t.heroLayout]);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--gold-text', t.accent);
    r.setProperty('--gold-deep', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--gold', t.headerTone);
  }, [t.headerTone]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakRadio
        label="Layout"
        value={t.heroLayout}
        options={[
          { value: 'split-right', label: 'Derecha' },
          { value: 'split-left',  label: 'Izquierda' },
          { value: 'centered',    label: 'Centro' },
        ]}
        onChange={(v) => setTweak('heroLayout', v)}
      />
      <TweakSection label="Marca" />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={['#b3974c', '#a8853a', '#9c7b46', '#8a8f5c']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakColor
        label="Barra superior"
        value={t.headerTone}
        options={['#b4a169', '#bcab74', '#a89456', '#9c8a5a']}
        onChange={(v) => setTweak('headerTone', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<HomeTweaks />);