// Tweaks panel — accent color, motion. The "Hero voice" control was removed
// 2026-08-02 (roundtable redesign) — the hero no longer has headline
// variants; it's one fixed concern-router design now (see hero.jsx).
function Tweaks() {
  const [open, setOpen] = useState(false);
  const [available, setAvailable] = useState(false);
  const [state, setState] = useState(() => window.__tweaks || {});

  // Announce availability AFTER registering listener
  useEffect(() => {
    const handler = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') { setAvailable(true); setOpen(true); }
      if (d.type === '__deactivate_edit_mode') { setOpen(false); }
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const apply = useCallback((patch) => {
    const next = { ...state, ...patch };
    setState(next);
    // Mirror to global so other components (Hero) can read current value,
    // and dispatch a live event so they can re-render without a page reload.
    if (typeof window !== 'undefined') {
      window.__tweaks = { ...(window.__tweaks || {}), ...patch };
      window.dispatchEvent(new CustomEvent('tweaks-change', { detail: patch }));
    }
    if (patch.accent) {
      const map = {
        blue:   { c: '#0b3a6d', deep: '#061a33', soft: '#dbe7f4', glow: '11 58 109' },
        forest: { c: '#12345b', deep: '#061a33', soft: '#e5e7eb', glow: '18 52 91' },
        copper: { c: '#374151', deep: '#111827', soft: '#f3f4f6', glow: '55 65 81' },
        slate:  { c: '#4a5a66', deep: '#2f3c46', soft: '#dfe4e8', glow: '74 90 102' },
      };
      const v = map[patch.accent] || map.blue;
      document.documentElement.style.setProperty('--accent', v.c);
      document.documentElement.style.setProperty('--accent-deep', v.deep);
      document.documentElement.style.setProperty('--accent-soft', v.soft);
      document.documentElement.style.setProperty('--accent-glow', v.glow);
    }
    if (patch.motion) {
      const speed = patch.motion === 'calm' ? '1.4s' : '.9s';
      document.documentElement.style.setProperty('--reveal-dur', speed);
    }
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  }, [state]);

  // Apply on first paint
  useEffect(() => { apply({ accent: state.accent || 'blue', motion: state.motion || 'polished' }); }, []);

  if (!available) return null;

  return (
    <div className={`tweaks-panel glass ${open ? 'open' : ''}`}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10 }}>
        <div className="font-display" style={{ fontWeight: 700 }}>Tweaks</div>
        <button onClick={() => setOpen(false)} style={{ border:'none', background:'transparent', cursor:'pointer', color:'var(--slate-500)', fontSize: 18 }}>×</button>
      </div>

      <div className="tweak-row">
        <label>Accent</label>
        <div style={{ display:'flex', gap: 8 }}>
          {[
            { k: 'blue',   c: '#0b3a6d' },
            { k: 'forest', c: '#12345b' },
            { k: 'copper', c: '#374151' },
            { k: 'slate',  c: '#4a5a66' },
          ].map(s => (
            <button key={s.k} aria-label={s.k} onClick={() => apply({ accent: s.k })}
              className={`tweak-swatch ${state.accent === s.k ? 'active' : ''}`}
              style={{ background: s.c }} />
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>Motion</label>
        <div className="tweak-seg">
          {['calm','polished'].map(m => (
            <button key={m} className={state.motion === m ? 'active' : ''} onClick={() => apply({ motion: m })}>{m}</button>
          ))}
        </div>
      </div>

    </div>
  );
}
window.Tweaks = Tweaks;