/* Tarot Battle UI Kit — Rulebook + ability glossary */
function Rulebook() {
  const sections = [
    { id: "deck", label: "The Deck" },
    { id: "mad", label: "The M·A·D Line" },
    { id: "turns", label: "Turn Structure" },
    { id: "combat", label: "Combat" },
    { id: "fate", label: "The Fate Pool" },
    { id: "conditions", label: "Conditions" },
    { id: "tokens", label: "Board Tokens" },
    { id: "factions", label: "Faction Resources" },
    { id: "resonance", label: "Resonance" },
    { id: "glossary", label: "Ability Glossary" }
  ];
  const [active, setActive] = React.useState("deck");

  // dedup abilities by keyword, keep first source
  const glossary = React.useMemo(() => {
    const seen = {}; const out = [];
    window.TB_UNITS.forEach((u) => u.abilities.forEach((ab) => {
      if (!seen[ab.k]) { seen[ab.k] = true; out.push({ k: ab.k, t: ab.t, src: u.name, illus: u.illustrative }); }
    }));
    return out;
  }, []);

  function go(id) {
    setActive(id);
    const el = document.getElementById("rule-" + id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: "smooth" });
  }
  React.useEffect(() => {
    const onScroll = () => {
      let cur = sections[0].id;
      for (const s of sections) {
        const el = document.getElementById("rule-" + s.id);
        if (el && el.getBoundingClientRect().top < 140) cur = s.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="rules-screen">
      <nav className="rules-toc">
        <div className="eyebrow" style={{ marginBottom: 10 }}>Rulebook</div>
        {sections.map((s) => (
          <a key={s.id} className={active === s.id ? "active" : ""} onClick={() => go(s.id)}>{s.label}</a>
        ))}
      </nav>
      <div className="rules-body">
        <section id="rule-deck">
          <h2>The Deck</h2>
          <p>Tarot Battle is played with the full 78-card tarot. The <span className="kw">22 Major Arcana</span> are your heroes and game-changers; the four Minor suits — <span className="kw">Cups</span> (Water), <span className="kw">Swords</span> (Air), <span className="kw">Wands</span> (Fire) and <span className="kw">Pentacles</span> (Earth) — form the body of your army, fourteen cards apiece.</p>
          <p>Each player drafts a deck and deploys units to the board. A unit is only as strong as its position — the deck is a promise, the board is the proof.</p>
        </section>
        <section id="rule-mad">
          <h2>The M·A·D Line</h2>
          <p>Every unit is summarised by three numbers: <span className="kw">Movement</span>, <span className="kw">Attack</span> and <span className="kw">Defense</span>. They appear on the card front as the green M·A·D label with yellow values, and in full on the back.</p>
          <div style={{ maxWidth: 360, margin: "4px 0 8px" }}><MadChannels m={4} a={3} d={3} /></div>
          <p><span className="kw">Movement</span> is the number of spaces a unit may travel per turn. <span className="kw">Attack</span> is the damage it deals when it strikes. <span className="kw">Defense</span> reduces incoming damage. Damage dealt is <span className="kw">Attack − ½ Defense</span>, to a minimum of 1.</p>
        </section>
        <section id="rule-turns">
          <h2>Turn Structure</h2>
          <p>Each battle opens with a <span className="kw">deployment phase</span>: both commanders place their squad across their own back rows, then ready up. Once both are set, the battle begins.</p>
          <p>Players then alternate turns. On your turn you may move and act with your units, trigger any abilities that read “at the beginning of your turn” or “once per turn,” then pass with <span className="kw">End Turn</span>.</p>
          <p>Many effects are bounded — <span className="kw">once per turn</span>, <span className="kw">once per game</span> — and many are positional, triggering only <span className="kw">within N spaces</span> or while <span className="kw">adjacent</span>. Read the board as carefully as the cards.</p>
        </section>
        <section id="rule-combat">
          <h2>Combat</h2>
          <p>To attack, move a unit adjacent to an enemy and strike. The defender loses health equal to the damage dealt; at zero health a unit is <span className="kw">eliminated</span> and removed from the board — unless an ability says otherwise (see <i>Death</i>’s <b>Inevitability</b>, which banks Debt instead of dying).</p>
          <p>A surviving, adjacent defender <span className="kw">counterattacks</span> unless the attacker has <b>First Strike</b>. Abilities resolve before raw numbers: a well-timed <b>Eye for an Eye</b> reflection or a guaranteed <b>Edge</b> critical can overturn a fight the M·A·D line said was already lost.</p>
        </section>
        <section id="rule-fate">
          <h2>The Fate Pool</h2>
          <p>Both players draw from one shared pool of <span className="kw">six Fate</span>, refilling <span className="kw">+1 at the start of each turn</span>. The deck’s most powerful abilities cost Fate — and because the pool is shared, every point you spend is a point your opponent cannot. Spending Fate is a wager as much as a cost.</p>
        </section>
        <section id="rule-conditions">
          <h2>Conditions</h2>
          <p>Named status effects that bend the rules for a unit:</p>
          <p><b>Reversed</b> — healing lands as damage and friendly buffs invert. <b>Suspended</b> — cannot act, but untouchable. <b>Illuminated</b> — the next attack is a guaranteed critical. <b>Chained</b> — leashed and slowed; using an active feeds the Fate pool. <b>Bound</b> — restricted targeting (The Lovers). <b>Blinded</b> — cannot attack or use abilities. <b>Haunt</b> — a spectral obstacle left where a unit fell.</p>
        </section>
        <section id="rule-tokens">
          <h2>Board Tokens</h2>
          <p>Some cards place tokens on the field. <b>Walls</b> (The Tower) and <b>Haunts</b> (Death) permanently <span className="kw">block all movement</span>. <b>Lanterns</b> (The Hermit), <b>Stars</b> (The Star), <b>Light</b> (The Sun) and <b>Harvest</b> (The Empress) are spendable resources — heals, buffs and lasting stat gains. <b>Embers</b> (Wands) burn any non-Wands unit that ends its move on them.</p>
        </section>
        <section id="rule-factions">
          <h2>Faction Resources</h2>
          <p>Each Minor suit runs its own economy. <span className="kw">Cups — The Tide</span>: one shared token grants its carrier +1 to all stats. <span className="kw">Swords — The Edge</span>: attacks charge a 0–3 counter; at 3 the next strike is a guaranteed critical. <span className="kw">Wands — Embers</span>: lay fire-tiles that tax enemy movement. <span className="kw">Pentacles — The Coin Pool</span>: a shared economy that pays out in heals and permanent upgrades.</p>
        </section>
        <section id="rule-resonance">
          <h2>Resonance</h2>
          <p>Certain cards are stronger together. When a card’s named <span className="kw">resonance partner</span> is alive on your side, both gain a bonus — The Chariot’s charge doubles beside <i>Strength</i>; Death’s Debt slows beside <i>Judgement</i>; the Wheel steadies beside the <i>Hanged Man</i>. Build your squad to chain these pairs.</p>
        </section>
        <section id="rule-glossary">
          <h2>Ability Glossary</h2>
          <p>Every named ability across the deck. Keywords are bold &amp; underlined on the cards.</p>
          <div className="glossary">
            {glossary.map((g) => (
              <div className="gloss" key={g.k}>
                <div className="gk"><span style={{ textDecoration: "underline", textUnderlineOffset: 2 }}>{g.k}</span><span className="src">{g.illus ? "—" : g.src}</span></div>
                <div className="gt">{g.t}</div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}
Object.assign(window, { Rulebook });
