// Tweaks panel — Hero background variations
const { useState: useStateT, useEffect: useEffectT } = React;

function TweaksPanel({ state, setState, visible, onClose }) {
  if (!visible) return null;

  const bgOpts = [
    { k: 'grid', label: '網格' },
    { k: 'chart', label: '動態 K 線' },
    { k: 'particles', label: '粒子' },
    { k: 'radial', label: '漸層光暈' },
  ];

  const update = (key, val) => {
    setState(s => ({ ...s, [key]: val }));
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
    } catch(e) {}
  };

  return (
    <div className="tweaks-panel">
      <div className="tp-title">
        <span>TWEAKS</span>
        <span className="tp-close" onClick={onClose}>×</span>
      </div>
      <div className="tp-group">
        <div className="tp-label">Hero 背景樣式</div>
        <div className="tp-opts">
          {bgOpts.map(o => (
            <button key={o.k} className={`tp-opt ${state.heroBg === o.k ? 'active' : ''}`} onClick={() => update('heroBg', o.k)}>
              {o.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}