/* ============================================================
       SCREEN: WAR ROOM (Home)
       ============================================================ */
    const WarRoom = ({ miniatures, warbands, onNav, onStartBattle }) => {
      const stats = [
        { label: 'Miniatures', value: miniatures.length, icon: 'helmet', color: 'gold' },
        { label: 'Warbands', value: warbands.length, icon: 'flag', color: 'gold' },
        { label: 'Total Points', value: miniatures.reduce((s,m)=>s+(m.points||0),0), icon: 'crown', color: 'gold' }
      ];

      return (
        <div className="pb-24">
          <div className="px-4 pt-8 pb-6 text-center relative">
            <div className="absolute inset-0 bg-gradient-to-b from-blood/10 to-transparent pointer-events-none"></div>
            <div className="relative">
              <Icon name="skull" className="w-10 h-10 text-gold mx-auto mb-3 opacity-80" />
              <h1 className="serif text-3xl text-parchment mb-1">War Room</h1>
              <Ornament />
              <p className="text-xs text-muted tracking-widest uppercase">Muster the Faithful</p>
            </div>
          </div>

          <div className="grid grid-cols-3 gap-2 px-4">
            {stats.map(s => (
              <div key={s.label} className="bg-panel border border-line rounded p-3 text-center panel-edge">
                <Icon name={s.icon} className="w-5 h-5 text-gold mx-auto mb-1 opacity-80" />
                <div className="serif text-2xl text-parchment leading-none">{s.value}</div>
                <div className="text-[10px] uppercase tracking-wider text-muted mt-1">{s.label}</div>
              </div>
            ))}
          </div>

          <div className="px-4 mt-6">
            <h2 className="serif text-sm text-gold uppercase tracking-widest mb-3">Quick Actions</h2>
            <div className="grid grid-cols-2 gap-3">
              <button onClick={onStartBattle} className="bg-gradient-to-br from-blood to-bloodDim border border-blood/60 rounded p-4 text-left blood-glow active:scale-95 transition-transform">
                <Icon name="sword" className="w-6 h-6 text-parchment mb-2" />
                <div className="serif text-parchment text-sm">Begin Battle</div>
                <div className="text-[10px] text-parchment/70 mt-0.5">Track your warband in combat</div>
              </button>
              <button onClick={() => onNav('miniatures', { newMini: true })} className="bg-panel border border-line rounded p-4 text-left active:scale-95 transition-transform">
                <Icon name="plus" className="w-6 h-6 text-gold mb-2" />
                <div className="serif text-parchment text-sm">New Miniature</div>
                <div className="text-[10px] text-muted mt-0.5">Forge a new soul</div>
              </button>
            </div>
          </div>

          <div className="px-4 mt-8">
            <h2 className="serif text-sm text-gold uppercase tracking-widest mb-3">Your Warbands</h2>
            {warbands.length === 0 ? (
              <div className="bg-panel border border-dashed border-line rounded p-6 text-center text-muted text-sm">
                No warbands mustered yet
              </div>
            ) : (
              <div className="space-y-2">
                {warbands.map(w => {
                  const minis = miniatures.filter(m => w.unitIds.includes(m.id));
                  return (
                    <button key={w.id} onClick={() => onNav('warbandDetail', { id: w.id })} className="w-full bg-panel border border-line rounded p-3 flex items-center gap-3 panel-edge active:bg-panel2">
                      <div className="w-10 h-10 rounded bg-gradient-to-br from-bloodDim to-blood/30 border border-blood/40 flex items-center justify-center">
                        <Icon name="flag" className="w-5 h-5 text-gold" />
                      </div>
                      <div className="flex-1 text-left min-w-0">
                        <div className="serif text-parchment truncate">{w.name}</div>
                        <div className="text-xs text-muted">{minis.length} units · {totalPoints(minis)} pts · {w.gameSystem}</div>
                      </div>
                      <Icon name="chevron" className="w-4 h-4 text-muted" />
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      );
    };