/* Tweaks panel — toggled via toolbar. Exposes service-card variant. */
const Tweaks = ({ variant, setVariant }) => {
  const [open, setOpen] = React.useState(false);

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

  const pick = (v) => {
    setVariant(v);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { serviceCardVariant: v } }, "*");
  };

  return (
    <div className={`tweaks ${open?"open":""}`}>
      <h5>Tweaks</h5>
      <div className="group">
        <div style={{marginBottom:8, fontSize:12, color:"var(--muted)"}}>Карточка услуги</div>
        <div className="segctl">
          <button className={variant==="editorial"?"active":""} onClick={()=>pick("editorial")}>Editorial</button>
          <button className={variant==="minimal"?"active":""} onClick={()=>pick("minimal")}>Minimal</button>
          <button className={variant==="soft"?"active":""} onClick={()=>pick("soft")}>Soft</button>
        </div>
      </div>
      <div className="group">
        <div style={{fontSize:11, color:"var(--muted)", lineHeight:1.5}}>
          Переключайте, чтобы увидеть три варианта подачи услуг: крупный бенто-грид, минимальные строчки или мягкие пастельные карточки.
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Tweaks });