/* Candela — Tweaks panel (drives the vanilla page via window.__candela + CSS vars) */
const { useState, useEffect } = React;

const CANDELA_TWEAK_DEFAULTS = {
  "heroImage": "candela1",
  "accent": "#b14431",
  "motion": true
};

const HERO_OPTIONS = [
  { value: "candela1", label: "The Bar" },
  { value: "candela5", label: "The Lounge" },
  { value: "candela3", label: "The Mezzanine" }
];

function heroSrc(key) {
  return 'uploads/' + key + '.jpeg';
}

function CandelaTweaks() {
  const [t, setTweak] = useTweaks(CANDELA_TWEAK_DEFAULTS);

  useEffect(() => {
    if (window.__candela) window.__candela.setHero(heroSrc(t.heroImage));
  }, [t.heroImage]);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  useEffect(() => {
    if (window.__candela) window.__candela.setMotion(!!t.motion);
  }, [t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Atmosphere" />
      <TweakSelect
        label="Hero image"
        value={t.heroImage}
        options={HERO_OPTIONS}
        onChange={(v) => setTweak('heroImage', v)}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#b14431", "#90321f", "#c4986f"]}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Cinematic motion"
        value={t.motion}
        onChange={(v) => setTweak('motion', v)}
      />
    </TweaksPanel>
  );
}

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