// Minimal header chrome + Tweaks panel (side index, topbar, crosshair removed)

function TweaksPanel({ state, setState }) {
  const reds = [
    { k: "FF2D2D", v: "#FF2D2D" },
    { k: "E10600", v: "#E10600" },
    { k: "C1121F", v: "#C1121F" },
    { k: "FF3B1F", v: "#FF3B1F" },
    { k: "FF5AA0", v: "#FF5AA0" },
  ];
  const densities = ["compact", "default", "roomy"];
  const fonts = [
    { k: "Geist Mono", v: "'Geist Mono'" },
    { k: "JetBrains Mono", v: "'JetBrains Mono'" },
    { k: "IBM Plex Mono", v: "'IBM Plex Mono'" },
    { k: "Space Mono", v: "'Space Mono'" },
  ];

  return (
    <div className="tweaks">
      <h4>TWEAKS <span className="r">●</span></h4>

      <div className="tw-group">
        <div className="tw-label">Accent — red</div>
        <div className="tw-swatches">
          {reds.map((r) => (
            <button
              key={r.k}
              className={`tw-sw${state.red === r.v ? " on" : ""}`}
              style={{ background: r.v }}
              onClick={() => setState({ ...state, red: r.v })}
              title={r.k}
            />
          ))}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Grid density</div>
        <div className="tw-row">
          {densities.map((d) => (
            <button
              key={d}
              className={`tw-chip${state.density === d ? " on" : ""}`}
              onClick={() => setState({ ...state, density: d })}
            >
              {d.toUpperCase()}
            </button>
          ))}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Mono font</div>
        <div className="tw-row">
          {fonts.map((f) => (
            <button
              key={f.k}
              className={`tw-chip${state.font === f.v ? " on" : ""}`}
              onClick={() => setState({ ...state, font: f.v })}
            >
              {f.k}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });