const Tweaks = ({ tweaks, setTweaks, onClose }) => {
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });
  return (
    <div className="tweaks">
      <header>
        <h4>Tweaks</h4>
        <button className="close" onClick={onClose} aria-label="Sluit">✕</button>
      </header>
      <div className="tweak-group">
        <div className="k">Hero-layout</div>
        <div className="tweak-opts">
          {[["editorial","Split"],["stacked","Stacked"],["bleed","Bleed"]].map(([v,l]) => (
            <button key={v} className={`tweak-opt ${tweaks.hero===v?"active":""}`} onClick={()=>set("hero",v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <div className="k">Diensten</div>
        <div className="tweak-opts">
          {[["list","Lijst"],["grid","Kaarten"],["scroll","Carousel"]].map(([v,l]) => (
            <button key={v} className={`tweak-opt ${tweaks.services===v?"active":""}`} onClick={()=>set("services",v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <div className="k">Ervaringen</div>
        <div className="tweak-opts">
          {[["large","Groot"],["cards","Kaarten"],["ticker","Ticker"]].map(([v,l]) => (
            <button key={v} className={`tweak-opt ${tweaks.reviews===v?"active":""}`} onClick={()=>set("reviews",v)}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;