// tweaks.jsx — tweaks panel + edit-mode host integration

function Tweaks({ tweaks, setTweak, open, setOpen }) {
  return (
    <div className={`tweaks ${open ? "open" : ""}`}>
      <h4>
        <span>— Tweaks</span>
        <span style={{ cursor: "pointer", opacity: 0.6 }} onClick={() => setOpen(false)}>close</span>
      </h4>

      <div className="tweak-row">
        <label>— Theme</label>
        <div className="opts">
          {[["light", "Light"], ["dark", "Dark"]].map(([k, n]) => (
            <button key={k} className={`tweak-chip ${tweaks.theme === k ? "active" : ""}`} onClick={() => setTweak("theme", k)}>{n}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>— Accent</label>
        <div className="opts">
          {[["gold", "Gold"], ["bordeaux", "Bordeaux"], ["silver", "Silver"]].map(([k, n]) => (
            <button key={k} className={`tweak-chip ${tweaks.accent === k ? "active" : ""}`} onClick={() => setTweak("accent", k)}>{n}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>— Display serif</label>
        <div className="opts">
          {[["Prata", "Prata"], ["DM Serif Display", "DM Serif"], ["Playfair Display", "Playfair"], ["Cormorant Garamond", "Cormorant"]].map(([k, n]) => (
            <button key={k} className={`tweak-chip ${tweaks.serif === k ? "active" : ""}`} onClick={() => setTweak("serif", k)}>{n}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>— Livery pinstripe</label>
        <div className="opts">
          {[["on", "On"], ["off", "Off"]].map(([k, n]) => (
            <button key={k} className={`tweak-chip ${tweaks.livery === k ? "active" : ""}`} onClick={() => setTweak("livery", k)}>{n}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>— Tagline</label>
        <div className="opts">
          {[
            ["Small, by design.", "Small"],
            ["Handbuilt. Unhurried. Yours.", "Unhurried"],
            ["The rarest car you own.", "Rarest"],
            ["Ninety days. One car.", "Ninety"],
          ].map(([k, n]) => (
            <button key={k} className={`tweak-chip ${tweaks.tagline === k ? "active" : ""}`} onClick={() => setTweak("tagline", k)}>{n}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;