// Tweaks panel — bottom-right floating controls, toggled by host toolbar
function TweaksPanel({ state, set, visible }) {
  if (!visible) return null;
  const Seg = ({ field, options }) => (
    <div className="tweak-seg">
      {options.map(o => (
        <button key={o.v} className={state[field] === o.v ? 'on' : ''} onClick={() => set({[field]: o.v})}>{o.l}</button>
      ))}
    </div>
  );
  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tweak-row">
        <label>Hero Variant</label>
        <Seg field="hero" options={[{v:'dark',l:'Dark'},{v:'editorial',l:'Editorial'}]}/>
      </div>
      <div className="tweak-row">
        <label>Accent</label>
        <Seg field="accent" options={[{v:'royal',l:'Royal'},{v:'action',l:'Action'}]}/>
      </div>
      <div className="tweak-row">
        <label>Wordmark</label>
        <Seg field="brand" options={[{v:'integrated',l:'Integrated AI'},{v:'hub',l:'AI Hub'}]}/>
      </div>
    </div>
  );
}
window.TweaksPanel = TweaksPanel;

// Scroll reveal
function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
    }, {threshold: 0.08});
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}
window.useReveal = useReveal;