// Tweaks panel for stageformedics.com
const { useEffect } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    palette: 'midnight',
    heroStyle: 'editorial',
    showOrnament: true,
  });

  // mirror to body data-attrs
  useEffect(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.hero = t.heroStyle;
    document.body.dataset.showOrnament = String(t.showOrnament !== false);
  }, [t.palette, t.heroStyle, t.showOrnament]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero layout" />
      <TweakRadio
        label="Style"
        value={t.heroStyle}
        options={[
          { value: 'editorial', label: 'Editorial' },
          { value: 'centered',  label: 'Centered' },
          { value: 'stacked',   label: 'Photo' },
        ]}
        onChange={v => setTweak('heroStyle', v)}
      />
      <TweakToggle
        label="Numeral ornament"
        value={t.showOrnament !== false}
        onChange={v => setTweak('showOrnament', v)}
      />

      <TweakSection label="Palette" />
      <TweakSelect
        label="Theme"
        value={t.palette}
        options={[
          { value: 'midnight', label: 'Midnight — amber' },
          { value: 'amber',    label: 'Warm cream — terracotta' },
          { value: 'ink',      label: 'Ink — navy' },
          { value: 'olive',    label: 'Olive' },
        ]}
        onChange={v => setTweak('palette', v)}
      />
    </TweaksPanel>
  );
}

// pass defaults through to React (the host parses the JSON between EDITMODE markers)
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;

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