// Tweaks panel — floating bottom-right, activated by the host toolbar toggle.
const Tweaks = ({ state, setState, active }) => {
  if (!active) return null;

  const setKey = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
    } catch (e) {}
  };

  const Group = ({ label, options, value, onSelect }) => (
    <div className="tweaks__group">
      <div className="tweaks__label">{label}</div>
      <div className="tweaks__options">
        {options.map(o => (
          <button
            key={o.v}
            className={`tweaks__opt ${value === o.v ? "tweaks__opt--active" : ""}`}
            onClick={() => onSelect(o.v)}
          >{o.l}</button>
        ))}
      </div>
    </div>
  );

  return (
    <div className="tweaks" role="dialog" aria-label="Tweaks">
      <div className="tweaks__title">Tweaks</div>
      <div className="tweaks__subtitle">Compare in place</div>

      <Group
        label="Hero"
        value={state.hero}
        onSelect={v => setKey("hero", v)}
        options={[
          { v: "invitation", l: "Invitation" },
          { v: "editorial",  l: "Editorial" },
          { v: "navy",       l: "Navy" },
        ]}
      />
      <Group
        label="Mode"
        value={state.mode}
        onSelect={v => setKey("mode", v)}
        options={[
          { v: "light", l: "Pink" },
          { v: "navy",  l: "Navy" },
        ]}
      />
      <Group
        label="How-it-works layout"
        value={state.howLayout}
        onSelect={v => setKey("howLayout", v)}
        options={[
          { v: "editorial", l: "Editorial" },
          { v: "stacked",   l: "Stacked" },
          { v: "cards",     l: "Cards" },
        ]}
      />
    </div>
  );
};

Object.assign(window, { Tweaks });