/* Mo Ran Spa — Tweaks panel (color emphasis · heading font · hero style) */
const MR_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "earth",
  "font": "cormorant",
  "hero": "split"
}/*EDITMODE-END*/;

function applyTweaks(t){
  const r = document.documentElement;
  r.setAttribute('data-palette', t.palette);
  r.setAttribute('data-font', t.font);
  const prevHero = r.getAttribute('data-hero');
  r.setAttribute('data-hero', t.hero);
  if (prevHero !== t.hero) window.dispatchEvent(new Event('tweaks:hero'));
}

function MoRanTweaks(){
  const [t, setTweak] = useTweaks(MR_TWEAKS);
  React.useEffect(() => { applyTweaks(t); }, [t.palette, t.font, t.hero]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color emphasis" />
      <TweakRadio
        label="Palette"
        value={t.palette}
        options={[
          { value:'earth',  label:'Earth' },
          { value:'forest', label:'Forest' },
          { value:'cream',  label:'Cream' }
        ]}
        onChange={(v) => setTweak('palette', v)} />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Heading font"
        value={t.font}
        options={[
          { value:'cormorant', label:'Cormorant' },
          { value:'fraunces',  label:'Fraunces' },
          { value:'playfair',  label:'Playfair' }
        ]}
        onChange={(v) => setTweak('font', v)} />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Hero style"
        value={t.hero}
        options={[
          { value:'split', label:'Editorial split' },
          { value:'full',  label:'Full-bleed photo' }
        ]}
        onChange={(v) => setTweak('hero', v)} />
    </TweaksPanel>
  );
}

// Apply default tweaks immediately so first paint is correct.
applyTweaks(MR_TWEAKS);

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