/* ============================================================
   CLIPR — Tweaks: expressive controls that reshape the feel.
   Mounts a small React island; drives the (vanilla) page via
   CSS variables + GSAP's global timeline.
   ============================================================ */

const CLIPR_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "atmosphere": "Deep space",
  "glow": 1,
  "motion": "Cinematic"
}/*EDITMODE-END*/;

// Atmosphere mood → the whole volumetric glow palette behind the page
const CLIPR_ATMOS = {
  "Deep space": { blue: "#3f6ff0", violet: "#7a5cf0" }, // cool blue/indigo (brand default)
  "Aurora":     { blue: "#2ea88a", violet: "#5fce8a" }, // teal/green, leans into the lime
  "Nebula":     { blue: "#4a5cff", violet: "#a64cff" }, // vivid electric purple
  "Mono":       { blue: "#4a566e", violet: "#5b6175" }, // desaturated slate, minimal
};
const CLIPR_MOTION = { "Calm": 0.6, "Cinematic": 1, "Hyper": 1.7 };

function cliprApplyTweaks(t) {
  const root = document.documentElement;
  const a = CLIPR_ATMOS[t.atmosphere] || CLIPR_ATMOS["Deep space"];
  root.style.setProperty('--glow-blue', a.blue);
  root.style.setProperty('--glow-violet', a.violet);
  root.style.setProperty('--atmos-op', String(t.glow));
  const m = CLIPR_MOTION[t.motion] || 1;
  root.style.setProperty('--motion', String(m));
  window.__cliprMotion = m;
  if (window.gsap) gsap.globalTimeline.timeScale(m);
}

function CliprTweaks() {
  const [t, setTweak] = useTweaks(CLIPR_TWEAK_DEFAULTS);
  React.useEffect(() => { cliprApplyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere" />
      <TweakSelect
        label="Mood"
        value={t.atmosphere}
        options={["Deep space", "Aurora", "Nebula", "Mono"]}
        onChange={(v) => setTweak('atmosphere', v)}
      />
      <TweakSlider
        label="Glow"
        value={t.glow}
        min={0.3}
        max={1.5}
        step={0.05}
        onChange={(v) => setTweak('glow', v)}
      />
      <TweakSection label="Motion" />
      <TweakRadio
        label="Energy"
        value={t.motion}
        options={["Calm", "Cinematic", "Hyper"]}
        onChange={(v) => setTweak('motion', v)}
      />
    </TweaksPanel>
  );
}

// apply default/persisted values immediately (the host rewrites the EDITMODE
// block above on save, so CLIPR_TWEAK_DEFAULTS already reflects saved state)
cliprApplyTweaks(CLIPR_TWEAK_DEFAULTS);

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