// Connect, Discord, Rules, Mods panels
const ConnectPanel = ({ data }) => {
  const [copied, setCopied] = useState("");
  const copy = (key, value) => {
    navigator.clipboard?.writeText(value);
    setCopied(key);
    setTimeout(() => setCopied(""), 1400);
  };
  const s = data.server;

  return (
    <Panel tag="//" title="How to Get In" right="NEW SURVIVORS">
      <div className="connect-grid">
        <div className="kv">
          <div className="k">Host</div>
          <div className="v">
            {s.host}
            <button
              className={`copy-btn ${copied === "host" ? "copied" : ""}`}
              onClick={() => copy("host", s.host)}
            >
              {copied === "host" ? "✓ COPIED" : "COPY"}
            </button>
          </div>
        </div>
        <div className="kv">
          <div className="k">Port</div>
          <div className="v">
            {s.port}
            <button
              className={`copy-btn ${copied === "port" ? "copied" : ""}`}
              onClick={() => copy("port", s.port)}
            >
              {copied === "port" ? "✓ COPIED" : "COPY"}
            </button>
          </div>
        </div>
        <div className="kv">
          <div className="k">Password</div>
          <div className="v" style={{ fontSize: 18, color: "var(--green)" }}>NONE · OPEN DOOR</div>
        </div>
        <div className="kv">
          <div className="k">Pop · Cap</div>
          <div className="v">{s.population}/{s.population_max}</div>
        </div>
      </div>

      <ol style={{
        marginTop: 16,
        padding: "12px 16px",
        listStyle: "none",
        counterReset: "step",
        background: "rgba(255,180,80,0.03)",
        border: "1px dashed var(--line-soft)",
        borderRadius: 2,
      }}>
        <li style={{ counterIncrement: "step", marginBottom: 6, position: "relative", paddingLeft: 28, fontSize: 12, color: "var(--amber-dim)" }}>
          <span style={{ position: "absolute", left: 0, color: "var(--amber-hot)", fontFamily: "var(--display)", fontSize: 16 }}>01.</span>
          Open Project Zomboid → JOIN → INTERNET tab.
        </li>
        <li style={{ counterIncrement: "step", marginBottom: 6, position: "relative", paddingLeft: 28, fontSize: 12, color: "var(--amber-dim)" }}>
          <span style={{ position: "absolute", left: 0, color: "var(--amber-hot)", fontFamily: "var(--display)", fontSize: 16 }}>02.</span>
          Add Server. Paste the host & port above.
        </li>
        <li style={{ counterIncrement: "step", marginBottom: 6, position: "relative", paddingLeft: 28, fontSize: 12, color: "var(--amber-dim)" }}>
          <span style={{ position: "absolute", left: 0, color: "var(--amber-hot)", fontFamily: "var(--display)", fontSize: 16 }}>03.</span>
          Join — the mod pack auto-syncs (~6 min first time).
        </li>
        <li style={{ counterIncrement: "step", position: "relative", paddingLeft: 28, fontSize: 12, color: "var(--amber-dim)" }}>
          <span style={{ position: "absolute", left: 0, color: "var(--amber-hot)", fontFamily: "var(--display)", fontSize: 16 }}>04.</span>
          Wave hello in voice chat. Try not to die in the first hour.
        </li>
      </ol>

      <a className="discord-cta" href={s.discord} target="_blank" rel="noreferrer">
        <div>
          <div className="lbl">▸ Radio Channel</div>
          <div className="url">discord.gg/5rtakkdQm4</div>
        </div>
        <span className="arrow">→</span>
      </a>
    </Panel>
  );
};

const RulesPanel = ({ data }) => (
  <Panel tag="//" title="House Rules" right="POSTED ON THE FRIDGE">
    {data.rules.map((r) => (
      <div className="rule" key={r.n}>
        <div className="n">{r.n}</div>
        <div>
          <div className="t">{r.t}</div>
          <div className="d">{r.d}</div>
        </div>
      </div>
    ))}
  </Panel>
);

const ModsPanel = ({ data }) => (
  <Panel tag="//" title="Mods Loaded" right={`${data.mods.length} ACTIVE`}>
    <div className="mods-list">
      {data.mods.map((m) => (
        <div className="mod-row" key={m.name}>
          <span className="ck">[✓]</span>
          <span className="nm">{m.name}</span>
          <span className="v">v{m.v}</span>
          <span className="ct">{m.cat}</span>
        </div>
      ))}
    </div>
    <div style={{
      marginTop: 12, paddingTop: 10,
      borderTop: "1px dashed var(--line-soft)",
      fontSize: 11, color: "var(--amber-mute)",
      letterSpacing: "0.14em", textTransform: "uppercase",
    }}>
      ▸ Workshop collection link is pinned in #recruitment.
    </div>
  </Panel>
);

Object.assign(window, { ConnectPanel, RulesPanel, ModsPanel });