/* Tarot Battle UI Kit — Home / lobby */
function Home({ onNav, onSelect }) {
  const P = window.TBProfile;
  const prof = P.get();
  const started = P.isStarted();
  // deterministic "daily" major arcana by date
  const daily = React.useMemo(() => {
    const majors = window.TB_MAJORS;
    const day = Math.floor(Date.now() / 8.64e7);
    return majors[day % majors.length];
  }, []);
  const [flipped, setFlipped] = React.useState(false);

  return (
    <div className="screen home">
      <div className="home-hero">
        <div>
          <div className="eyebrow">Tactical Tarot · 2 players</div>
          <h1>Draw your Arcana.<br />Command the board.</h1>
          <p className="tag">Every card of the tarot is a unit with a Movement, Attack &amp; Defense line and its own special abilities. Build a deck, take the field, and let fate decide the rest.</p>
          <div className="home-cta">
            {!started && <Btn kind="primary" icon="Sparkles" onClick={() => onNav("starter")}>Choose Starter Deck</Btn>}
            <Btn kind={started ? "primary" : "ghost"} icon="Swords" onClick={() => onNav("board")}>Play a Match</Btn>
            <Btn kind="ghost" icon="Layers" onClick={() => onNav("deck")}>Build a Deck</Btn>
            <Btn kind="ghost" icon="GraduationCap" onClick={() => onNav("learn")}>How to Play</Btn>
          </div>
          <div className="stat-tiles">
            <div className="stat-tile"><div className="n">{prof.owned.length}<span style={{ fontSize: 15, color: "var(--fg-3)" }}>/{P.total()}</span></div><div className="k">Collection</div></div>
            <div className="stat-tile"><div className="n green">{prof.wins || 0}</div><div className="k">Wins</div></div>
            <div className="stat-tile"><div className="n">{prof.losses || 0}</div><div className="k">Losses</div></div>
            <div className="stat-tile"><div className="n">{prof.deck.length}</div><div className="k">Deck Size</div></div>
          </div>
        </div>
        <div className="daily">
          <div className="dlabel">Today's Arcana</div>
          <TarotCard unit={daily} flipped={flipped} onToggle={() => setFlipped((v) => !v)} />
          <button className="nav-btn" onClick={() => onSelect(daily)}>
            Study {daily.name} <Icon name="ChevronRight" size={14} />
          </button>
        </div>
      </div>

      <div className="quick-row">
        <button className="quick" onClick={() => onNav("codex")}>
          <span className="qi"><Icon name="LayoutGrid" size={20} /></span>
          <span><span className="qt">The Codex</span><div className="qs">Browse all 78 units</div></span>
        </button>
        <button className="quick" onClick={() => onNav("rules")}>
          <span className="qi"><Icon name="BookOpen" size={20} /></span>
          <span><span className="qt">Rulebook</span><div className="qs">Turns, M·A·D &amp; abilities</div></span>
        </button>
        <button className="quick" onClick={() => onNav("deck")}>
          <span className="qi"><Icon name="Layers" size={20} /></span>
          <span><span className="qt">Deck Builder</span><div className="qs">Forge your fifteen</div></span>
        </button>
      </div>
    </div>
  );
}
Object.assign(window, { Home });