const Tweaks = ({ tweaks, setTweaks, visible }) => {
  if (!visible) return null;
  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  return (
    <div className={`tweaks on`}>
      <h4>Tweaks · BBOX</h4>
      <div className="field">
        <div className="lb">Tema</div>
        <div className="seg">
          <button className={tweaks.theme==='dark'?'on':''} onClick={()=>set('theme','dark')}>Dark</button>
          <button className={tweaks.theme==='light'?'on':''} onClick={()=>set('theme','light')}>Light</button>
        </div>
      </div>
      <div className="field">
        <div className="lb">Densidade</div>
        <div className="seg">
          <button className={tweaks.density==='spacious'?'on':''} onClick={()=>set('density','spacious')}>Espaçado</button>
          <button className={tweaks.density==='compact'?'on':''} onClick={()=>set('density','compact')}>Compacto</button>
        </div>
      </div>
      <div className="field">
        <div className="lb">Layout de serviços</div>
        <div className="seg">
          <button className={tweaks.servicesLayout==='grid'?'on':''} onClick={()=>set('servicesLayout','grid')}>Grid</button>
          <button className={tweaks.servicesLayout==='list'?'on':''} onClick={()=>set('servicesLayout','list')}>Lista</button>
          <button className={tweaks.servicesLayout==='bento'?'on':''} onClick={()=>set('servicesLayout','bento')}>Bento</button>
        </div>
      </div>
    </div>
  );
};
window.Tweaks = Tweaks;