/* Tweaks app — three expressive controls that reshape the feel of the page.
   Mood (palette), Voice (typography), Texture (grain + glow atmosphere). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "editorial",
  "voice": "editorial",
  "texture": "editorial"
}/*EDITMODE-END*/;

const MOODS = [
  { value: 'editorial', label: 'Editorial' },
  { value: 'midnight',  label: 'Midnight'  },
  { value: 'library',   label: 'Library'   },
];

const VOICES = [
  { value: 'editorial',  label: 'Editorial'  },
  { value: 'modern',     label: 'Modern'     },
  { value: 'manuscript', label: 'Manuscript' },
];

const TEXTURES = [
  { value: 'subtle',    label: 'Subtle'    },
  { value: 'editorial', label: 'Editorial' },
  { value: 'lush',      label: 'Lush'      },
];

function applyClass(prefix, value){
  const b = document.body;
  // Remove any existing class with this prefix
  [...b.classList].forEach(c => { if (c.startsWith(prefix + '-')) b.classList.remove(c); });
  b.classList.add(`${prefix}-${value}`);
}

function TweaksApp(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyClass('mood',    t.mood);    }, [t.mood]);
  React.useEffect(() => { applyClass('voice',   t.voice);   }, [t.voice]);
  React.useEffect(() => { applyClass('texture', t.texture); }, [t.texture]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Mood" subtitle="Palette & accent — the room's lighting.">
        <TweakRadio
          label="Palette"
          value={t.mood}
          options={MOODS}
          onChange={(v) => setTweak('mood', v)}
        />
      </TweakSection>

      <TweakSection title="Voice" subtitle="Type pairing — how the words speak.">
        <TweakRadio
          label="Pairing"
          value={t.voice}
          options={VOICES}
          onChange={(v) => setTweak('voice', v)}
        />
      </TweakSection>

      <TweakSection title="Texture" subtitle="Grain + atmospheric glow.">
        <TweakRadio
          label="Atmosphere"
          value={t.texture}
          options={TEXTURES}
          onChange={(v) => setTweak('texture', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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