// tweaks.jsx - in-design tweak controls
const { useState: useStateT, useEffect: useEffectT } = React;

const TweaksPanel = ({ active, tweaks, setTweaks }) => {
  if (!active) return null;

  const update = (key, val) => {
    const next = { ...tweaks, [key]: val };
    setTweaks(next);
    try {
      window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[key]: val}}, '*');
    } catch(e){}
  };

  const Group = ({ label, k, options }) => (
    <div className="tweak-row">
      <label>{label}</label>
      <div className="tweak-opts">
        {options.map(o => (
          <button key={o.v} className={tweaks[k]===o.v?'active':''} onClick={()=>update(k,o.v)}>{o.l}</button>
        ))}
      </div>
    </div>
  );

  return (
    <div className="tweaks">
      <h4>Tweaks</h4>
      <Group label="Hero · Narrativa" k="heroMode" options={[
        {v:'editorial', l:'Editorial'},
        {v:'question', l:'Pergunta'},
        {v:'statement', l:'Declaração'},
      ]}/>
      <Group label="Cases · Layout" k="casesMode" options={[
        {v:'feature', l:'Feature'},
        {v:'grid', l:'Grid'},
      ]}/>
      <Group label="Intensidade do amarelo" k="accentIntensity" options={[
        {v:'subtle', l:'Sutil'},
        {v:'bold', l:'Acento'},
      ]}/>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;