/* Tweaks UI — controls theme, heading font, decor density */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "blush",
  "headingFont": "Cormorant Garamond",
  "decorDensity": "standard",
  "heroLayout": "split"
}/*EDITMODE-END*/;

function applyAll(t) {
  const root = document.documentElement;
  root.dataset.theme = t.theme || 'blush';
  // heading font swap via CSS variable
  const fontMap = {
    'Cormorant Garamond': "'Cormorant Garamond', 'Cormorant', Georgia, serif",
    'DM Serif Display':   "'DM Serif Display', Georgia, serif",
    'Italiana':           "'Italiana', Georgia, serif",
    'Playfair Display':   "'Playfair Display', Georgia, serif"
  };
  root.style.setProperty('--font-serif', fontMap[t.headingFont] || fontMap['Cormorant Garamond']);

  // decor density — toggles botanical opacity
  const d = t.decorDensity || 'standard';
  const opacityMap = { minimal: 0.18, standard: 0.55, lush: 0.85 };
  root.style.setProperty('--decor-op', opacityMap[d]);
  document.querySelectorAll('.hero-bot, .quiz-bot, .optin-bot').forEach(el => {
    el.style.opacity = opacityMap[d];
  });

  // hero layout
  document.body.dataset.heroLayout = t.heroLayout || 'split';
}

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

  useEffect(() => { applyAll(t); }, [t]);

  // Load extra fonts lazily when user picks them
  useEffect(() => {
    const f = t.headingFont;
    if (!f || f === 'Cormorant Garamond') return;
    const id = 'extra-font-' + f.replace(/\s+/g, '-');
    if (document.getElementById(id)) return;
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=' + f.replace(/\s+/g, '+') + ':ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap';
    document.head.appendChild(link);
  }, [t.headingFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Art direction">
        <TweakRadio label="Theme" value={t.theme} onChange={v => setTweak('theme', v)}
          options={[
            { value: 'blush', label: 'Blush & Sage' },
            { value: 'linen', label: 'Linen & Clay' }
          ]} />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakSelect label="Heading font" value={t.headingFont} onChange={v => setTweak('headingFont', v)}
          options={[
            'Cormorant Garamond',
            'DM Serif Display',
            'Italiana',
            'Playfair Display'
          ]} />
      </TweakSection>

      <TweakSection label="Decoration">
        <TweakRadio label="Botanical density" value={t.decorDensity} onChange={v => setTweak('decorDensity', v)}
          options={[
            { value: 'minimal', label: 'Minimal' },
            { value: 'standard', label: 'Standard' },
            { value: 'lush', label: 'Lush' }
          ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

const mount = document.createElement('div');
document.body.appendChild(mount);
ReactDOM.createRoot(mount).render(<App />);