/* Tarot Battle UI Kit — Onboarding / How to Play */
function Learn({ onNav }) {
  const [step, setStep] = React.useState(0);
  const sample = window.TB_UNITS.find((u) => u.id === "strength");
  const ability = window.TB_UNITS.find((u) => u.id === "death").abilities[0];

  const steps = [
    {
      eyebrow: "The Deck",
      h: "Every card is a unit",
      p: "Your deck is your army. The 22 Major Arcana and the four Minor suits — Cups, Swords, Wands and Pentacles — each take the field as a unit you deploy and command.",
      visual: <div style={{ width: 150, aspectRatio: "70/130" }}><TarotCard unit={sample} flippable={false} flipped={false} /></div>
    },
    {
      eyebrow: "The Stat Line",
      h: "Read the M·A·D line",
      p: "Three numbers decide everything. Movement is how far a unit travels each turn, Attack is the damage it deals, and Defense softens the blows it takes.",
      visual: <div style={{ width: 280 }}><MadChannels m={sample.m} a={sample.a} d={sample.d} /></div>
    },
    {
      eyebrow: "Abilities",
      h: "Trigger special abilities",
      p: "Beyond raw stats, each unit carries abilities drawn from its tarot meaning. Underlined keywords name the effect; the text tells you when and how it fires.",
      visual: <div style={{ maxWidth: 360 }}><AbilityList abilities={[ability]} /></div>
    },
    {
      eyebrow: "Shared Fate",
      h: "Spend from one pool",
      p: "Both commanders draw from a single pool of six Fate, refilling +1 each turn. The deck’s strongest abilities cost Fate — and since it’s shared, what you spend your rival can’t. Watch too for conditions, board tokens, suit economies and resonance pairs: the systems that make v2 sing.",
      visual: (
        <div style={{ display: "flex", gap: 6 }}>
          {Array.from({ length: 6 }).map((_, i) => (
            <span key={i} style={{ width: 18, height: 18, borderRadius: "50%", background: i < 4 ? "var(--volt-yellow)" : "transparent", border: "2px solid var(--volt-yellow)", opacity: i < 4 ? 1 : 0.35 }} />
          ))}
        </div>
      )
    },
    {
      eyebrow: "The Battle",
      h: "Take the board",
      p: "Units move across a grid and strike enemies within reach. Position matters — many abilities trigger by proximity, “within 2 spaces.” Outmaneuver, then overpower.",
      visual: (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,26px)", gap: 5 }}>
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} style={{ width: 26, height: 26, borderRadius: 6, background: i === 5 ? "rgba(72,255,36,.25)" : i === 6 ? "rgba(255,21,0,.22)" : "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.08)" }} />
          ))}
        </div>
      )
    }
  ];
  const s = steps[step];
  const last = step === steps.length - 1;

  return (
    <div className="learn">
      <div className="steps-dots">{steps.map((_, i) => <span key={i} className={"dot" + (i <= step ? " on" : "")} />)}</div>
      <div className="learn-card">
        <div className="step-eyebrow">Step {step + 1} of {steps.length} · {s.eyebrow}</div>
        <h2>{s.h}</h2>
        <div className="learn-visual">{s.visual}</div>
        <p>{s.p}</p>
      </div>
      <div className="learn-nav">
        <Btn kind="ghost" icon="ArrowLeft" onClick={() => step ? setStep(step - 1) : onNav("home")}>{step ? "Back" : "Home"}</Btn>
        {last
          ? <Btn kind="primary" icon="Swords" onClick={() => onNav("board")}>Start Playing</Btn>
          : <Btn kind="primary" onClick={() => setStep(step + 1)}>Next <Icon name="ArrowRight" size={15} /></Btn>}
      </div>
    </div>
  );
}
Object.assign(window, { Learn });