/* ============================================================
   Tweaks island — drives live variations on the page.
   Applies values via CSS variables + data-attributes so the
   vanilla page reacts. Mounted into #tweaks-root.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroBg": "dusk",
  "accent": "coral",
  "headlineFont": "geometric",
  "rhythm": "alternating",
  "marqueeSpeed": 48
}/*EDITMODE-END*/;

const ACCENTS = {
  coral:      { accent: '#E77E7C', a2: '#F2B53B', a3: '#0082B8' },
  yellow:     { accent: '#F2B53B', a2: '#E77E7C', a3: '#0082B8' },
  multicolor: { accent: '#E77E7C', a2: '#F2B53B', a3: '#0082B8' },
};

function applyTweaks(t){
  const root = document.documentElement;
  const body = document.body;
  // hero background
  root.dataset.heroBg = t.heroBg;
  // accent theme
  const a = ACCENTS[t.accent] || ACCENTS.coral;
  root.style.setProperty('--accent', a.accent);
  root.style.setProperty('--accent-2', a.a2);
  root.style.setProperty('--accent-3', a.a3);
  body.dataset.accent = t.accent;
  // headline font
  root.style.setProperty('--font-display', t.headlineFont === 'serif'
    ? "'Newsreader', Georgia, serif"
    : "'Jost', system-ui, sans-serif");
  body.dataset.headline = t.headlineFont;
  // section rhythm
  body.dataset.rhythm = t.rhythm;
  // marquee speed
  root.style.setProperty('--marquee-duration', t.marqueeSpeed + 's');
}

function TweaksApp(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio
        label="Background"
        value={t.heroBg}
        options={[
          { value: 'dusk', label: 'Dusk photo' },
          { value: 'night', label: 'Night photo' },
          { value: 'gradient', label: 'Gradient' },
        ]}
        onChange={(v) => setTweak('heroBg', v)}
      />

      <TweakSection label="Color" />
      <TweakRadio
        label="Accent theme"
        value={t.accent}
        options={[
          { value: 'coral', label: 'Coral' },
          { value: 'yellow', label: 'Yellow' },
          { value: 'multicolor', label: 'Multicolor' },
        ]}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Section rhythm"
        value={t.rhythm}
        options={[
          { value: 'alternating', label: 'Light / dark' },
          { value: 'navy', label: 'All navy' },
        ]}
        onChange={(v) => setTweak('rhythm', v)}
      />

      <TweakSection label="Type" />
      <TweakRadio
        label="Headlines"
        value={t.headlineFont}
        options={[
          { value: 'geometric', label: 'Geometric' },
          { value: 'serif', label: 'Serif' },
        ]}
        onChange={(v) => setTweak('headlineFont', v)}
      />

      <TweakSection label="Carousel" />
      <TweakSlider
        label="Scroll speed"
        value={t.marqueeSpeed}
        min={20} max={90} step={2} unit="s"
        onChange={(v) => setTweak('marqueeSpeed', v)}
      />
    </TweaksPanel>
  );
}

// Apply persisted/default tweaks immediately so first paint is correct,
// then mount the panel.
(function bootstrap(){
  let saved = {};
  try { saved = JSON.parse(localStorage.getItem('tweaks') || '{}'); } catch(e){}
  applyTweaks(Object.assign({}, TWEAK_DEFAULTS, saved));
  const mount = document.getElementById('tweaks-root');
  if (mount && window.ReactDOM) {
    ReactDOM.createRoot(mount).render(<TweaksApp />);
  }
})();