// loop-d.jsx — Gameplay D1-D6 + alternates
// Survivor pre-game → make pick → LIVE → outcome → next round

const LoopD = {};

const TEAMS = [
  {c:'KC',n:'Chiefs',bg:'#E31837',opp:'DEN',spread:'-9.5',fav:true},
  {c:'BUF',n:'Bills',bg:'#00338D',opp:'NYJ',spread:'-3.5'},
  {c:'SF',n:'49ers',bg:'#AA0000',opp:'LAR',spread:'-6.5'},
  {c:'BAL',n:'Ravens',bg:'#241773',opp:'CIN',spread:'-2.5'},
  {c:'DET',n:'Lions',bg:'#0076B6',opp:'MIN',spread:'-4.5'},
  {c:'PHI',n:'Eagles',bg:'#004C54',opp:'WAS',spread:'-7.0'},
];

// D1 · Pre-game lobby
LoopD.D1 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'14px 16px 0',display:'flex',alignItems:'center',gap:10}}>
      <button style={{border:0,background:'transparent'}} className="tg-display"><span style={{fontSize:12}}>← LEAGUES</span></button>
      <div style={{flex:1}}/>
      <div className="tg-pill" style={{fontSize:9}}>COMMISH · BOB M.</div>
    </div>

    <div style={{padding:'16px 16px 0',flex:1,overflow:'auto'}}>
      {/* League header */}
      <div style={{background:TG.ink,color:TG.cream,padding:'16px 16px 14px',border:`2px solid ${TG.ink}`,boxShadow:`5px 5px 0 ${TG.orange}`,position:'relative'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
          <div>
            <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>SURVIVOR · NFL · WEEK 1</div>
            <div className="tg-display" style={{fontSize:26,lineHeight:.9,marginTop:6}}>BOB'S SURVIVOR '26</div>
          </div>
          <div className="tg-stamp" style={{background:TG.orange,color:TG.cream,fontSize:9}}>YOU · SEAT 42</div>
        </div>
        <div style={{display:'flex',gap:16,marginTop:14}}>
          <div><div className="tg-display" style={{fontSize:9,opacity:.6}}>ALIVE</div><div className="tg-display" style={{fontSize:18}}>41/64</div></div>
          <div><div className="tg-display" style={{fontSize:9,opacity:.6}}>POT</div><div className="tg-display" style={{fontSize:18,color:TG.mustard}}>$2,050</div></div>
          <div><div className="tg-display" style={{fontSize:9,opacity:.6}}>ROUND</div><div className="tg-display" style={{fontSize:18}}>1 / 17</div></div>
        </div>
      </div>

      {/* Countdown card - HERO */}
      <div style={{marginTop:20,background:TG.orange,color:TG.cream,padding:'16px 16px 18px',border:`2px solid ${TG.ink}`,boxShadow:`5px 5px 0 ${TG.ink}`,position:'relative',overflow:'hidden'}}>
        <div className="tg-display" style={{fontSize:10,opacity:.85}}>— PICKS CLOSE IN</div>
        <div style={{display:'flex',alignItems:'baseline',gap:10,marginTop:4}}>
          <div className="tg-display" style={{fontSize:54,lineHeight:.85,letterSpacing:'-.03em'}}>2D 14H</div>
          <div className="tg-hand" style={{fontSize:22,transform:'rotate(-5deg)'}}>tick tock</div>
        </div>
        <div className="tg-display" style={{fontSize:11,marginTop:4,opacity:.85}}>SUNDAY · 12:55 PM ET · KICKOFF</div>
        <div style={{position:'absolute',right:-20,top:-8,transform:'rotate(10deg)',opacity:.15}}>
          <StarBurst size={100} fill={TG.cream}>{null}</StarBurst>
        </div>
      </div>

      {/* Used teams */}
      <div style={{marginTop:18}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:8}}>— YOUR USED TEAMS (CAN'T REPEAT)</div>
        <div style={{display:'flex',gap:6}}>
          <div className="tg-display" style={{fontSize:11,color:TG.ink2,alignSelf:'center'}}>None yet — 32 teams available</div>
        </div>
      </div>

      {/* Quick standings */}
      <div style={{marginTop:18}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:8}}>— RECENT BUZZ</div>
        <div className="tg-card">
          {[
            {t:'mel picked KC',d:'12m'},
            {t:'jake.eth picked BUF',d:'28m'},
            {t:'sandra is still deciding',d:'1h',italic:true},
          ].map((r,i)=>(
            <div key={i} className="tg-field">
              <span style={{fontSize:13,fontWeight:700,fontStyle:r.italic?'italic':'normal',color:r.italic?TG.ink2:TG.ink}}>{r.t}</span>
              <span className="tg-display" style={{fontSize:10,color:TG.ink2}}>{r.d}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{height:20}}/>
    </div>

    <div style={{padding:'12px 16px 16px',background:TG.cream,borderTop:`2px solid ${TG.ink}`}}>
      <button className="tg-btn orange">MAKE WEEK 1 PICK →</button>
    </div>
    <NavBar active="games"/>
  </div>
);

// D2 · Make pick (team grid)
LoopD.D2 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'14px 16px 0',display:'flex',alignItems:'center',gap:10}}>
      <button style={{border:0,background:'transparent'}} className="tg-display"><span style={{fontSize:12}}>← LOBBY</span></button>
      <div style={{flex:1}}/>
      <div className="tg-pill" style={{fontSize:9,background:TG.orange,color:TG.cream,borderColor:TG.ink}}>WK 1 · 2D 14H</div>
    </div>

    <div style={{padding:'16px 16px 0',flex:1,overflow:'auto'}}>
      <div className="tg-display" style={{fontSize:36,lineHeight:.9}}>PICK ONE.<br/><span style={{color:TG.orange}}>RIDE OR DIE.</span></div>
      <div style={{fontSize:12,color:TG.ink2,marginTop:6,fontWeight:500}}>They win → you live. Can't reuse this team all season.</div>

      {/* Team grid */}
      <div style={{marginTop:18,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:10}}>
        {TEAMS.map((t,i)=>(
          <div key={t.c} style={{border:`2px solid ${TG.ink}`,background:i===0?TG.mustard:TG.chalk,padding:'10px 12px',boxShadow:i===0?`4px 4px 0 ${TG.orange}`:`3px 3px 0 ${TG.ink}`,cursor:'pointer',transform:i===0?'translate(-1px,-1px)':'none',position:'relative'}}>
            <div style={{display:'flex',alignItems:'center',gap:8}}>
              <TeamBadge code={t.c} bg={t.bg} size={36}/>
              <div style={{flex:1,minWidth:0}}>
                <div className="tg-display" style={{fontSize:14,lineHeight:1}}>{t.n}</div>
                <div className="tg-display" style={{fontSize:9,color:TG.ink2,marginTop:2}}>VS {t.opp}</div>
              </div>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:8,paddingTop:6,borderTop:`1px dashed ${TG.ink}`}}>
              <div className="tg-display" style={{fontSize:10}}>{t.spread}</div>
              <div className="tg-display" style={{fontSize:9,color:t.fav?TG.field:TG.ink2}}>{t.fav?'BIG FAV':'FAV'}</div>
            </div>
            {i===0 && <div style={{position:'absolute',top:-8,right:-8}}>
              <div className="tg-stamp" style={{background:TG.orange,color:TG.cream,fontSize:9,transform:'rotate(6deg)'}}>PICKED</div>
            </div>}
          </div>
        ))}
      </div>

      <div style={{marginTop:14}} className="tg-display">
        <div style={{fontSize:10,color:TG.ink2,textAlign:'center'}}>· 26 MORE TEAMS ·</div>
      </div>

      {/* Crowd heatmap */}
      <div style={{marginTop:16,background:TG.ink,color:TG.cream,padding:'12px 14px'}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>— CROWD PICKS · LEAGUE OF 41</div>
        <div style={{marginTop:8,display:'flex',gap:4}}>
          <div style={{flex:3,height:28,background:TG.orange,display:'flex',alignItems:'center',justifyContent:'center'}} className="tg-display">KC · 18</div>
          <div style={{flex:2,height:28,background:TG.mustard,color:TG.ink,display:'flex',alignItems:'center',justifyContent:'center'}} className="tg-display">BUF · 11</div>
          <div style={{flex:1.5,height:28,background:TG.field,display:'flex',alignItems:'center',justifyContent:'center'}} className="tg-display">SF · 7</div>
          <div style={{flex:.8,height:28,background:TG.brick,display:'flex',alignItems:'center',justifyContent:'center',fontSize:9}} className="tg-display">+5</div>
        </div>
      </div>
      <div style={{height:16}}/>
    </div>

    <div style={{padding:'12px 16px 16px',background:TG.cream,borderTop:`2px solid ${TG.ink}`}}>
      <button className="tg-btn orange">LOCK KC CHIEFS →</button>
    </div>
  </div>
);

// D3 · Pick locked
LoopD.D3 = () => (
  <div className="tg-root" style={{background:TG.ink,color:TG.cream}}>
    <StatusBar dark/>
    <div style={{padding:'30px 20px 0',flex:1,display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',position:'relative'}}>
      {/* Giant ticket */}
      <div style={{width:'100%',background:'#E31837',color:TG.cream,padding:'20px 18px 26px',border:`3px solid ${TG.cream}`,boxShadow:`6px 6px 0 ${TG.orange}`,position:'relative',marginTop:20}}>
        <div style={{display:'flex',justifyContent:'space-between'}}>
          <div className="tg-display" style={{fontSize:10,opacity:.85}}>— WEEK 1 PICK · LOCKED</div>
          <div className="tg-display" style={{fontSize:10,opacity:.85}}>#042</div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:14,marginTop:14}}>
          <TeamBadge code="KC" bg={TG.ink} size={80}/>
          <div style={{textAlign:'left',flex:1}}>
            <div className="tg-display" style={{fontSize:34,lineHeight:.9}}>CHIEFS</div>
            <div className="tg-display" style={{fontSize:11,opacity:.85,marginTop:4}}>VS BRONCOS · SUN 1:00P</div>
            <div className="tg-hand" style={{fontSize:20,transform:'rotate(-4deg)',marginTop:6,color:TG.mustard}}>ride or die</div>
          </div>
        </div>
        <TicketEdge dark count={18}/>
      </div>

      <div style={{marginTop:34}}>
        <div className="tg-stamp" style={{background:TG.field,color:TG.cream,fontSize:11}}>✓ PICK LOCKED · 0x…c4a1</div>
        <div className="tg-display" style={{fontSize:30,marginTop:14,lineHeight:.95}}>NOW WE <span style={{color:TG.orange}}>WAIT.</span></div>
        <div className="tg-hand" style={{fontSize:20,marginTop:10,color:TG.mustard}}>see you sunday at 1 ↘</div>
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'16px 0 20px',display:'flex',gap:10,width:'100%'}}>
        <button className="tg-btn ghost sm" style={{flex:1,borderColor:TG.cream,color:TG.cream}}>CHANGE PICK</button>
        <button className="tg-btn sm" style={{flex:1.4,background:TG.orange,color:TG.cream,boxShadow:`4px 4px 0 ${TG.cream}`}}>INVITE FRIENDS →</button>
      </div>
    </div>
  </div>
);

// D4 · LIVE game (simulated)
LoopD.D4 = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(()=>{ const id=setInterval(()=>setTick(t=>t+1),1300); return ()=>clearInterval(id); },[]);
  const prob = 78 + Math.sin(tick/3)*3;

  return (
    <div className="tg-root" style={{background:TG.field}}>
      <div style={{position:'absolute',inset:0,background:`repeating-linear-gradient(90deg,${TG.field} 0 40px,${TG.fieldDk} 40px 80px)`,opacity:.3,pointerEvents:'none'}}/>
      <StatusBar dark/>

      <div style={{padding:'12px 16px 0',position:'relative',color:TG.cream}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div className="tg-display" style={{fontSize:12,opacity:.8}}>← BOB'S SURVIVOR</div>
          <div className="tg-stamp" style={{background:TG.brick,color:TG.cream,transform:'rotate(-3deg)',fontSize:10}}>
            <span style={{width:6,height:6,background:TG.cream,borderRadius:'50%',animation:'tg-pulse 1s infinite',display:'inline-block'}}/>
            LIVE · Q4 · 2:14
          </div>
        </div>

        {/* Scoreboard */}
        <div style={{marginTop:14,background:TG.ink,border:`3px solid ${TG.cream}`,padding:'16px 18px',boxShadow:`6px 6px 0 ${TG.brick}`}}>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <TeamBadge code="KC" bg="#E31837" size={44}/>
            <div style={{flex:1}}>
              <div className="tg-display" style={{fontSize:14,color:TG.cream}}>CHIEFS</div>
              <div className="tg-display" style={{fontSize:9,color:TG.mustard}}>YOUR PICK · WK 1</div>
            </div>
            <div className="tg-display" style={{fontSize:46,color:TG.cream,lineHeight:.9}}>27</div>
          </div>
          <div style={{height:2,background:TG.cream,opacity:.3,margin:'10px 0'}}/>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <TeamBadge code="DEN" bg="#FB4F14" size={44}/>
            <div style={{flex:1}}>
              <div className="tg-display" style={{fontSize:14,color:TG.cream}}>BRONCOS</div>
              <div className="tg-display" style={{fontSize:9,color:TG.cream,opacity:.5}}>VISITOR</div>
            </div>
            <div className="tg-display" style={{fontSize:46,color:TG.cream,opacity:.6,lineHeight:.9}}>24</div>
          </div>
        </div>
      </div>

      {/* Win prob */}
      <div style={{padding:'16px 16px 0'}}>
        <div style={{background:TG.mustard,border:`3px solid ${TG.ink}`,boxShadow:`5px 5px 0 ${TG.ink}`,padding:'14px 16px'}}>
          <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>— WIN PROBABILITY</div>
          <div style={{display:'flex',alignItems:'baseline',gap:6,marginTop:2}}>
            <div className="tg-display" style={{fontSize:72,letterSpacing:'-.04em',lineHeight:.85}}>{prob.toFixed(0)}</div>
            <div className="tg-display" style={{fontSize:34}}>%</div>
            <div style={{flex:1}}/>
            <div className="tg-hand" style={{fontSize:20,color:TG.brick,transform:'rotate(-5deg)'}}>cruisin'!</div>
          </div>
          <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginTop:2}}>▲ +2.4 LAST DRIVE</div>
          <div style={{marginTop:10,height:12,border:`2px solid ${TG.ink}`,background:TG.cream,position:'relative'}}>
            <div style={{width:`${prob}%`,height:'100%',background:TG.orange,transition:'width .6s'}}/>
          </div>
        </div>
      </div>

      {/* Standings */}
      <div style={{padding:'16px 16px 0',flex:1,overflow:'auto',color:TG.cream}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
          <div className="tg-display" style={{fontSize:10}}>— POOL · 24 OF 41</div>
          <div className="tg-stamp" style={{background:TG.orange,color:TG.cream,fontSize:9}}>TOP 8%</div>
        </div>
        <div style={{marginTop:10,background:TG.chalk,border:`2px solid ${TG.ink}`,color:TG.ink}}>
          {[
            {p:'24',n:'you',s:'ALIVE',hl:true,t:'KC'},
            {p:'18',n:'jake.eth',s:'ALIVE',t:'BUF'},
            {p:'12',n:'mel',s:'ALIVE',t:'KC'},
            {p:'—',n:'dan_12',s:'OUT',t:'NYJ'},
          ].map((r,i)=>(
            <div key={i} style={{display:'flex',alignItems:'center',padding:'10px 12px',borderBottom:i<3?`1px dashed ${TG.ink}`:0,background:r.hl?TG.mustard:'transparent',gap:8}}>
              <div className="tg-display" style={{width:24,fontSize:11,color:TG.ink2}}>{r.p.padStart(2,'0')}</div>
              <div style={{fontWeight:700,fontSize:13,flex:1}}>{r.n}</div>
              <TeamBadge code={r.t} bg={r.t==='KC'?'#E31837':r.t==='BUF'?'#00338D':'#203731'} size={24}/>
              <div className="tg-display" style={{fontSize:9,padding:'2px 6px',background:r.s==='OUT'?TG.brick:TG.field,color:TG.cream}}>{r.s}</div>
            </div>
          ))}
        </div>
        <div style={{height:10}}/>
      </div>

      <NavBar active="games"/>
    </div>
  );
};

// D5 · Survived the week
LoopD.D5 = () => (
  <div className="tg-root" style={{background:TG.field}}>
    <div style={{position:'absolute',inset:0,background:`repeating-linear-gradient(90deg,${TG.field} 0 40px,${TG.fieldDk} 40px 80px)`,opacity:.3}}/>
    <StatusBar dark/>
    <div style={{padding:'20px 16px 0',flex:1,display:'flex',flexDirection:'column',color:TG.cream,position:'relative'}}>
      {/* giant SURVIVED stamp */}
      <div style={{marginTop:30,textAlign:'center',position:'relative'}}>
        <div style={{display:'inline-block',transform:'rotate(-4deg)',padding:'8px 28px',border:`4px solid ${TG.mustard}`,color:TG.mustard}} className="tg-display">
          <div style={{fontSize:14,letterSpacing:'.2em'}}>✦ WEEK 1 ✦</div>
          <div style={{fontSize:60,lineHeight:.9,letterSpacing:'-.03em'}}>SURVIVED</div>
        </div>
      </div>

      {/* ticket */}
      <div style={{marginTop:28,background:TG.ink,color:TG.cream,padding:'14px 16px 18px',border:`2px solid ${TG.cream}`,boxShadow:`5px 5px 0 ${TG.orange}`,position:'relative'}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>W1 RESULT · LEAGUE CUT 41 → 34</div>
        <div style={{display:'flex',alignItems:'center',gap:12,marginTop:10}}>
          <TeamBadge code="KC" bg="#E31837" size={50}/>
          <div style={{flex:1}}>
            <div className="tg-display" style={{fontSize:20,lineHeight:1}}>CHIEFS 27</div>
            <div style={{fontSize:12,opacity:.7,marginTop:2}}>def. DEN 24 · OT</div>
          </div>
          <div className="tg-stamp" style={{background:TG.mustard,color:TG.ink,fontSize:10}}>W</div>
        </div>
        <TicketEdge dark count={16}/>
      </div>

      <div style={{marginTop:22,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
        {[{l:'ALIVE',v:'34',c:TG.mustard},{l:'OUT THIS WK',v:'7',c:TG.brick},{l:'POT',v:'$2,050',c:TG.cream}].map(s=>(
          <div key={s.l} style={{background:'rgba(0,0,0,.35)',padding:'10px 8px',textAlign:'center',border:`1px solid ${s.c}`}}>
            <div className="tg-display" style={{fontSize:9,opacity:.75}}>{s.l}</div>
            <div className="tg-display" style={{fontSize:22,marginTop:2,color:s.c}}>{s.v}</div>
          </div>
        ))}
      </div>

      <div style={{marginTop:22,background:TG.chalk,color:TG.ink,padding:14,border:`2px solid ${TG.cream}`}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>— CASUALTIES</div>
        <div style={{marginTop:6,display:'flex',flexWrap:'wrap',gap:4}}>
          {['dan_12','amber','pk','tony_h','sid','juan_m','nico'].map(n=>(
            <span key={n} style={{padding:'3px 7px',background:TG.brick,color:TG.cream,fontSize:11,fontWeight:700,textDecoration:'line-through',textDecorationColor:TG.ink}}>{n}</span>
          ))}
        </div>
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'14px 0 18px'}}>
        <button className="tg-btn" style={{background:TG.orange,color:TG.cream,boxShadow:`4px 4px 0 ${TG.mustard}`}}>WEEK 2 OPENS IN 3D →</button>
      </div>
    </div>
  </div>
);

// D6 · Eliminated
LoopD.D6 = () => (
  <div className="tg-root" style={{background:TG.brick}}>
    <div className="tg-grain"/>
    <StatusBar dark/>
    <div style={{padding:'20px 16px 0',flex:1,display:'flex',flexDirection:'column',color:TG.cream}}>
      <div style={{display:'flex',justifyContent:'space-between'}}>
        <button style={{border:0,background:'transparent',color:TG.cream}} className="tg-display"><span style={{fontSize:12}}>← LEAGUE</span></button>
        <div className="tg-stamp" style={{background:TG.cream,color:TG.brick,fontSize:10}}>W3 RESULT</div>
      </div>

      <div style={{marginTop:30,textAlign:'center'}}>
        <div style={{display:'inline-block',transform:'rotate(-5deg)',padding:'10px 30px',border:`4px solid ${TG.cream}`,opacity:.95}} className="tg-display">
          <div style={{fontSize:14,letterSpacing:'.2em'}}>— FINAL WHISTLE —</div>
          <div style={{fontSize:60,lineHeight:.9,letterSpacing:'-.03em'}}>ELIMINATED</div>
        </div>
        <div className="tg-hand" style={{fontSize:22,marginTop:14,color:TG.mustard}}>tough break, seat 42</div>
      </div>

      <div style={{marginTop:22,background:TG.ink,color:TG.cream,padding:14,border:`2px solid ${TG.cream}`}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>WHAT HAPPENED</div>
        <div style={{display:'flex',alignItems:'center',gap:12,marginTop:10}}>
          <TeamBadge code="CIN" bg="#FB4F14" size={44}/>
          <div style={{flex:1}}>
            <div className="tg-display" style={{fontSize:16}}>BENGALS 17</div>
            <div style={{fontSize:11,opacity:.75,marginTop:2}}>lost to BAL 24 · your W3 pick</div>
          </div>
          <div className="tg-stamp" style={{background:TG.brick,color:TG.cream}}>L</div>
        </div>
      </div>

      <div className="tg-card" style={{marginTop:18,color:TG.ink}}>
        <div className="tg-field"><span className="lbl">YOU LASTED</span><span className="val">3 WEEKS</span></div>
        <div className="tg-field"><span className="lbl">FINAL RANK</span><span className="val">22 / 41</span></div>
        <div className="tg-field"><span className="lbl">BUY-IN</span><span className="val" style={{color:TG.brick}}>$50 · IN THE POT</span></div>
      </div>

      <div style={{marginTop:18,padding:12,background:'rgba(245,236,215,.12)',border:`1px dashed ${TG.cream}`,fontSize:12,lineHeight:1.5}}>
        Stay in the group chat to watch the rest play out. 18 still alive.
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'16px 0 20px',display:'flex',flexDirection:'column',gap:10}}>
        <button className="tg-btn" style={{background:TG.mustard,color:TG.ink,boxShadow:`4px 4px 0 ${TG.ink}`}}>FOLLOW THE LEAGUE →</button>
        <button className="tg-btn ghost" style={{borderColor:TG.cream,color:TG.cream}}>FIND ANOTHER POOL</button>
      </div>
    </div>
  </div>
);

window.LoopD = LoopD;