/* Insider X — painel de Tweaks (React island) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c9a25f",
  "headingFont": "Schibsted Grotesk",
  "heroStyle": "serif-italic",
  "gridBg": true,
  "darker": false
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Schibsted Grotesk": '"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif',
  "Space Grotesk": '"Space Grotesk", ui-sans-serif, system-ui, sans-serif',
  "Instrument Serif": '"Instrument Serif", Georgia, serif'
};

function loadFont(name) {
  if (name === "Space Grotesk" && !document.getElementById('f-space')) {
    const l = document.createElement('link');
    l.id = 'f-space'; l.rel = 'stylesheet';
    l.href = 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap';
    document.head.appendChild(l);
  }
}

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // soft accent derived
    root.style.setProperty('--accent-soft', t.accent + '24');

    loadFont(t.headingFont);
    const stack = FONT_STACKS[t.headingFont] || FONT_STACKS["Schibsted Grotesk"];
    document.querySelectorAll('h1,h2,h3,.display,.h2,.h3,.brand,.svc-row .name').forEach((el) => {
      el.style.fontFamily = stack;
    });

    // hero accent word style
    const accentWord = document.querySelector('.hero h1 .accent-word');
    if (accentWord) {
      if (t.heroStyle === 'serif-italic') {
        accentWord.style.fontFamily = 'var(--serif)';
        accentWord.style.fontStyle = 'italic';
        accentWord.style.fontWeight = '400';
      } else {
        accentWord.style.fontFamily = '';
        accentWord.style.fontStyle = 'normal';
        accentWord.style.fontWeight = '500';
      }
    }

    // grid bg
    const grid = document.querySelector('.hero-grid-bg');
    if (grid) grid.style.display = t.gridBg ? '' : 'none';

    // darker mode
    root.style.setProperty('--bg', t.darker ? '#060607' : '#0a0a0b');
    root.style.setProperty('--bg-2', t.darker ? '#0a0a0c' : '#0f0f11');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Marca" />
      <TweakColor label="Cor de destaque" value={t.accent}
        options={['#c9a25f', '#e0432a', '#4ea3ff', '#3a8a5b', '#e8e6e0']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Tipografia" />
      <TweakSelect label="Fonte dos títulos" value={t.headingFont}
        options={["Schibsted Grotesk", "Space Grotesk", "Instrument Serif"]}
        onChange={(v) => setTweak('headingFont', v)} />
      <TweakRadio label="Palavra-destaque do hero" value={t.heroStyle}
        options={['serif-italic', 'normal']}
        onChange={(v) => setTweak('heroStyle', v)} />
      <TweakSection label="Ambiente" />
      <TweakToggle label="Grade no fundo do hero" value={t.gridBg}
        onChange={(v) => setTweak('gridBg', v)} />
      <TweakToggle label="Fundo mais escuro" value={t.darker}
        onChange={(v) => setTweak('darker', v)} />
    </TweaksPanel>
  );
}

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