// Skylife — Tweaks panel
const SKYLIFE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e08a4c",
  "parallax": 1,
  "headlineStyle": "mixed"
}/*EDITMODE-END*/;

function SkylifeTweaks() {
  const [t, setTweak] = useTweaks(SKYLIFE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // derive a deeper variant for light backgrounds
    root.style.setProperty('--accent-deep', `oklch(from ${t.accent} calc(l - 0.1) c h)`);
  }, [t.accent]);

  React.useEffect(() => {
    if (window.__setParallaxIntensity) {
      window.__setParallaxIntensity(t.parallax);
    }
  }, [t.parallax]);

  React.useEffect(() => {
    // toggle italic-serif accents in headlines
    document.body.classList.toggle('no-serif', t.headlineStyle === 'plain');
  }, [t.headlineStyle]);

  React.useEffect(() => {
    if (!document.getElementById('skylife-tweak-style')) {
      const s = document.createElement('style');
      s.id = 'skylife-tweak-style';
      s.textContent = 'body.no-serif .serif { font-family: var(--font-display); font-style: normal; font-weight: 800; }';
      document.head.appendChild(s);
    }
  }, []);

  return (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#e08a4c', '#d96a55', '#5b9bd0', '#7fae7a']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Motion" />
      <TweakSlider
        label="Parallax intensity"
        value={t.parallax}
        min={0}
        max={2}
        step={0.1}
        onChange={(v) => setTweak('parallax', v)}
      />
      <TweakSection label="Type" />
      <TweakRadio
        label="Headline accents"
        value={t.headlineStyle}
        options={['mixed', 'plain']}
        onChange={(v) => setTweak('headlineStyle', v)}
      />
    </TweaksPanel>
  );
}

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