// ─── Mode Tabs: Calculator / Model toggle ───
window.MC = window.MC || {};

MC.ModeTabs = function ModeTabs({ mode, onChange, coin }) {
  var mobile = MC.useIsMobile();
  var modes = [
    { id: "calculator", label: "Calculator" },
    { id: "model", label: "Model" },
  ];
  return (
    <div style={{ display: "inline-flex", borderRadius: 6, overflow: "hidden", border: "1px solid #3a3a30" }}>
      {modes.map(function(m) {
        var active = m.id === mode;
        return (
          <button key={m.id} onClick={function() { onChange(m.id); }} style={{
            padding: mobile ? "10px 14px" : "6px 14px", border: "none", cursor: "pointer",
            background: active ? coin.color : "#1a1a16",
            color: active ? "#141410" : "#6a6a5a",
            fontSize: 11, fontWeight: 700, fontFamily: "var(--mono)", letterSpacing: 1,
            transition: "all 0.15s",
          }}>
            {m.label}
          </button>
        );
      })}
    </div>
  );
};