const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C96B4B",
  "typeface": "Refined",
  "heroImage": "color",
  "showTicker": true,
  "animations": true
}/*EDITMODE-END*/;

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

  // Accent color → accent tokens (normalize stale stored values)
  const ACCENTS = ['#C96B4B', '#7A8B6A', '#2D4F7A', '#A3B18A'];
  const accent = ACCENTS.includes(t.accent) ? t.accent : ACCENTS[0];
  React.useEffect(() => {
    document.documentElement.style.setProperty('--terracotta', accent);
  }, [accent]);

  // Heading typeface
  React.useEffect(() => {
    const map = {
      'Refined': '"Schibsted Grotesk", "Hanken Grotesk", sans-serif',
      'Japanese': '"Zen Kaku Gothic New", sans-serif',
    };
    document.documentElement.style.setProperty('--head', map[t.typeface] || map['Refined']);
  }, [t.typeface]);

  // Hero / banner image treatment
  React.useEffect(() => {
    document.querySelectorAll('.hb-media img, .bn-media img, .ed-media img, .ti img').forEach((img) => {
      img.style.filter = t.heroImage === 'muted' ? 'grayscale(0.4) brightness(0.98)' : '';
    });
  }, [t.heroImage]);

  // Category ticker
  React.useEffect(() => {
    document.querySelectorAll('.ticker').forEach((tk) => {
      tk.style.display = t.showTicker ? 'flex' : 'none';
    });
  }, [t.showTicker]);

  // Animations master toggle
  React.useEffect(() => {
    document.body.classList.toggle('no-anim', !t.animations);
  }, [t.animations]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={accent}
        options={ACCENTS}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Typeface" />
      <TweakRadio label="Headings" value={t.typeface === 'Japanese' ? 'Japanese' : 'Refined'}
        options={['Refined', 'Japanese']}
        onChange={(v) => setTweak('typeface', v)} />

      <TweakSection label="Imagery" />
      <TweakRadio label="Photo treatment" value={t.heroImage}
        options={['color', 'muted']}
        onChange={(v) => setTweak('heroImage', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Process ticker" value={t.showTicker}
        onChange={(v) => setTweak('showTicker', v)} />
      <TweakToggle label="Scroll animations" value={t.animations}
        onChange={(v) => setTweak('animations', v)} />
    </TweaksPanel>
  );
}

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