// Tweaks panel (edit-mode)
const TweaksPanel = ({ active, tweaks, setTweaks }) => {
  if (!active) return null;

  const setVal = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div className="tweaks-panel show">
      <h4>Tweaks</h4>

      <div className="tweak">
        <label>Hero layout</label>
        <div className="tweak-options">
          {['editorial','split','centered'].map(v => (
            <button key={v} className={`tweak-opt ${tweaks.heroVariant === v ? 'active' : ''}`}
              onClick={()=>setVal('heroVariant', v)}>{v}</button>
          ))}
        </div>
      </div>

      <div className="tweak">
        <label>Promo banner</label>
        <button className={`tweak-toggle ${tweaks.showPromoBanner ? 'on' : ''}`}
          onClick={()=>setVal('showPromoBanner', !tweaks.showPromoBanner)}
          style={{background:'transparent', padding: 0}}>
          <span className="t"></span>
          <span>{tweaks.showPromoBanner ? 'Visible' : 'Hidden'}</span>
        </button>
      </div>

      <div className="tweak">
        <label>Sticky book bar</label>
        <button className={`tweak-toggle ${tweaks.showStickyBookBar ? 'on' : ''}`}
          onClick={()=>setVal('showStickyBookBar', !tweaks.showStickyBookBar)}
          style={{background:'transparent', padding: 0}}>
          <span className="t"></span>
          <span>{tweaks.showStickyBookBar ? 'Shows on scroll' : 'Disabled'}</span>
        </button>
      </div>

      <div className="tweak">
        <label>CTA label</label>
        <input className="tweak-input" value={tweaks.ctaLabel}
          onChange={e=>setVal('ctaLabel', e.target.value)} />
      </div>

      <div className="tweak">
        <label>Promo text</label>
        <input className="tweak-input" value={tweaks.promoText}
          onChange={e=>setVal('promoText', e.target.value)} />
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel });