const TweaksPanel = ({ open, state, setState }) => {
  if (!open) return null;
  const accents = ["coral","yellow","blue","mint","lilac"];
  return (
    <div className="tweaks-panel on">
      <h4>Tweaks</h4>
      <div className="group">
        <label>Hero variant</label>
        <div className="opt-row">
          {[
            {k:"speed",l:"Speed"},
            {k:"reach",l:"Reach"},
            {k:"outcome",l:"Outcomes"},
          ].map(o=>(
            <button key={o.k} className={state.heroVariant===o.k?"on":""} onClick={()=>setState({...state,heroVariant:o.k})}>{o.l}</button>
          ))}
        </div>
      </div>
      <div className="group">
        <label>Primary accent</label>
        <div className="swatch-row">
          {accents.map(c=>(
            <div key={c} className={`swatch ${state.primaryAccent===c?"on":""}`} style={{background:`var(--${c})`}} onClick={()=>setState({...state,primaryAccent:c})}/>
          ))}
        </div>
      </div>
      <div className="group">
        <label>Playfulness</label>
        <div className="opt-row">
          {[
            {k:"low",l:"Restrained"},
            {k:"high",l:"Maximal"},
          ].map(o=>(
            <button key={o.k} className={state.playfulness===o.k?"on":""} onClick={()=>setState({...state,playfulness:o.k})}>{o.l}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;