// Luna Tweaks — accent / hero media / headline font
const { useEffect } = React;

const ACCENTS = {
  'Тёплый коричневый': { a:'#9C7A55', d:'#6E5236', t:'#ECE2D2', t2:'#F4EDE0' },
  'Тёплый золотой':    { a:'#C6A368', d:'#9F7B3C', t:'#F1E9D8', t2:'#F7F1E5' },
  'Шалфейный':         { a:'#93A78F', d:'#6C8467', t:'#E9EEE6', t2:'#F2F5F0' }
};

const LUNA_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "Тёплый коричневый",
  "heroMedia": "Видео",
  "headline": "Spectral (serif)"
}/*EDITMODE-END*/;

function LunaTweaks() {
  const [t, setTweak] = useTweaks(LUNA_TWEAKS);

  useEffect(() => {
    const r = document.documentElement;
    const c = ACCENTS[t.accent] || ACCENTS['Тёплый коричневый'];
    r.style.setProperty('--accent', c.a);
    r.style.setProperty('--accent-deep', c.d);
    r.style.setProperty('--accent-tint', c.t);
    r.style.setProperty('--accent-tint-2', c.t2);
  }, [t.accent]);

  useEffect(() => {
    const m = document.getElementById('heroMedia');
    if (m) m.setAttribute('data-hero-media', t.heroMedia === 'Фото' ? 'photo' : 'video');
  }, [t.heroMedia]);

  useEffect(() => {
    document.documentElement.style.setProperty(
      '--display', t.headline === 'Manrope (sans)' ? 'var(--sans)' : 'var(--serif)'
    );
  }, [t.headline]);

  return (
    <TweaksPanel title="Luna · стиль">
      <TweakSection label="Акцент" />
      <TweakColor label="Цвет акцента"
        value={(ACCENTS[t.accent]||ACCENTS['Тёплый коричневый']).a}
        options={Object.values(ACCENTS).map(c => c.a)}
        onChange={(hex) => {
          const name = Object.keys(ACCENTS).find(k => ACCENTS[k].a === hex) || 'Тёплый коричневый';
          setTweak('accent', name);
        }} />
      <TweakSection label="Hero" />
      <TweakRadio label="Медиа в hero" value={t.heroMedia}
        options={['Видео', 'Фото']}
        onChange={(v) => setTweak('heroMedia', v)} />
      <TweakSection label="Типографика" />
      <TweakRadio label="Заголовки" value={t.headline}
        options={['Spectral (serif)', 'Manrope (sans)']}
        onChange={(v) => setTweak('headline', v)} />
    </TweaksPanel>
  );
}

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