function TweaksPanel(){
  const { tweaks, setTweak } = useTweaks();
  const [open, setOpen] = React.useState(true);
  const [available, setAvailable] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setAvailable(true);
      if (e.data.type === '__deactivate_edit_mode') setAvailable(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e){}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  if (!available) return null;

  return (
    <div className="tweaks-panel">
      <h5>
        Tweaks
        <button onClick={()=>setOpen(!open)} style={{fontFamily:'var(--mono)', fontSize:10, opacity:0.7}}>{open ? '—' : '+'}</button>
      </h5>
      {open && (
        <>
          <div className="tweak-row">
            <div className="lbl">Accent dominance</div>
            <div className="tweak-opts">
              {['red', 'black', 'gray'].map(v => (
                <button key={v} className={`tweak-opt ${tweaks.accentMode === v ? 'on' : ''}`}
                  onClick={()=>setTweak('accentMode', v)}>{v}</button>
              ))}
            </div>
          </div>
          <div className="tweak-row">
            <div className="lbl">Theme</div>
            <div className="tweak-opts">
              {['light','dark'].map(v => (
                <button key={v} className={`tweak-opt ${tweaks.theme === v ? 'on' : ''}`}
                  onClick={()=>setTweak('theme', v)}>{v}</button>
              ))}
            </div>
          </div>
          <div className="tweak-row">
            <div className="lbl">Hero variant</div>
            <div className="tweak-opts">
              {[['stacked','Stacked'],['asym','Asymmetric'],['ticker','Ticker']].map(([v,l]) => (
                <button key={v} className={`tweak-opt ${tweaks.heroVariant === v ? 'on' : ''}`}
                  onClick={()=>setTweak('heroVariant', v)}>{l}</button>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}
window.TweaksPanel = TweaksPanel;