// loop-b.jsx — Commissioner B1-B6 + alternates

const LoopB = {};

// B1 · Commissioner home (desktop)
LoopB.B1 = () => (
  <Desktop>
    <DesktopHeader crumb="COMMISSIONER"/>
    <div style={{padding:'36px 40px',flex:1,overflow:'auto'}}>
      <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:16}}>
        <div>
          <div className="tg-chip-orange">COMMISSIONER HOME</div>
          <div className="tg-display" style={{fontSize:54,lineHeight:.9,marginTop:12}}>WELCOME BACK,<br/>COACH <span style={{color:TG.orange}}>ALEX.</span></div>
        </div>
        <button className="tg-btn orange" style={{width:'auto',padding:'14px 20px'}}>+ NEW LEAGUE</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16,marginTop:30}}>
        {[{l:'LEAGUES',v:'3'},{l:'MEMBERS',v:'128'},{l:'POOL $ LIVE',v:'$6,420'},{l:'HOUSE TAKE',v:'$0',c:TG.field}].map((s,i)=>(
          <div key={i} className="tg-card" style={{padding:16}}>
            <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>{s.l}</div>
            <div className="tg-display" style={{fontSize:36,marginTop:4,color:s.c||TG.ink}}>{s.v}</div>
          </div>
        ))}
      </div>

      <div style={{marginTop:32}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
          <div className="tg-display" style={{fontSize:14}}>— YOUR LEAGUES</div>
          <div className="tg-display" style={{fontSize:11,color:TG.ink2}}>SORTED BY ACTIVITY</div>
        </div>
        <div style={{marginTop:14,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18}}>
          {[
            {n:"Bob's Survivor '26",t:'SURVIVOR · NFL',e:'41/64',p:'$2,050',st:'JOINING',c:TG.orange},
            {n:'March Madness Calcutta',t:'CALCUTTA · NCAA',e:'16/16',p:'$4,370',st:'LIVE',c:TG.field},
            {n:'The Sunday Pick Club',t:"PICK'EM · NFL",e:'8/32',p:'$0',st:'DRAFT',c:TG.ink2},
          ].map((l,i)=>(
            <div key={i} className="tg-card">
              <div style={{background:l.c,color:TG.cream,padding:'14px 16px',borderBottom:`2px solid ${TG.ink}`}}>
                <div className="tg-display" style={{fontSize:10}}>{l.t}</div>
                <div className="tg-display" style={{fontSize:22,lineHeight:1,marginTop:4}}>{l.n}</div>
              </div>
              <div style={{padding:12}}>
                <div className="tg-field"><span className="lbl">ENTRIES</span><span className="val">{l.e}</span></div>
                <div className="tg-field"><span className="lbl">POT</span><span className="val" style={{color:TG.orange}}>{l.p}</span></div>
                <div className="tg-field"><span className="lbl">STATUS</span><span className="val" style={{fontSize:11}}>{l.st}</span></div>
              </div>
            </div>
          ))}
          <div style={{border:`3px dashed ${TG.ink}`,padding:30,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:TG.ink2,cursor:'pointer'}}>
            <div className="tg-display" style={{fontSize:48,lineHeight:1}}>+</div>
            <div className="tg-display" style={{fontSize:12,marginTop:6}}>NEW LEAGUE</div>
          </div>
        </div>
      </div>
    </div>
  </Desktop>
);

// B2 · Pick a game type
LoopB.B2 = () => (
  <Desktop>
    <DesktopHeader crumb="NEW LEAGUE · STEP 01/05"/>
    <div style={{padding:'36px 48px',flex:1,overflow:'auto'}}>
      <div className="tg-chip-orange">STEP 01 / 05</div>
      <div className="tg-display" style={{fontSize:54,lineHeight:.9,marginTop:14}}>WHAT'S THE<br/><span className="tg-hl">GAME?</span></div>
      <div style={{fontSize:15,color:TG.ink2,marginTop:10,maxWidth:560,fontWeight:500}}>Pick a format. You can tweak rules next. Survivor and Calcutta are the featured pair — pick'em and brackets are wired but not polished this pass.</div>

      <div style={{marginTop:28,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20,maxWidth:920}}>
        {[
          {n:'SURVIVOR',t:'One team a week, pick and survive.',hl:'FEATURED',c:TG.orange,d:'Pick 1 team per week. They win → you live. They lose → you\'re out. Can\'t reuse. Last one standing wins.',s:'64 max',p:'$50-250'},
          {n:'CALCUTTA',t:'Auction a team, ride them all playoffs.',hl:'FEATURED',c:TG.field,d:'Live auction: each playoff team goes to the highest bidder. Your teams earn from their playoff performance.',s:'16 fixed',p:'open'},
          {n:"PICK'EM",t:'Every game, every week.',hl:'BETA',c:TG.mustard,d:'Pick winners of every game. Points for each correct call. Most points at end of season takes it.',s:'any',p:'$10+'},
          {n:'BRACKET',t:'One shot, 63 games, highest score.',hl:'BETA',c:TG.brick,d:'Classic March Madness bracket. Tiered points per round. Winner take all or split.',s:'any',p:'$10+'},
        ].map((g,i)=>(
          <div key={i} className="tg-card" style={{cursor:'pointer',padding:0,transform:i===0?'translate(-2px,-2px)':'none',boxShadow:i===0?`7px 7px 0 ${TG.ink}`:`5px 5px 0 ${TG.ink}`}}>
            <div style={{background:g.c,color:TG.cream,padding:'18px 20px',borderBottom:`2px solid ${TG.ink}`,position:'relative'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                <div>
                  <div className="tg-display" style={{fontSize:30,lineHeight:1}}>{g.n}</div>
                  <div style={{fontSize:13,marginTop:4,fontWeight:500}}>{g.t}</div>
                </div>
                <div className="tg-stamp" style={{background:TG.cream,color:TG.ink,transform:'rotate(4deg)'}}>{g.hl}</div>
              </div>
            </div>
            <div style={{padding:'14px 20px'}}>
              <div style={{fontSize:13,lineHeight:1.5,color:TG.ink2,fontWeight:500}}>{g.d}</div>
              <div style={{display:'flex',gap:14,marginTop:10}}>
                <div className="tg-pill" style={{fontSize:9}}>SIZE · {g.s}</div>
                <div className="tg-pill" style={{fontSize:9}}>BUY-IN · {g.p}</div>
              </div>
              {i===0 && <div style={{marginTop:12,display:'flex',alignItems:'center',gap:8}}><div className="tg-display" style={{fontSize:11,color:TG.orange}}>SELECTED →</div></div>}
            </div>
          </div>
        ))}
      </div>

      <div style={{marginTop:32,display:'flex',gap:12,maxWidth:920}}>
        <button className="tg-btn ghost" style={{width:'auto',padding:'14px 22px'}}>CANCEL</button>
        <div style={{flex:1}}/>
        <button className="tg-btn orange" style={{width:'auto',padding:'14px 28px'}}>CONTINUE · SURVIVOR →</button>
      </div>
    </div>
  </Desktop>
);

// B3 · Quick setup wizard (name/price)
LoopB.B3 = () => (
  <Desktop>
    <DesktopHeader crumb="NEW LEAGUE · STEP 03/05"/>
    <div style={{flex:1,display:'grid',gridTemplateColumns:'280px 1fr 360px',overflow:'hidden'}}>
      <div style={{borderRight:`2px solid ${TG.ink}`,padding:'24px 20px',background:TG.chalk,overflow:'auto'}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:14}}>— WIZARD</div>
        {[
          {n:1,t:'GAME TYPE',d:'Survivor'},
          {n:2,t:'RULES',d:'NFL · 17 weeks'},
          {n:3,t:'DETAILS',d:'Name, buy-in'},
          {n:4,t:'SHARE',d:'Invite link'},
          {n:5,t:'KICKOFF',d:'Go live'},
        ].map(s=>{
          const on = s.n===3; const done = s.n<3;
          return (
            <div key={s.n} style={{display:'flex',gap:12,padding:'11px 10px',background:on?TG.ink:'transparent',color:on?TG.cream:TG.ink,marginBottom:4,border:on?`2px solid ${TG.ink}`:'2px solid transparent',boxShadow:on?`4px 4px 0 ${TG.orange}`:'none'}}>
              <div className="tg-display" style={{width:20,fontSize:13,color:on?TG.mustard:TG.ink2}}>{String(s.n).padStart(2,'0')}</div>
              <div style={{flex:1}}>
                <div className="tg-display" style={{fontSize:12}}>{s.t}</div>
                <div style={{fontSize:11,marginTop:2,opacity:.8,fontWeight:500}}>{s.d}</div>
              </div>
              {done && <div className="tg-display" style={{fontSize:14,color:TG.field}}>✓</div>}
            </div>
          );
        })}
        <div style={{marginTop:22,padding:14,background:TG.ink,color:TG.cream,border:`2px solid ${TG.ink}`,boxShadow:`4px 4px 0 ${TG.orange}`}}>
          <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>PROJECTED POT</div>
          <div className="tg-display" style={{fontSize:36,lineHeight:.95,marginTop:6}}>$3,200</div>
          <div style={{fontSize:11,marginTop:4,opacity:.7}}>64 × $50 · 0% house</div>
        </div>
      </div>

      <div style={{padding:'32px 40px',overflow:'auto'}}>
        <div className="tg-chip-orange">STEP 03 / 05</div>
        <div className="tg-display" style={{fontSize:46,lineHeight:.9,marginTop:12}}>NAME YOUR LEAGUE.<br/><span style={{color:TG.orange}}>PRICE THE TICKET.</span></div>

        <div style={{marginTop:28,maxWidth:640}}>
          <div className="tg-display" style={{fontSize:11,marginBottom:6}}>LEAGUE NAME</div>
          <input className="tg-input" defaultValue="Bob's NFL Survivor '26" style={{fontSize:20,fontWeight:800}}/>

          <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:16,marginTop:18}}>
            <div>
              <div className="tg-display" style={{fontSize:11,marginBottom:6}}>SUBDOMAIN</div>
              <div style={{border:`2px solid ${TG.ink}`,padding:'13px 14px',background:TG.chalk,display:'flex',alignItems:'center',boxShadow:`3px 3px 0 ${TG.ink}`,fontFamily:'Archivo Black, sans-serif'}}>
                <span style={{fontSize:15}}>bobs-survivor</span>
                <span style={{opacity:.55,fontSize:14}}>.welikesports.com</span>
                <div style={{flex:1}}/>
                <div style={{fontSize:9,color:TG.field,padding:'3px 8px',background:'rgba(47,110,59,.12)',letterSpacing:'.1em'}}>✓ AVAILABLE</div>
              </div>
            </div>
            <div>
              <div className="tg-display" style={{fontSize:11,marginBottom:6}}>BUY-IN · USDC</div>
              <input className="tg-input" defaultValue="$50"/>
            </div>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:16,marginTop:18}}>
            <div><div className="tg-display" style={{fontSize:11,marginBottom:6}}>MAX ENTRIES</div><input className="tg-input" defaultValue="64"/></div>
            <div><div className="tg-display" style={{fontSize:11,marginBottom:6}}>DEADLINE</div><input className="tg-input" defaultValue="Sun · Sep 7 · 12:55 PM"/></div>
          </div>

          <div style={{marginTop:22}}>
            <div className="tg-display" style={{fontSize:11,marginBottom:8}}>PAYOUT</div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>
              {[{t:'WINNER TAKE ALL',d:'one chair. one champ.',on:true},{t:'TOP 3 · 60/30/10',d:'podium money'},{t:'CUSTOM',d:'your rules'}].map((o,i)=>(
                <div key={i} style={{padding:13,border:`2px solid ${TG.ink}`,background:o.on?TG.orange:TG.chalk,color:o.on?TG.cream:TG.ink,boxShadow:o.on?`4px 4px 0 ${TG.ink}`:`3px 3px 0 ${TG.ink}`,transform:o.on?'translate(-1px,-1px)':'none',cursor:'pointer'}}>
                  <div className="tg-display" style={{fontSize:12,lineHeight:1.15}}>{o.t}</div>
                  <div style={{fontSize:11,marginTop:4,opacity:.8,fontWeight:500}}>{o.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{display:'flex',gap:14,marginTop:32}}>
            <button className="tg-btn ghost" style={{width:'auto',padding:'14px 22px'}}>← BACK</button>
            <button className="tg-btn orange" style={{flex:1}}>REVIEW INVITE →</button>
          </div>
        </div>
      </div>

      <div style={{borderLeft:`2px solid ${TG.ink}`,background:TG.ink,padding:'24px 20px',color:TG.cream,overflow:'auto'}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>— LIVE PREVIEW</div>
        <div style={{marginTop:12,background:TG.orange,padding:'18px 16px',border:`2px solid ${TG.cream}`,boxShadow:`4px 4px 0 ${TG.orangeDk}`,position:'relative'}}>
          <div className="tg-display" style={{fontSize:9,opacity:.85}}>— ADMIT ONE</div>
          <div className="tg-display" style={{fontSize:24,lineHeight:.9,marginTop:6}}>BOB'S<br/>SURVIVOR<br/><span style={{color:TG.mustard}}>'26.</span></div>
          <TicketEdge dark count={14}/>
        </div>
        <div style={{marginTop:18,background:TG.chalk,color:TG.ink}}>
          <div className="tg-field"><span className="lbl">BUY-IN</span><span className="val">$50</span></div>
          <div className="tg-field"><span className="lbl">CAP</span><span className="val">64</span></div>
          <div className="tg-field"><span className="lbl">POT</span><span className="val" style={{color:TG.orange}}>$3,200</span></div>
        </div>
      </div>
    </div>
  </Desktop>
);

// B3 alt · Custom subdomain claim
LoopB.B3b = () => (
  <Desktop>
    <DesktopHeader crumb="CUSTOM SUBDOMAIN"/>
    <div style={{padding:'36px 48px',flex:1,overflow:'auto'}}>
      <div className="tg-chip-orange">OPTIONAL · PRO MOVE</div>
      <div className="tg-display" style={{fontSize:54,lineHeight:.9,marginTop:14}}>GIVE IT<br/>A <span className="tg-hl">HOME ADDRESS.</span></div>
      <div style={{fontSize:14,color:TG.ink2,marginTop:10,maxWidth:620,fontWeight:500}}>Claim a subdomain and we'll spin up a mini-site for your league. Share a clean link, embed the invite anywhere.</div>

      <div style={{marginTop:30,maxWidth:720}}>
        <div style={{border:`2px solid ${TG.ink}`,padding:'18px 20px',background:TG.chalk,display:'flex',alignItems:'baseline',boxShadow:`5px 5px 0 ${TG.orange}`}}>
          <input defaultValue="bobs-survivor" style={{border:0,background:'transparent',fontFamily:'Archivo Black',fontSize:32,outline:'none',flex:1}}/>
          <div style={{fontFamily:'Archivo Black',fontSize:20,color:TG.ink2,opacity:.6}}>.welikesports.com</div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:10,marginTop:10}}>
          <div style={{padding:'4px 10px',background:TG.field,color:TG.cream,fontFamily:'Archivo Black',fontSize:10,letterSpacing:'.12em'}}>✓ AVAILABLE</div>
          <div className="tg-hand" style={{fontSize:16,color:TG.ink2}}>nice one, bob ↗</div>
        </div>

        <div style={{marginTop:28}}>
          <div className="tg-display" style={{fontSize:11,marginBottom:8}}>SUGGESTIONS</div>
          <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
            {['bob-picks','survivor-26','mcallister-league','the-book'].map((s,i)=>(
              <div key={s} className="tg-pill" style={{fontSize:11,padding:'6px 12px',cursor:'pointer',transform:`rotate(${((i%3)-1)*0.8}deg)`}}>{s}</div>
            ))}
          </div>
        </div>

        <div className="tg-card" style={{marginTop:26,padding:18,background:TG.mustard,borderColor:TG.ink}}>
          <div className="tg-display" style={{fontSize:11}}>WHAT YOU GET</div>
          <ul style={{margin:'8px 0 0 18px',fontSize:13,lineHeight:1.7,fontWeight:600}}>
            <li>bobs-survivor.welikesports.com redirects to your league</li>
            <li>Open Graph previews when you drop the link in iMessage</li>
            <li>One-click invite embed for Twitter, Discord, wherever</li>
          </ul>
        </div>

        <div style={{display:'flex',gap:14,marginTop:32}}>
          <button className="tg-btn ghost" style={{width:'auto',padding:'14px 22px'}}>SKIP FOR NOW</button>
          <button className="tg-btn orange" style={{flex:1}}>CLAIM bobs-survivor →</button>
        </div>
      </div>
    </div>
  </Desktop>
);

// B4 · Review & launch
LoopB.B4 = () => (
  <Desktop>
    <DesktopHeader crumb="REVIEW · STEP 04/05"/>
    <div style={{padding:'32px 48px',flex:1,overflow:'auto'}}>
      <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between'}}>
        <div>
          <div className="tg-chip-orange">STEP 04 / 05</div>
          <div className="tg-display" style={{fontSize:50,lineHeight:.9,marginTop:12}}>ONE LAST LOOK<br/>BEFORE <span style={{color:TG.orange}}>KICKOFF.</span></div>
        </div>
        <StickyNote rotate={-4}>editable til first entry</StickyNote>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 380px',gap:28,marginTop:28}}>
        <div>
          <div className="tg-card">
            <div style={{background:TG.orange,color:TG.cream,padding:'20px 22px',borderBottom:`2px solid ${TG.ink}`,position:'relative'}}>
              <div className="tg-display" style={{fontSize:11,opacity:.85}}>SURVIVOR · NFL · 17 WEEKS</div>
              <div className="tg-display" style={{fontSize:34,lineHeight:1,marginTop:6}}>Bob's NFL Survivor '26</div>
              <div style={{fontSize:13,marginTop:6,fontFamily:'monospace',opacity:.9}}>bobs-survivor.welikesports.com</div>
            </div>
            <div style={{padding:'18px 22px'}}>
              {[
                {k:'BUY-IN',v:'$50 USDC'},
                {k:'MAX ENTRIES',v:'64'},
                {k:'DEADLINE',v:'Sun · Sep 7 · 12:55 PM ET'},
                {k:'PAYOUT',v:'Winner take all'},
                {k:'HOUSE TAKE',v:'$0 · no cut'},
                {k:'SETTLEMENT',v:'Onchain · Base · USDC'},
              ].map(r=>(
                <div key={r.k} className="tg-field"><span className="lbl">{r.k}</span><span className="val">{r.v}</span></div>
              ))}
            </div>
          </div>

          <div style={{marginTop:18,padding:'16px 18px',background:TG.ink,color:TG.cream,border:`2px solid ${TG.ink}`}}>
            <div className="tg-display" style={{fontSize:11,color:TG.mustard}}>⚠ YOU ARE THE COMMISSIONER</div>
            <div style={{fontSize:13,marginTop:6,lineHeight:1.5}}>You can edit rules and invite/remove players until the first entry. After that, core rules are locked — settlement runs onchain.</div>
          </div>
        </div>

        <div>
          <div className="tg-display" style={{fontSize:11,marginBottom:8}}>— LAUNCH CHECKLIST</div>
          <div className="tg-card">
            {[
              {t:'Game type set',ok:true},
              {t:'Rules configured',ok:true},
              {t:'Name + subdomain claimed',ok:true},
              {t:'Buy-in & payout defined',ok:true},
              {t:'You pay your own entry',ok:false,d:'required at launch'},
            ].map((r,i)=>(
              <div key={i} className="tg-field" style={{gap:10}}>
                <div style={{width:22,height:22,border:`2px solid ${TG.ink}`,background:r.ok?TG.field:TG.cream,color:TG.cream,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'Archivo Black',fontSize:12}}>{r.ok?'✓':''}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,fontSize:13}}>{r.t}</div>
                  {r.d && <div style={{fontSize:11,color:TG.ink2,marginTop:2}}>{r.d}</div>}
                </div>
              </div>
            ))}
          </div>
          <button className="tg-btn orange" style={{marginTop:20}}>LAUNCH LEAGUE · $50 →</button>
          <button className="tg-btn ghost" style={{marginTop:10}}>← BACK TO EDIT</button>
        </div>
      </div>
    </div>
  </Desktop>
);

// B5 · League launched
LoopB.B5 = () => (
  <Desktop bg={TG.mustard}>
    <DesktopHeader crumb="LIVE · BOB'S SURVIVOR"/>
    <div style={{flex:1,overflow:'auto',padding:'30px 48px',position:'relative'}}>
      <div style={{position:'absolute',top:20,right:40,transform:'rotate(14deg)',zIndex:2}}>
        <StarBurst size={130} fill={TG.orange}>
          <div className="tg-display" style={{fontSize:12,color:TG.cream,transform:'rotate(-10deg)'}}>WE'RE</div>
          <div className="tg-display" style={{fontSize:26,color:TG.cream,lineHeight:.9,transform:'rotate(-10deg)'}}>LIVE!</div>
        </StarBurst>
      </div>

      <div style={{maxWidth:720}}>
        <div className="tg-stamp" style={{background:TG.field,color:TG.cream}}>✓ LEAGUE LAUNCHED · 12:04 PM ET</div>
        <div className="tg-display" style={{fontSize:76,lineHeight:.86,marginTop:14}}>GATES<br/>ARE <span style={{color:TG.orange}}>OPEN.</span></div>
        <div style={{fontSize:16,color:TG.ink2,marginTop:10,fontWeight:600,maxWidth:520}}>Your league is live on chain. Drop the link in the group chat — once first entry lands, we'll flip on the scoreboard.</div>

        <div className="tg-card" style={{marginTop:26,padding:20}}>
          <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>YOUR INVITE LINK</div>
          <div style={{display:'flex',alignItems:'center',gap:12,marginTop:10}}>
            <div style={{flex:1,padding:'14px 16px',border:`2px solid ${TG.ink}`,background:TG.chalk,fontFamily:'monospace',fontSize:14}}>bobs-survivor.welikesports.com</div>
            <button className="tg-btn sm" style={{width:'auto',padding:'13px 18px'}}>COPY</button>
          </div>
          <div style={{display:'flex',gap:8,marginTop:14,flexWrap:'wrap'}}>
            {['iMessage','WhatsApp','Twitter','Discord','Email','QR code'].map((s,i)=>(
              <div key={s} className="tg-pill" style={{fontSize:11,padding:'6px 12px',cursor:'pointer',background:TG.chalk,transform:`rotate(${((i%3)-1)*0.6}deg)`}}>{s}</div>
            ))}
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginTop:22}}>
          {[{l:'CAP',v:'64'},{l:'YOUR ENTRY',v:'✓ IN'},{l:'DEADLINE',v:'6D 22H'}].map(s=>(
            <div key={s.l} className="tg-card" style={{padding:14}}>
              <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>{s.l}</div>
              <div className="tg-display" style={{fontSize:24,marginTop:4}}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </Desktop>
);

// B5 alt · Stadium scoreboard hero
LoopB.B5b = () => (
  <Desktop bg={TG.ink}>
    <div style={{padding:'50px 48px',flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',position:'relative',color:TG.cream}}>
      <div style={{position:'absolute',inset:0,background:`repeating-linear-gradient(90deg, ${TG.ink} 0 60px, #221b12 60px 120px)`,opacity:.5}}/>
      <div style={{position:'relative',textAlign:'center'}}>
        <div className="tg-stamp" style={{background:TG.orange,color:TG.cream,fontSize:12}}>✓ LIVE · BLOCK 18,421,903</div>
        <div className="tg-display" style={{fontSize:130,lineHeight:.85,marginTop:22,color:TG.mustard,textShadow:`6px 6px 0 ${TG.orange}`}}>LEAGUE<br/>LIVE.</div>
        <div className="tg-hand" style={{fontSize:36,marginTop:16,color:TG.mustard,transform:'rotate(-2deg)'}}>send it to the group chat ↓</div>
        <div style={{marginTop:30,display:'inline-flex',gap:10,background:TG.chalk,padding:'14px 22px',border:`2px solid ${TG.cream}`,boxShadow:`6px 6px 0 ${TG.orange}`,color:TG.ink}}>
          <div style={{fontFamily:'monospace',fontSize:18,fontWeight:600}}>bobs-survivor.welikesports.com</div>
          <button className="tg-btn sm" style={{width:'auto',padding:'8px 14px'}}>COPY</button>
        </div>
      </div>
    </div>
  </Desktop>
);

// B6 · Commissioner lobby (pre-start)
LoopB.B6 = () => (
  <Desktop>
    <DesktopHeader crumb="BOB'S SURVIVOR '26 · LOBBY"/>
    <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 340px',overflow:'hidden'}}>
      <div style={{padding:'28px 40px',overflow:'auto'}}>
        <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between'}}>
          <div>
            <div className="tg-chip-orange">PRE-KICKOFF · 2D 14H LEFT</div>
            <div className="tg-display" style={{fontSize:38,lineHeight:.95,marginTop:10}}>Bob's NFL Survivor '26</div>
            <div style={{fontSize:13,fontFamily:'monospace',color:TG.ink2,marginTop:4}}>bobs-survivor.welikesports.com</div>
          </div>
          <div style={{display:'flex',gap:8}}>
            <button className="tg-btn ghost sm" style={{width:'auto',padding:'10px 14px'}}>EDIT</button>
            <button className="tg-btn sm" style={{width:'auto',padding:'10px 14px'}}>COPY INVITE</button>
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginTop:22}}>
          {[{l:'ENTRIES',v:'41/64'},{l:'POT',v:'$2,050',c:TG.orange},{l:'DEADLINE',v:'SUN 12:55PM'},{l:'STATUS',v:'JOINING'}].map(s=>(
            <div key={s.l} className="tg-card" style={{padding:14}}>
              <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>{s.l}</div>
              <div className="tg-display" style={{fontSize:22,marginTop:4,color:s.c||TG.ink}}>{s.v}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:28}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
            <div className="tg-display" style={{fontSize:13}}>— WHO'S IN · 41</div>
            <div className="tg-display" style={{fontSize:11,color:TG.ink2}}>SORT: JOIN ORDER</div>
          </div>
          <div className="tg-card" style={{marginTop:10}}>
            {[
              {n:'Bob M.',r:'commish',t:'12:04 PM',s:'PAID'},
              {n:'jake.eth',r:'player',t:'12:06 PM',s:'PAID'},
              {n:'mel',r:'player',t:'12:14 PM',s:'PAID'},
              {n:'dan_12',r:'player',t:'12:31 PM',s:'PAID'},
              {n:'sandra',r:'player',t:'1:02 PM',s:'PAID'},
              {n:'avi.k',r:'player',t:'1:44 PM',s:'PENDING',warn:true},
            ].map((r,i)=>(
              <div key={i} className="tg-field" style={{gap:12}}>
                <Avatar name={r.n} size={28}/>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,fontSize:14}}>{r.n} {r.r==='commish' && <span className="tg-chip-orange" style={{fontSize:9,marginLeft:6,padding:'1px 6px'}}>YOU</span>}</div>
                  <div style={{fontSize:11,color:TG.ink2,marginTop:2}}>{r.t}</div>
                </div>
                <div className="tg-display" style={{fontSize:10,padding:'3px 8px',background:r.warn?TG.mustard:TG.field,color:r.warn?TG.ink:TG.cream}}>{r.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{borderLeft:`2px solid ${TG.ink}`,background:TG.chalk,padding:'26px 22px',overflow:'auto'}}>
        <div className="tg-display" style={{fontSize:11,color:TG.ink2}}>— COMMISH TOOLS</div>
        <div style={{marginTop:14,display:'flex',flexDirection:'column',gap:10}}>
          <button className="tg-btn sm">SEND REMINDER TO PENDING (1)</button>
          <button className="tg-btn ghost sm">POST ANNOUNCEMENT</button>
          <button className="tg-btn ghost sm">EXTEND DEADLINE</button>
          <button className="tg-btn ghost sm" style={{borderColor:TG.brick,color:TG.brick}}>CANCEL LEAGUE · REFUND</button>
        </div>

        <div className="tg-display" style={{fontSize:11,color:TG.ink2,marginTop:24}}>— RECENT ACTIVITY</div>
        <div style={{marginTop:10}}>
          {[{t:'sandra joined',d:'2m'},{t:'dan_12 joined',d:'14m'},{t:'mel joined',d:'52m'},{t:'invite opened via iMessage ×3',d:'1h'}].map((r,i)=>(
            <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:i<3?`1px dashed ${TG.ink}`:0}}>
              <div className="tg-display" style={{fontSize:11,color:TG.ink}}>{r.t}</div>
              <div className="tg-display" style={{fontSize:11,color:TG.ink2}}>{r.d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </Desktop>
);

window.LoopB = LoopB;