/* Tweaks panel — floating, for variant switching */

function Tweaks({ tweaks, setTweak }) {
  const [active, setActive] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setActive(true);
      if (e.data?.type === '__deactivate_edit_mode') setActive(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (edits) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
  };

  const set = (k, v) => {
    setTweak(k, v);
    persist({ [k]: v });
  };

  if (!active) return null;

  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <div className="tweaks-title">Tweaks · Varianten</div>
        <button onClick={()=>setActive(false)} style={{background:'transparent', border:0, color:'var(--text-3)', cursor:'pointer'}}>
          <Icon name="close" size={14}/>
        </button>
      </div>

      <Seg label="Hero"     value={tweaks.heroVariant}     onChange={(v)=>set('heroVariant', v)}     options={['A','B','C']}/>
      <Seg label="Trust"    value={tweaks.trustVariant}    onChange={(v)=>set('trustVariant', v)}    options={['A','B']}/>
      <Seg label="Services" value={tweaks.servicesVariant} onChange={(v)=>set('servicesVariant', v)} options={['A','B','C']}/>

      <div className="tweaks-row">
        <span style={{color:'var(--text-2)'}}>Akzent</span>
        <div className="swatches">
          {[
            ['blue',  'oklch(0.72 0.15 240)'],
            ['violet','oklch(0.72 0.15 290)'],
            ['cyan',  'oklch(0.80 0.12 210)'],
            ['lime',  'oklch(0.88 0.13 135)'],
          ].map(([k, c]) => (
            <button key={k} onClick={()=>set('accent', k)}
              className={tweaks.accent === k ? 'on' : ''}
              style={{background: c}} aria-label={k}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function Seg({ label, value, onChange, options }) {
  return (
    <div className="tweaks-row">
      <span style={{color:'var(--text-2)'}}>{label}</span>
      <div className="seg">
        {options.map(o => (
          <button key={o} className={value === o ? 'on' : ''} onClick={()=>onChange(o)}>{o}</button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });