/* Sovereign — Tweaks panel (React island over the vanilla page) */

const SOV_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hazeTop": 0.12,
  "hazeMax": 0.94,
  "skylineY": 60,
  "sheen": true,
  "reveals": true,
  "goldTone": "Classic"
}/*EDITMODE-END*/;

function applyGold(tone) {
  const map = {
    classic:   ['#f0dcab', '#e6cd93', '#d3ad68', '#c0944a', '#a87e3a'],
    champagne: ['#f7e9c8', '#eed9aa', '#e2c485', '#cfa961', '#b48f45'],
    bronze:    ['#e7c98a', '#d6ae66', '#c2974a', '#a87e3a', '#8a6526']
  };
  const g = map[(tone || 'classic').toLowerCase()] || map.classic;
  const r = document.documentElement.style;
  r.setProperty('--gold-200', g[0]);
  r.setProperty('--gold-300', g[1]);
  r.setProperty('--gold-400', g[2]);
  r.setProperty('--gold-500', g[3]);
  r.setProperty('--gold-600', g[4]);
  r.setProperty('--gold-grad', `linear-gradient(135deg, ${g[0]} 0%, ${g[2]} 45%, ${g[4]} 100%)`);
}

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

  React.useEffect(() => {
    if (window.SOV) {
      window.SOV.set({
        hazeTop: t.hazeTop,
        hazeMax: t.hazeMax,
        skylineY: t.skylineY,
        sheen: t.sheen,
        reveals: t.reveals
      });
    }
    applyGold(t.goldTone);
  }, [t.hazeTop, t.hazeMax, t.skylineY, t.sheen, t.reveals, t.goldTone]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero Skyline" />
      <TweakSlider label="Top haze" value={t.hazeTop} min={0} max={0.6} step={0.02}
        onChange={(v) => setTweak('hazeTop', v)} />
      <TweakSlider label="Darken on scroll" value={t.hazeMax} min={0.4} max={1} step={0.02}
        onChange={(v) => setTweak('hazeMax', v)} />
      <TweakSlider label="Skyline height" value={t.skylineY} min={0} max={100} unit="%"
        onChange={(v) => setTweak('skylineY', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Gold sheen on scroll" value={t.sheen}
        onChange={(v) => setTweak('sheen', v)} />
      <TweakToggle label="Scroll reveals" value={t.reveals}
        onChange={(v) => setTweak('reveals', v)} />

      <TweakSection label="Brand" />
      <TweakRadio label="Gold tone" value={t.goldTone}
        options={['Classic', 'Champagne', 'Bronze']}
        onChange={(v) => setTweak('goldTone', v)} />
    </TweaksPanel>
  );
}

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