// Rules + Mods sections

function RulesSection() {
  return (
    <section id="rules">
      <div className="shell">
        <SectionHead
          num="§02 — HOUSE RULES"
          title={<>SHORT LIST.<br/>NO LAWYER.</>}
          sub={<>Seven rules. Admin discretion fills the gaps. If you have to ask if something's allowed, it probably isn't.</>}
        />
        <div className="rules">
          {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>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModsSection() {
  const [cat, setCat] = React.useState("All");
  const cats = ["All", ...Array.from(new Set(MODS.map(m => m.cat)))];
  const rows = cat === "All" ? MODS : MODS.filter(m => m.cat === cat);

  return (
    <section id="mods">
      <div className="shell">
        <SectionHead
          num="§03 — MOD LIST"
          title={<>WHAT YOU<br/>NEED INSTALLED.</>}
          sub={<>Subscribe to the collection from the Steam Workshop link below; DZSA Launcher handles the rest. All required mods auto-load on connect.</>}
        />

        <div className="mods-toolbar">
          <div className="mods-filters">
            {cats.map(c => (
              <button key={c} className={"chip" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div className="mods-total">{rows.length} MODS</div>
        </div>

        <div className="mods-table">
          <div className="mods-row head">
            <div>#</div>
            <div>NAME</div>
            <div>DESCRIPTION</div>
            <div style={{textAlign:"right"}}>STATUS</div>
          </div>
          {rows.map((m, i) => (
            <div className="mods-row" key={m.name}>
              <div className="idx">{String(i+1).padStart(2,"0")}</div>
              <div className="name">{m.name}<div style={{fontSize:11,color:"var(--ink-3)",fontFamily:"JetBrains Mono",letterSpacing:"0.08em",marginTop:2}}>{m.cat.toUpperCase()}</div></div>
              <div className="desc">{m.d}</div>
              <div className={"req" + (m.req ? " required" : "")}>{m.req ? "REQUIRED" : "OPTIONAL"}</div>
            </div>
          ))}
        </div>

        <div className="mods-install">
          <div className="copy">
            <strong>One-click install:</strong> Open <span className="mono" style={{color:"var(--accent)"}}>DZSA Launcher</span> → paste server IP <span className="mono" style={{color:"var(--ink)"}}>{SERVER.ip}:{SERVER.port}</span> → click <strong>Join</strong>. The launcher auto-downloads every required mod.
          </div>
          <a href="#top" className="btn btn-primary">Open Workshop Collection</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RulesSection, ModsSection });