/* Tweaks app for Philotium — three expressive controls:
   • Mood : reshapes the shader (speed/scale/halo/aurora bands)
   • Tone : repaints the palette (CSS vars + shader base colors)
   • Voice: re-types the page (display + body font family swap) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "aurora",
  "tone": "bronze",
  "voice": "modernist"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.mood  = t.mood;
    root.dataset.tone  = t.tone;
    root.dataset.voice = t.voice;
    if (typeof window.__applyShaderMood === 'function') {
      window.__applyShaderMood(t.mood, t.tone);
    }
  }, [t.mood, t.tone, t.voice]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" hint="Shader character" />
      <TweakRadio
        label="Atmosphere"
        value={t.mood}
        options={['calm', 'charged', 'aurora']}
        onChange={(v) => setTweak('mood', v)}
      />

      <TweakSection label="Tone" hint="Palette temperature" />
      <TweakRadio
        label="Palette"
        value={t.tone}
        options={['graphite', 'bronze', 'steel']}
        onChange={(v) => setTweak('tone', v)}
      />

      <TweakSection label="Voice" hint="Type personality" />
      <TweakRadio
        label="Typeface"
        value={t.voice}
        options={['modernist', 'editorial', 'technical']}
        onChange={(v) => setTweak('voice', v)}
      />
    </TweaksPanel>
  );
}

// Mount into a dedicated root so we don't touch the page DOM.
const __twkRoot = document.createElement('div');
__twkRoot.id = '__philotium-tweaks-root';
document.body.appendChild(__twkRoot);
ReactDOM.createRoot(__twkRoot).render(<PhilotiumTweaks />);