// Tweaks panel — exposes a few design knobs
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c2855a",
  "headlineStyle": "italic",
  "heroBg": "cream",
  "showStats": true
}/*EDITMODE-END*/;

function MyrraeTweaks() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live by updating CSS vars
  React.useEffect(() => {
    if (!tweaks) return;
    document.documentElement.style.setProperty('--myrrae-orange', tweaks.accent);
    document.documentElement.style.setProperty('--myrrae-orange-30', tweaks.accent + '4D');
    document.documentElement.style.setProperty('--fg-accent', tweaks.accent);

    const bgMap = {
      cream:  '#faf9f6',
      ivory:  '#f3eee3',
      sage:   '#e6ebe3',
    };
    document.documentElement.style.setProperty('--myrrae-bg', bgMap[tweaks.heroBg] || bgMap.cream);
    document.documentElement.style.setProperty('--bg-page', bgMap[tweaks.heroBg] || bgMap.cream);

    const stats = document.querySelector('.hero .stats');
    if (stats) stats.style.display = tweaks.showStats ? '' : 'none';

    const h1 = document.querySelector('.hero h1 em');
    if (h1) h1.style.fontStyle = tweaks.headlineStyle === 'italic' ? 'italic' : 'normal';
  }, [tweaks]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Couleur d'accent" />
      <window.TweakColor
        label="Accent"
        options={['#c2855a', '#2e6148', '#b34c5c', '#6b5a8e', '#1a1714']}
        value={tweaks.accent}
        onChange={(v) => setTweak('accent', v)}
      />

      <window.TweakSection label="Arrière-plan" />
      <window.TweakRadio
        label="Page"
        options={[
          { label: 'Crème', value: 'cream' },
          { label: 'Ivoire', value: 'ivory' },
          { label: 'Sauge', value: 'sage' },
        ]}
        value={tweaks.heroBg}
        onChange={(v) => setTweak('heroBg', v)}
      />

      <window.TweakSection label="Mise en page" />
      <window.TweakRadio
        label="Titre"
        options={[
          { label: 'Italique', value: 'italic' },
          { label: 'Romain', value: 'normal' },
        ]}
        value={tweaks.headlineStyle}
        onChange={(v) => setTweak('headlineStyle', v)}
      />
      <window.TweakToggle
        label="Stats du hero"
        value={tweaks.showStats}
        onChange={(v) => setTweak('showStats', v)}
      />
    </window.TweaksPanel>
  );
}

window.MyrraeTweaks = MyrraeTweaks;