/* === Tweaks Panel === */
const JurisTweaks = () => {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (window.__applyTweaks) window.__applyTweaks(tweaks);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakRadio
          label="Headline"
          value={tweaks.headline}
          onChange={(v) => setTweak('headline', v)}
          options={[
            { value: 'trust', label: 'Confiança' },
            { value: 'alarm', label: 'Alerta' },
            { value: 'direct', label: 'Direto' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Cor primária">
        <TweakRadio
          label="Tom"
          value={tweaks.primary}
          onChange={(v) => setTweak('primary', v)}
          options={[
            { value: 'navy', label: 'Navy clássico' },
            { value: 'midnight', label: 'Midnight' },
            { value: 'forest', label: 'Verde-jurídico' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Tipografia de títulos">
        <TweakRadio
          label="Display"
          value={tweaks.display}
          onChange={(v) => setTweak('display', v)}
          options={[
            { value: 'fraunces', label: 'Fraunces (serif)' },
            { value: 'sora', label: 'Sora (sans)' },
            { value: 'instrument', label: 'Instrument Serif' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Densidade">
        <TweakSlider
          label="Padding entre seções"
          min={60} max={160} step={10}
          value={tweaks.density}
          onChange={(v) => setTweak('density', v)}
          unit="px"
        />
      </TweakSection>
    </TweaksPanel>
  );
};

window.JurisTweaks = JurisTweaks;

/* === Apply tweaks side-effects === */
window.__applyTweaks = (tw) => {
  const root = document.documentElement;
  // Primary color
  if (tw.primary === 'navy') {
    root.style.setProperty('--navy-900', '#0B2545');
    root.style.setProperty('--navy-800', '#13315C');
    root.style.setProperty('--navy-700', '#1B3F73');
    root.style.setProperty('--navy-600', '#2A5085');
    root.style.setProperty('--blue-300', '#8DA9C4');
    root.style.setProperty('--blue-200', '#B6CADD');
  } else if (tw.primary === 'midnight') {
    root.style.setProperty('--navy-900', '#0A0E1A');
    root.style.setProperty('--navy-800', '#1B2A4E');
    root.style.setProperty('--navy-700', '#27376A');
    root.style.setProperty('--navy-600', '#3A4D85');
    root.style.setProperty('--blue-300', '#7E92C4');
    root.style.setProperty('--blue-200', '#A8B8DD');
  } else if (tw.primary === 'forest') {
    root.style.setProperty('--navy-900', '#0E2818');
    root.style.setProperty('--navy-800', '#1A4030');
    root.style.setProperty('--navy-700', '#265744');
    root.style.setProperty('--navy-600', '#347059');
    root.style.setProperty('--blue-300', '#86A998');
    root.style.setProperty('--blue-200', '#AEC8B9');
  }

  // Display font
  if (tw.display === 'fraunces') {
    root.style.setProperty('--font-display', "'Fraunces', serif");
  } else if (tw.display === 'sora') {
    root.style.setProperty('--font-display', "'Sora', sans-serif");
  } else if (tw.display === 'instrument') {
    root.style.setProperty('--font-display', "'Instrument Serif', serif");
  }

  // Density
  document.querySelectorAll('.section-pad').forEach(el => {
    el.style.padding = `${tw.density}px 0`;
  });
};