/* Laws.jsx — 同盟法度 (5 laws of the alliance) · live-synced from admin */

const DEFAULT_LAWS = [
  { ord: "壹", title: "義之所在", subtitle: "不容背棄",
    body: "結盟即為兄弟。私鬥、洩密、通敵者，逐出無赦。" },
  { ord: "貳", title: "令之所至", subtitle: "不得遲疑",
    body: "攻城集結、預約調動，須於指定時點到位。連續三次無故脫令者，降級處置。" },
  { ord: "叁", title: "糧之所運", subtitle: "不可怠惰",
    body: "糧重運輸為前線命脈。司倉職業者每日須完成基本運糧任務，不得無故缺席。" },
  { ord: "肆", title: "地之所拓", subtitle: "不分大小",
    body: "同盟領地共建共享。新盟員七日內須鋪地至同盟邊界，不可孤立發育。" },
  { ord: "伍", title: "獎之所酬", subtitle: "不偏不倚",
    body: "每週貢獻、武勳排行公開可查。每月搖籤抽獎，全員皆可參與，憑運氣與努力雙重論獎。" },
];

const loadLaws = () => {
  try {
    const v = JSON.parse(localStorage.getItem("sw_laws") || "null");
    if (Array.isArray(v) && v.length) return v;
  } catch {}
  return DEFAULT_LAWS;
};

const Laws = () => {
  const [LAWS, setLAWS] = React.useState(loadLaws());

  React.useEffect(() => {
    const refresh = () => setLAWS(loadLaws());
    const onStorage = (e) => { if (e.key === "sw_laws") refresh(); };
    window.addEventListener("storage", onStorage);
    const t = setInterval(refresh, 8000);
    return () => { window.removeEventListener("storage", onStorage); clearInterval(t); };
  }, []);

  return (
    <div className="wrap">
      <div className="laws-v2">
        {LAWS.map((law) => (
          <div className="law-row" key={law.ord}>
            <div className="law-row__ord">{law.ord}</div>
            <div>
              <div className="law-row__title">
                {law.title}<span className="dot" />{law.subtitle}
              </div>
              <div className="law-row__body">{law.body}</div>
            </div>
          </div>
        ))}
        <div className="laws-v2__seal">
          <div className="cn" style={{fontSize: "30px"}}>盟 規 五 條 · 兄 弟 一 心</div>
          <div className="sub" style={{fontSize: "22px"}}>── 兔比哈皮 · 共立此盟 ──</div>
        </div>
      </div>
    </div>
  );
};

window.Laws = Laws;