// Resova IQ — site Tweaks panel. Persists to localStorage (riq_tweaks) and
// applies across every page via window.RIQ.applyTweaks (see site.js).

const RIQ_PALETTES = {
  Azure:  ['#6FC8DA', '#00A5E4', '#1A6B8A', '#8FDCEC', '#1488C8'],
  Teal:   ['#6FD6C8', '#1FB6A6', '#0B8A82', '#7CE0D2', '#149B92'],
  Indigo: ['#7CA8F2', '#3F6FD7', '#1E3FA8', '#8FB6F7', '#2C52C8'],
  Violet: ['#B58BF2', '#7B4FD7', '#5226A8', '#C49DF7', '#6A3CC8'],
};

const RIQ_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#6FC8DA", "#00A5E4", "#1A6B8A", "#8FDCEC", "#1488C8"],
  "glow": 0.32,
  "font": "Montserrat",
  "density": "regular",
  "heroDark": true,
  "voice": "playful"
}/*EDITMODE-END*/;

function riqInitial() {
  let stored = {};
  try { stored = JSON.parse(localStorage.getItem('riq_tweaks') || '{}'); } catch (e) {}
  return Object.assign({}, RIQ_DEFAULTS, stored);
}

function RIQTweaks() {
  const [t, setTweak] = useTweaks(riqInitial());

  // Mirror to localStorage + re-apply on every change (covers cross-page).
  React.useEffect(() => {
    localStorage.setItem('riq_tweaks', JSON.stringify(t));
    if (window.RIQ) window.RIQ.applyTweaks(t);
  }, [t]);

  const palMatch = (arr) => JSON.stringify(arr) === JSON.stringify(t.palette);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent gradient"
        value={t.palette}
        options={Object.values(RIQ_PALETTES)}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakSlider
        label="Glow intensity"
        value={Math.round(t.glow * 100)}
        min={0} max={70} step={2} unit="%"
        onChange={(v) => setTweak('glow', v / 100)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Heading font"
        value={t.font}
        options={['Montserrat', 'Space Grotesk', 'Sora', 'Manrope']}
        onChange={(v) => setTweak('font', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Hero"
        value={t.heroDark ? 'dark' : 'light'}
        options={['dark', 'light']}
        onChange={(v) => setTweak('heroDark', v === 'dark')}
      />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'spacious']}
        onChange={(v) => setTweak('density', v)}
      />
    </TweaksPanel>
  );
}

(function mountRIQTweaks() {
  const el = document.getElementById('tweaks-root');
  if (el && window.ReactDOM) ReactDOM.createRoot(el).render(<RIQTweaks />);
})();