function Tweaks({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(false);
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') { setEditMode(true); setOpen(true); }
      if (e.data.type === '__deactivate_edit_mode') { setEditMode(false); setOpen(false); }
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const set = (key, val) => {
    const next = { ...tweaks, [key]: val };
    setTweaks(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*'); } catch {}
  };

  if (!editMode) return null;

  const palettes = [
    { id:"warmBlush",  label:"Warm Blush",  sw:["#F5EEE6","#E8D4C4","#C89982","#9A6B5A"] },
    { id:"claySage",   label:"Clay & Sage", sw:["#F3EFE7","#DCD1BE","#9FA98C","#6E7A5E"] },
    { id:"inkRose",    label:"Ink Rose",    sw:["#F2E9E2","#E0C6B6","#A86A57","#733A2E"] },
    { id:"mochaLinen", label:"Mocha Linen", sw:["#EFE8DD","#D7C3AB","#8A6A4E","#5C4330"] },
  ];
  const headings = ["Cormorant Garamond","Fraunces","Playfair Display","DM Serif Display","EB Garamond"];
  const bodies   = ["Inter","Work Sans","Manrope","Helvetica Neue","Georgia"];

  return (
    <>
      <button className="tweaks-fab" onClick={() => setOpen(!open)} aria-label="Tweaks">
        <span style={{transform: open ? 'rotate(45deg)' : 'none', transition:'transform .2s', fontSize:22, lineHeight:1}}>+</span>
      </button>
      {open && (
        <div className="tweaks-panel">
          <h4>Tweaks</h4>
          <div style={{fontSize:12, color:'var(--muted)'}}>Adjust the design live.</div>

          <div className="tweaks-row">
            <label>Palette</label>
            <div className="swatch-row">
              {palettes.map(p => (
                <div key={p.id}
                     onClick={() => set('palette', p.id)}
                     className={"swatch " + (tweaks.palette === p.id ? 'active' : '')}
                     title={p.label}
                     style={{background:`linear-gradient(90deg, ${p.sw[0]} 0 25%, ${p.sw[1]} 25% 50%, ${p.sw[2]} 50% 75%, ${p.sw[3]} 75% 100%)`}}>
                </div>
              ))}
            </div>
          </div>

          <div className="tweaks-row">
            <label>Hero style</label>
            <div className="tweaks-segment">
              {[
                {id:"imageOverlay", label:"Image overlay"},
                {id:"typeLed", label:"Type-led"},
                {id:"splitFounder", label:"Split founder"},
              ].map(o => (
                <button key={o.id} className={tweaks.heroVariant === o.id ? 'active' : ''} onClick={() => set('heroVariant', o.id)}>{o.label}</button>
              ))}
            </div>
          </div>

          <div className="tweaks-row">
            <label>Heading font</label>
            <div className="tweaks-segment" style={{flexDirection:'column'}}>
              {headings.map(f => (
                <button key={f} className={tweaks.headingFont === f ? 'active' : ''} onClick={() => set('headingFont', f)} style={{fontFamily:f, fontStyle:'italic', fontSize:15, textAlign:'left'}}>
                  {f}
                </button>
              ))}
            </div>
          </div>

          <div className="tweaks-row">
            <label>Body font</label>
            <div className="tweaks-segment" style={{flexDirection:'column'}}>
              {bodies.map(f => (
                <button key={f} className={tweaks.bodyFont === f ? 'active' : ''} onClick={() => set('bodyFont', f)} style={{fontFamily:f, textAlign:'left'}}>
                  {f}
                </button>
              ))}
            </div>
          </div>

          <div className="tweaks-row">
            <label>Density</label>
            <div className="tweaks-segment">
              {["airy","packed"].map(o => (
                <button key={o} className={tweaks.density === o ? 'active' : ''} onClick={() => set('density', o)}>{o}</button>
              ))}
            </div>
          </div>

          <div className="tweaks-row">
            <label>Mode</label>
            <div className="tweaks-segment">
              {["light","dark"].map(o => (
                <button key={o} className={tweaks.mode === o ? 'active' : ''} onClick={() => set('mode', o)}>{o}</button>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
}
Object.assign(window, { Tweaks });