/* RootBound Walkthrough — Tweaks panel (React, uses the starter shell) */
const RB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "speed": 1,
  "captions": true,
  "voiceover": false,
  "accent": "gold",
  "tone": "blend",
  "name": ""
}/*EDITMODE-END*/;

function RBTweaks() {
  const [t, setTweak] = useTweaks(RB_TWEAK_DEFAULTS);

  // push every change into the vanilla player
  React.useEffect(() => {
    if (window.RBWalk && window.RBWalk.applyTweaks) window.RBWalk.applyTweaks(t);
  }, [t.speed, t.captions, t.voiceover, t.accent, t.tone, t.name]);

  return (
    <TweaksPanel>
      <TweakSection label="Playback" />
      <TweakSlider label="Autoplay speed" value={t.speed} min={0.5} max={2} step={0.1}
        unit="×" onChange={(v) => setTweak("speed", v)} />
      <TweakToggle label="Narration captions" value={t.captions}
        onChange={(v) => setTweak("captions", v)} />
      <TweakToggle label="Voiceover narration" value={t.voiceover}
        onChange={(v) => setTweak("voiceover", v)} />

      <TweakSection label="Look" />
      <TweakRadio label="Accent emphasis" value={t.accent}
        options={["gold", "navy"]}
        onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Voice" />
      <TweakRadio label="Headline tone" value={t.tone}
        options={["warm", "blend", "exec"]}
        onChange={(v) => setTweak("tone", v)} />
      <TweakText label="Candidate name" value={t.name} placeholder="e.g. Jordan"
        onChange={(v) => setTweak("name", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("rb-tweaks-root")).render(<RBTweaks />);