function TweaksPanel({ tweaks, setTweak, visible, onClose }) {
  if (!visible) return null;
  const { t } = React.useContext(LangContext);
  const swatches = ['#ff1f3d', '#ff6b00', '#00e0ff', '#b300ff', '#00ff88', '#ffd400'];
  const fonts = [['orbitron','Orbitron'],['rubik','Rubik'],['inter','Inter']];
  const themes = [
    { key: 'dark',     label: 'DARK',     accent: '#ff1f3d', bg: 'linear-gradient(135deg,#07050a,#15101a)' },
    { key: 'light',    label: 'LIGHT',    accent: '#ff1f3d', bg: 'linear-gradient(135deg,#f5f1ec,#e2dacf)' },
    { key: 'cyber',    label: 'CYBER',    accent: '#00e0ff', bg: 'linear-gradient(135deg,#04060e,#0a1a3a)' },
    { key: 'midnight', label: 'MIDNIGHT', accent: '#b300ff', bg: 'linear-gradient(135deg,#090618,#1a0f3d)' },
  ];
  return (
    <div className="tweaks">
      <div className="tweaks__header">
        <div className="mono">{t?.tweaksTitle || 'CUSTOMIZE'}</div>
        {onClose && <button className="tweaks__close" onClick={onClose} data-hover>✕</button>}
      </div>
      <div className="tweaks__body">
        <Row label="LANGUAGE"><Seg opts={[['en','English'],['ar','عربي']]} val={tweaks.lang} onChange={v=>setTweak('lang',v)}/></Row>
        <Row label="THEME">
          <div className="tw-themes">
            {themes.map(th => (
              <button
                key={th.key}
                className={`tw-theme ${tweaks.theme===th.key?'is-active':''}`}
                onClick={()=>setTweak('theme',th.key)}
                data-hover
              >
                <span className="tw-theme__swatch" style={{background: th.bg, boxShadow: `inset 0 0 0 1px ${th.accent}66`}}></span>
                {th.label}
              </button>
            ))}
          </div>
        </Row>
        <Row label="ACCENT">
          <div className="tweak-swatches">
            {swatches.map(c => (
              <button key={c} className={`tw-swatch ${tweaks.accent===c?'is-active':''}`} style={{background:c}} onClick={()=>setTweak('accent',c)} data-hover/>
            ))}
          </div>
        </Row>
        <Row label="FONT"><Seg opts={fonts} val={tweaks.font} onChange={v=>setTweak('font',v)}/></Row>
        <Row label="LAYOUT"><Seg opts={[['stacked','Stacked'],['dense','Dense']]} val={tweaks.layout} onChange={v=>setTweak('layout',v)}/></Row>
        <Row label="FX DENSITY"><Seg opts={[['low','Low'],['normal','Normal'],['high','High']]} val={tweaks.density} onChange={v=>setTweak('density',v)}/></Row>
        <Row label="HOVER SFX"><Seg opts={[[true,'On'],[false,'Off']]} val={tweaks.soundOnHover} onChange={v=>setTweak('soundOnHover',v)}/></Row>
      </div>
    </div>
  );
}
function Row({ label, children }) {
  return <div className="tweak-row"><div className="mono small muted tweak-row__label">{label}</div><div className="tweak-row__ctl">{children}</div></div>;
}
function Seg({ opts, val, onChange }) {
  return (
    <div className="seg">
      {opts.map(([k,label]) => (
        <button key={String(k)} className={`seg__btn ${val===k?'is-active':''}`} onClick={()=>onChange(k)} data-hover>{label}</button>
      ))}
    </div>
  );
}
window.TweaksPanel = TweaksPanel;