function TweaksPanel({ visible, tweaks, setTweak }) {
  if (!visible) return null;
  const colors = [
    { name: 'Naranja industrial', hex: '#E8601C' },
    { name: 'Azul acero', hex: '#2E5BDA' },
    { name: 'Verde oliva', hex: '#5A7A2A' },
    { name: 'Rojo óxido', hex: '#B83218' },
    { name: 'Negro', hex: '#14130F' },
  ];
  return (
    <div className="tweaks-panel">
      <h5>Tweaks</h5>
      <div className="t-row">
        <div className="t-label">Color primario</div>
        <div className="color-swatches">
          {colors.map(c => (
            <div key={c.hex}
              className={`color-swatch ${tweaks.accent === c.hex ? 'active' : ''}`}
              style={{ background: c.hex }}
              title={c.name}
              onClick={() => setTweak('accent', c.hex)} />
          ))}
        </div>
      </div>
      <div className="t-row">
        <div className="t-label">Modo oscuro</div>
        <button className={`toggle ${tweaks.dark ? 'on' : ''}`} onClick={() => setTweak('dark', !tweaks.dark)}/>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });