function TweaksPanel({ state, set, onClose, visible }) {
  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <div className="tweaks-panel__header">
        <span>TWEAKS · 01Forge</span>
        <span style={{ cursor: 'crosshair' }} onClick={onClose}>×</span>
      </div>
      <div className="tweaks-panel__body">

        <div className="tweak-row">
          <div className="tweak-label"><span>RAIN INTENSITY</span><span className="tweak-val">{state.rain.toFixed(2)}</span></div>
          <input type="range" min="0" max="2" step="0.05" value={state.rain} onChange={e => set({ rain: parseFloat(e.target.value) })} className="tweak-range" />
        </div>

        <div className="tweak-row">
          <div className="tweak-label"><span>MODE</span></div>
          <div className="tweak-seg">
            <button className={!state.inverted ? 'active' : ''} onClick={() => set({ inverted: false })}>DARK</button>
            <button className={state.inverted ? 'active' : ''} onClick={() => set({ inverted: true })}>LIGHT</button>
          </div>
        </div>

        <div className="tweak-toggle">
          <span className="tweak-label" style={{ flexDirection: 'row', gap: 6 }}>MOTION</span>
          <button className={state.motion ? 'on' : ''} onClick={() => set({ motion: !state.motion })}>
            {state.motion ? 'ON' : 'PAUSED'}
          </button>
        </div>

      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;