// tweaks-app.jsx — mounts the Tweaks overlay and maps tweak values onto
// the plain-HTML page via CSS custom properties + body data-attributes.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#17285e", "#c08e34", "#f4f3ef"],
  "headingFont": "Marcellus",
  "motion": "immersive"
}/*EDITMODE-END*/;

const HEADING_STACKS = {
  "Marcellus": "'Marcellus', serif",
  "Cormorant Garamond": "'Cormorant Garamond', serif",
  "Playfair Display": "'Playfair Display', serif"
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const pal = t.palette || TWEAK_DEFAULTS.palette;
    root.style.setProperty('--primary', pal[0]);
    root.style.setProperty('--accent', pal[1]);
    root.style.setProperty('--bg', pal[2]);
    root.style.setProperty('--font-display', HEADING_STACKS[t.headingFont] || HEADING_STACKS.Marcellus);
    document.body.setAttribute('data-motion', t.motion || 'immersive');
  }, [t.palette, t.headingFont, t.motion]);

  return (
    <React.Fragment>
    <span data-tweaks-ready="1" style={{ display: 'none' }} />
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Direction"
        value={t.palette}
        options={[
          ["#17285e", "#c08e34", "#f4f3ef"],
          ["#6e1f2a", "#c8922b", "#f7f1e7"],
          ["#1f5d4c", "#b8862f", "#f4f0e6"],
          ["#2a3550", "#a9843f", "#f2f1ec"]
        ]}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakSection label="Typography" />
      <TweakSelect
        label="Heading font"
        value={t.headingFont}
        options={["Marcellus", "Cormorant Garamond", "Playfair Display"]}
        onChange={(v) => setTweak('headingFont', v)}
      />
      <TweakSection label="Motion" />
      <TweakRadio
        label="Cinematic motion"
        value={t.motion}
        options={["off", "subtle", "immersive"]}
        onChange={(v) => setTweak('motion', v)}
      />
    </TweaksPanel>
    </React.Fragment>
  );
}

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