// TweaksPanel — floating UI exposing tweakable values
function TweaksPanel({ tweaks, setTweak }) {
  return (
    <div className="tweaks hidden" id="tweaks-panel">
      <div className="tweaks-header">
        <div className="tweaks-title">Tweaks</div>
        <div style={{ fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase',
          color: '#667085', fontWeight: 600 }}>ABGS</div>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <div className="tweak-label">Accent color</div>
          <div className="tweak-swatches">
            {[
              ['blue', '#1E57D6'], ['green', '#039855'],
              ['indigo', '#4F46E5'], ['amber', '#D97706'],
            ].map(([k, c]) => (
              <button key={k} onClick={() => setTweak('accentColor', k)}
                className={`tweak-swatch ${tweaks.accentColor===k?'active':''}`}
                style={{ background: c }} aria-label={k}/>
            ))}
          </div>
        </div>

        <div className="tweak-row">
          <div className="tweak-label">Hero style</div>
          <div className="tweak-seg">
            {['orbit','quote'].map(v => (
              <button key={v} onClick={() => setTweak('heroStyle', v)}
                className={tweaks.heroStyle===v?'active':''}>
                {v === 'orbit' ? 'Orbit' : 'Quote'}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-row">
          <div className="tweak-label">Cursor glow</div>
          <div className="tweak-seg">
            {[['on', true],['off', false]].map(([l, v]) => (
              <button key={l} onClick={() => setTweak('cursorGlow', v)}
                className={tweaks.cursorGlow===v?'active':''}>
                {l === 'on' ? 'On' : 'Off'}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-row">
          <div className="tweak-label">
            Marquee speed <span style={{ color:'#101828', fontWeight:700 }}>{tweaks.marqueeSpeed}s</span>
          </div>
          <input type="range" min="15" max="80" value={tweaks.marqueeSpeed}
            onChange={(e) => setTweak('marqueeSpeed', +e.target.value)}
            className="tweak-slider"/>
        </div>

        <div className="tweak-row">
          <div className="tweak-label">Animation intensity</div>
          <div className="tweak-seg">
            {[['Calm', 0.5],['Normal', 1],['Vivid', 1.5]].map(([l, v]) => (
              <button key={l} onClick={() => setTweak('animationIntensity', v)}
                className={tweaks.animationIntensity===v?'active':''}>{l}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.TweaksPanel = TweaksPanel;