// Tweaks for MG Capital Partners hotsite
const { useEffect } = React;

function MGTweaks(){
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    accent:"#C9A55C", accentDeep:"#8A6B25", ink:"#0A0A0B",
    displayFont:"Cormorant Garamond", density:"regular", heroBg:"skyline"
  });

  useEffect(()=>{
    window.__applyTweaks && window.__applyTweaks(t);
  },[t]);

  return (
    <TweaksPanel>
      <TweakSection label="Paleta" />
      <TweakColor label="Dourado" value={t.accent}
        options={["#C9A55C","#D4AF37","#B8864A","#A8893E","#E0B95C"]}
        onChange={(v)=>setTweak({accent:v, accentDeep: shade(v,-30)})} />
      <TweakColor label="Fundo" value={t.ink}
        options={["#0A0A0B","#101418","#0F0D0A","#12100C","#000000"]}
        onChange={(v)=>setTweak('ink',v)} />

      <TweakSection label="Tipografia display" />
      <TweakSelect label="Família serif" value={t.displayFont}
        options={["Cormorant Garamond","Playfair Display","Libre Caslon Text","DM Serif Display","EB Garamond"]}
        onChange={(v)=>{ loadFont(v); setTweak('displayFont', v); }} />

      <TweakSection label="Densidade" />
      <TweakRadio label="Espaço" value={t.density}
        options={["dense","regular","airy"]}
        onChange={(v)=>setTweak('density', v)} />
    </TweaksPanel>
  );
}

function shade(hex, percent){
  const n = parseInt(hex.slice(1),16);
  let r=(n>>16)&255, g=(n>>8)&255, b=n&255;
  r=Math.max(0,Math.min(255, r + Math.round(255*percent/100)));
  g=Math.max(0,Math.min(255, g + Math.round(255*percent/100)));
  b=Math.max(0,Math.min(255, b + Math.round(255*percent/100)));
  return '#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('');
}

const loadedFonts = new Set(["Cormorant Garamond","Manrope"]);
function loadFont(family){
  if(loadedFonts.has(family)) return;
  loadedFonts.add(family);
  const link = document.createElement('link');
  link.rel='stylesheet';
  link.href=`https://fonts.googleapis.com/css2?family=${family.replace(/ /g,'+')}:wght@300;400;500;600;700&display=swap`;
  document.head.appendChild(link);
}

window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;
const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<MGTweaks />);