// loop-c.jsx — Player Join C1-C6 + alternates
// Mobile web, invite-link entry. From link → "you're in" in under a minute.

const LoopC = {};

// C1 · Invite landing (unauthed, mobile web)
LoopC.C1 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'10px 16px 0',fontFamily:'monospace',fontSize:11,color:TG.ink2,display:'flex',alignItems:'center',gap:6}}>
      <div style={{width:12,height:12,background:TG.field,borderRadius:'50%',border:`1px solid ${TG.ink}`}}/>
      bobs-survivor.welikesports.com
    </div>

    <div style={{padding:'14px 16px 0',flex:1,overflow:'auto'}}>
      {/* Hero ticket */}
      <div style={{background:TG.orange,color:TG.cream,padding:'22px 20px 28px',border:`2px solid ${TG.ink}`,boxShadow:`5px 5px 0 ${TG.ink}`,position:'relative'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
          <div>
            <div className="tg-display" style={{fontSize:10,opacity:.85}}>— ADMIT ONE · GROUP CHAT PASS</div>
            <div className="tg-display" style={{fontSize:44,lineHeight:.86,marginTop:10}}>BOB'S<br/>SURVIVOR<br/><span style={{color:TG.mustard}}>'26.</span></div>
          </div>
          <div className="tg-hand" style={{fontSize:22,transform:'rotate(-6deg)',lineHeight:1,marginTop:8}}>u in?</div>
        </div>
        <div style={{marginTop:14,fontSize:12,fontFamily:'monospace',opacity:.85}}>COMMISSIONED BY BOB M. · SEAT #42</div>
        <TicketEdge dark count={22}/>
      </div>

      <div style={{display:'flex',alignItems:'center',gap:10,marginTop:20}}>
        <Avatar name="B" color={TG.mustard} size={40}/>
        <div>
          <div className="tg-display" style={{fontSize:9,color:TG.ink2}}>COMMISSIONER</div>
          <div style={{fontWeight:800,fontSize:15}}>Bob McAllister</div>
        </div>
        <div style={{flex:1}}/>
        <div className="tg-pill" style={{background:TG.field,color:TG.cream,borderColor:TG.ink}}>41 / 64 IN</div>
      </div>

      <div className="tg-card" style={{marginTop:16}}>
        <div className="tg-field"><span className="lbl">BUY-IN</span><span className="val">$50 USDC</span></div>
        <div className="tg-field"><span className="lbl">FORMAT</span><span className="val">SURVIVOR · NFL</span></div>
        <div className="tg-field"><span className="lbl">KICKOFF</span><span className="val">SUN · 1:00 PM</span></div>
        <div className="tg-field"><span className="lbl">POT</span><span className="val" style={{color:TG.orange}}>$2,050</span></div>
      </div>

      <div style={{marginTop:18}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:8}}>— WHO'S ROLLING · 41 DEEP</div>
        <div style={{display:'flex',flexWrap:'wrap',gap:5}}>
          {['JK','ML','DN','SR','AV','TM','BH','KR','PQ','CA','LB','+30'].map((p,i)=>(
            <Avatar key={i} name={p} size={32} color={i===11?TG.chalk:undefined}/>
          ))}
        </div>
      </div>

      <div style={{marginTop:18,background:TG.ink,color:TG.cream,padding:14}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>THE HOUSE RULES</div>
        <div style={{fontSize:12.5,marginTop:6,lineHeight:1.5}}>Pick one team a week. They win → you live. They lose → you're out. Can't ride the same team twice. Last chair standing eats.</div>
      </div>
      <div style={{height:16}}/>
    </div>

    <div style={{padding:'12px 16px 18px',background:TG.cream,borderTop:`2px solid ${TG.ink}`}}>
      <button className="tg-btn orange">I'M IN — $50 →</button>
      <div className="tg-display" style={{fontSize:9,color:TG.ink2,textAlign:'center',marginTop:8,letterSpacing:'.14em'}}>SIGN IN · ~60 SECONDS</div>
    </div>
  </div>
);

// C2 · Sign-in gate (invite-aware)
LoopC.C2 = () => (
  <div className="tg-root" style={{background:TG.ink}}>
    <StatusBar dark/>
    <div style={{padding:'16px 16px 0',display:'flex',alignItems:'center',gap:10,color:TG.cream}}>
      <button style={{border:0,background:'transparent',color:TG.cream}} className="tg-display"><span style={{fontSize:12}}>← BACK</span></button>
      <div style={{flex:1}}/>
      <div className="tg-pill" style={{background:'transparent',color:TG.cream,borderColor:TG.cream,fontSize:9}}>STEP 1 / 3</div>
    </div>

    {/* Context card - the invite they're joining */}
    <div style={{padding:'18px 16px 0'}}>
      <div style={{background:TG.orange,color:TG.cream,padding:'14px 16px',border:`2px solid ${TG.cream}`,boxShadow:`4px 4px 0 ${TG.orangeDk}`,display:'flex',alignItems:'center',gap:12}}>
        <div style={{width:38,height:38,border:`2px solid ${TG.cream}`,background:TG.ink,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <Shield size={22}/>
        </div>
        <div style={{flex:1}}>
          <div className="tg-display" style={{fontSize:10,opacity:.85}}>JOINING</div>
          <div className="tg-display" style={{fontSize:16,lineHeight:1,marginTop:2}}>BOB'S SURVIVOR '26</div>
        </div>
        <div className="tg-stamp" style={{background:TG.mustard,color:TG.ink,fontSize:10}}>$50</div>
      </div>
    </div>

    <div style={{padding:'24px 16px 0',flex:1,color:TG.cream,display:'flex',flexDirection:'column'}}>
      <div className="tg-display" style={{fontSize:40,lineHeight:.9}}>CHECK IN<br/>AT THE<br/><span style={{color:TG.orange}}>GATE.</span></div>
      <div style={{fontSize:13,color:TG.cream,opacity:.75,marginTop:10,maxWidth:300}}>We'll make a wallet for you — no seed phrase, no extension, no browser popups.</div>

      <div style={{marginTop:22,display:'flex',flexDirection:'column',gap:10}}>
        <div style={{background:TG.chalk,color:TG.ink,border:`2px solid ${TG.cream}`,padding:'14px 16px',display:'flex',alignItems:'center',gap:12,boxShadow:`4px 4px 0 ${TG.orange}`}}>
          <div style={{width:22,height:22,borderRadius:'50%',background:'conic-gradient(from 0deg,#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75%)'}}/>
          <span style={{fontWeight:800,fontSize:15,flex:1}}>Continue with Google</span>
          <span className="tg-display" style={{fontSize:11}}>→</span>
        </div>
        <div style={{background:TG.chalk,color:TG.ink,border:`2px solid ${TG.cream}`,padding:'14px 16px',display:'flex',alignItems:'center',gap:12}}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill={TG.ink}><path d="M14.5 10.3c0-2.2 1.8-3.3 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.3-.1-2.6.8-3.3.8-.7 0-1.7-.8-2.9-.8-1.5 0-2.9.9-3.7 2.2-1.6 2.7-.4 6.8 1.1 9 .7 1.1 1.6 2.3 2.8 2.2 1.1 0 1.5-.7 2.9-.7 1.3 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.8-1.3 1.2-2.5 1.2-2.6-.1-.1-2.4-.9-2.4-3.6z"/></svg>
          <span style={{fontWeight:800,fontSize:15,flex:1}}>Continue with Apple</span>
          <span className="tg-display" style={{fontSize:11}}>→</span>
        </div>
        <div style={{border:`2px dashed ${TG.cream}`,padding:'12px 16px',display:'flex',alignItems:'center',gap:12,color:TG.cream,opacity:.85,fontSize:13,fontWeight:600}}>
          <div style={{width:18,height:18,border:`2px solid ${TG.cream}`,borderRadius:'50%'}}/>
          Email or existing wallet
        </div>
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'18px 0 20px',textAlign:'center'}}>
        <div className="tg-chip-orange" style={{background:'transparent',color:TG.mustard,border:`1px solid ${TG.mustard}`}}>SECURED BY PRIVY</div>
        <div style={{fontSize:11,color:TG.cream,opacity:.6,marginTop:10}}>By joining you agree to the <u>Terms</u> and <u>Privacy</u>.</div>
      </div>
    </div>
  </div>
);

// C3 · Combined deposit + entry (the "pay once, you're in" screen)
LoopC.C3 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'12px 16px 0',display:'flex',alignItems:'center'}}>
      <button style={{border:0,background:'transparent'}} className="tg-display"><span style={{fontSize:12}}>← BACK</span></button>
      <div style={{flex:1}}/>
      <div className="tg-pill" style={{fontSize:9}}>STEP 2 / 3</div>
    </div>

    <div style={{padding:'18px 16px 0',flex:1,overflow:'auto'}}>
      <div className="tg-chip-orange">JOINING BOB'S SURVIVOR</div>
      <div className="tg-display" style={{fontSize:42,lineHeight:.88,marginTop:14}}>ONE TAP<br/>GETS YOU<br/><span style={{color:TG.orange}}>IN.</span></div>
      <div style={{fontSize:13,color:TG.ink2,marginTop:8,fontWeight:500,maxWidth:300}}>We'll load your wallet and lock your seat at the same time.</div>

      {/* Breakdown */}
      <div className="tg-card" style={{marginTop:24}}>
        <div className="tg-field" style={{alignItems:'flex-start'}}>
          <div>
            <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>DEPOSIT</div>
            <div style={{fontSize:11,color:TG.ink2,marginTop:2,fontWeight:500}}>via Apple Pay · Coinbase onramp</div>
          </div>
          <span className="val">$51.52</span>
        </div>
        <div className="tg-field">
          <span className="lbl">ENTRY · BOB'S SURVIVOR</span>
          <span className="val" style={{color:TG.orange}}>− $50.00</span>
        </div>
        <div className="tg-field">
          <span className="lbl">GAS · BASE</span>
          <span className="val" style={{fontSize:13}}>− $0.02</span>
        </div>
        <div className="tg-field" style={{background:TG.mustard,borderBottom:0}}>
          <span className="lbl">LEFT IN COOLER</span>
          <span className="val" style={{fontSize:20}}>$1.50</span>
        </div>
      </div>

      {/* Payment method */}
      <div style={{marginTop:18}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:8}}>— PAYING WITH</div>
        <div className="tg-card">
          <div className="tg-field" style={{alignItems:'center'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <div style={{width:34,height:34,background:TG.ink,color:TG.cream,display:'flex',alignItems:'center',justifyContent:'center'}} className="tg-display"></div>
              <div>
                <div style={{fontWeight:800,fontSize:14}}>Apple Pay</div>
                <div className="tg-display" style={{fontSize:9,color:TG.ink2}}>INSTANT · NO ACCOUNT NEEDED</div>
              </div>
            </div>
            <div className="tg-display" style={{fontSize:11,color:TG.orange}}>CHANGE</div>
          </div>
        </div>
      </div>

      <div style={{marginTop:16,padding:'10px 14px',background:TG.chalk,border:`2px dashed ${TG.ink}`,display:'flex',alignItems:'center',gap:10}}>
        <div style={{width:26,height:26,background:TG.field,color:TG.cream,display:'flex',alignItems:'center',justifyContent:'center',border:`2px solid ${TG.ink}`,flexShrink:0}} className="tg-display">✓</div>
        <div style={{fontSize:12,lineHeight:1.4,fontWeight:500}}>Your buy-in is held onchain. If the league is cancelled, you get it back — no trust required.</div>
      </div>
      <div style={{height:16}}/>
    </div>

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

// C4 · Confirming entry (animated)
LoopC.C4 = () => (
  <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:'40px 20px',flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:TG.cream,position:'relative',textAlign:'center'}}>
      <div style={{position:'relative',width:170,height:170}}>
        <div style={{position:'absolute',inset:0,border:`8px solid ${TG.cream}`,borderTopColor:TG.mustard,borderRadius:'50%',animation:'tg-spin 1.1s linear infinite'}}/>
        <div style={{position:'absolute',inset:16,border:`4px dashed ${TG.mustard}`,borderRadius:'50%',animation:'tg-spin 4s linear infinite reverse'}}/>
        <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div className="tg-display" style={{fontSize:44,color:TG.mustard,letterSpacing:'-.04em'}}>🎟</div>
        </div>
      </div>
      <div className="tg-display" style={{fontSize:34,marginTop:26,lineHeight:.9}}>PUNCHING<br/>YOUR TICKET…</div>
      <div className="tg-hand" style={{fontSize:20,marginTop:14,color:TG.mustard}}>hold tight, seat #42</div>

      <div style={{marginTop:28,width:260}}>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 0',borderBottom:`1px dashed ${TG.cream}`,opacity:.85}}>
          <div style={{width:18,height:18,background:TG.mustard,color:TG.ink,display:'flex',alignItems:'center',justifyContent:'center',fontSize:11}}>✓</div>
          <div style={{fontWeight:600,fontSize:12,textAlign:'left',flex:1}}>Apple Pay confirmed</div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 0',borderBottom:`1px dashed ${TG.cream}`,opacity:.85}}>
          <div style={{width:18,height:18,background:TG.mustard,color:TG.ink,display:'flex',alignItems:'center',justifyContent:'center',fontSize:11}}>✓</div>
          <div style={{fontWeight:600,fontSize:12,textAlign:'left',flex:1}}>USDC in your wallet</div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 0'}}>
          <div style={{width:18,height:18,border:`2px solid ${TG.mustard}`,borderRadius:'50%',animation:'tg-pulse 1s infinite'}}/>
          <div style={{fontWeight:600,fontSize:12,textAlign:'left',flex:1}}>Locking your seat in Bob's Survivor…</div>
        </div>
      </div>
    </div>
  </div>
);

// C5 · You're in! (confetti/sticker moment)
LoopC.C5 = () => (
  <div className="tg-root" style={{background:TG.mustard}}>
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'20px 16px 0',flex:1,display:'flex',flexDirection:'column',position:'relative',overflow:'hidden'}}>
      {/* confetti dots */}
      {[{t:30,l:40,c:TG.orange,s:10},{t:80,l:300,c:TG.field,s:8},{t:150,l:30,c:TG.brick,s:12},{t:200,l:320,c:TG.ink,s:6},{t:100,l:200,c:TG.orange,s:7},{t:420,l:20,c:TG.field,s:10},{t:460,l:330,c:TG.brick,s:8}].map((d,i)=>(
        <div key={i} style={{position:'absolute',top:d.t,left:d.l,width:d.s,height:d.s,background:d.c,border:`2px solid ${TG.ink}`,transform:`rotate(${i*37}deg)`,zIndex:1}}/>
      ))}

      <div style={{position:'absolute',top:70,right:-20,transform:'rotate(16deg)',zIndex:3}}>
        <StarBurst size={130} fill={TG.orange}>
          <div className="tg-display" style={{fontSize:10,color:TG.cream,transform:'rotate(-10deg)'}}>YOU'RE</div>
          <div className="tg-display" style={{fontSize:26,color:TG.cream,lineHeight:.9,transform:'rotate(-10deg)'}}>IN!</div>
        </StarBurst>
      </div>
      <div style={{position:'absolute',top:330,left:-10,transform:'rotate(-10deg)',zIndex:3}}>
        <StickyNote rotate={-8} color={TG.chalk}>welcome, friend</StickyNote>
      </div>

      <div style={{marginTop:90,textAlign:'center',zIndex:2,position:'relative'}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>— SEAT NO.</div>
        <div className="tg-display" style={{fontSize:120,lineHeight:.85,letterSpacing:'-.04em'}}>42</div>
        <div className="tg-stamp" style={{marginTop:6,background:TG.ink,color:TG.mustard}}>✓ ENTRY CONFIRMED</div>
      </div>

      {/* Mini ticket stub */}
      <div style={{margin:'28px auto 0',width:'86%',background:TG.ink,color:TG.cream,padding:'14px 16px',border:`2px solid ${TG.ink}`,boxShadow:`4px 4px 0 ${TG.brick}`,position:'relative',zIndex:2}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>BOB'S SURVIVOR '26</div>
        <div style={{display:'flex',justifyContent:'space-between',marginTop:6}}>
          <div>
            <div className="tg-display" style={{fontSize:9,opacity:.6}}>BUY-IN</div>
            <div className="tg-display" style={{fontSize:18}}>$50</div>
          </div>
          <div>
            <div className="tg-display" style={{fontSize:9,opacity:.6}}>PICK DUE</div>
            <div className="tg-display" style={{fontSize:18}}>SUN 12:55P</div>
          </div>
          <div>
            <div className="tg-display" style={{fontSize:9,opacity:.6}}>CREW</div>
            <div className="tg-display" style={{fontSize:18}}>41</div>
          </div>
        </div>
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'14px 0 18px',zIndex:2,position:'relative'}}>
        <button className="tg-btn" style={{background:TG.ink,color:TG.cream,boxShadow:`4px 4px 0 ${TG.brick}`}}>MAKE MY WEEK 1 PICK →</button>
        <div style={{textAlign:'center',marginTop:8}} className="tg-display">
          <span style={{fontSize:10,color:TG.ink2}}>INVITE MORE · GO HOME</span>
        </div>
      </div>
    </div>
  </div>
);

// C5b · Alt: lobby landing
LoopC.C5b = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'14px 16px 0'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <Shield size={22}/>
          <div className="tg-display" style={{fontSize:12}}>BOB'S SURVIVOR '26</div>
        </div>
        <div className="tg-stamp" style={{background:TG.field,color:TG.cream,fontSize:9}}>✓ YOU'RE IN</div>
      </div>
    </div>

    <div style={{padding:'18px 16px 0',flex:1,overflow:'auto'}}>
      <div className="tg-chip-orange">LOBBY · 41 OF 64</div>
      <div className="tg-display" style={{fontSize:40,lineHeight:.9,marginTop:12}}>WELCOME<br/>TO THE <span className="tg-hl">CLUBHOUSE.</span></div>
      <div style={{fontSize:13,color:TG.ink2,marginTop:8,fontWeight:500,maxWidth:300}}>Sit tight — we'll DM you when it's time to pick. Kickoff in 2d 14h.</div>

      {/* Countdown */}
      <div className="tg-card" style={{marginTop:22,padding:0,overflow:'hidden'}}>
        <div style={{background:TG.ink,color:TG.cream,padding:'10px 14px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:`2px solid ${TG.ink}`}}>
          <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>PICKS OPEN IN</div>
          <div className="tg-display" style={{fontSize:10,opacity:.6}}>WEEK 1</div>
        </div>
        <div style={{display:'flex',padding:'14px 12px',gap:10,justifyContent:'center'}}>
          {[{n:'02',l:'DAYS'},{n:'14',l:'HRS'},{n:'37',l:'MIN'}].map(t=>(
            <div key={t.l} style={{flex:1,textAlign:'center',background:TG.chalk,padding:'10px 6px',border:`2px solid ${TG.ink}`}}>
              <div className="tg-display" style={{fontSize:36,lineHeight:.9,letterSpacing:'-.04em'}}>{t.n}</div>
              <div className="tg-display" style={{fontSize:9,color:TG.ink2,marginTop:2}}>{t.l}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{marginTop:20}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:8}}>— RECENT ACTIVITY</div>
        <div className="tg-card">
          {[
            {t:'you joined',d:'just now',c:TG.orange},
            {t:'sandra joined',d:'8m ago'},
            {t:'dan_12 joined',d:'22m ago'},
            {t:'bob posted a rule clarif.',d:'1h ago',c:TG.field},
          ].map((r,i)=>(
            <div key={i} className="tg-field" style={{gap:10}}>
              <div style={{width:8,height:8,background:r.c||TG.ink2,borderRadius:'50%'}}/>
              <div style={{flex:1,fontSize:13,fontWeight:700}}>{r.t}</div>
              <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>{r.d}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{height:16}}/>
    </div>

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

// C6 · Already-in / link shared with current user
LoopC.C6 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'14px 16px 0'}}>
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <Shield size={22}/>
        <div className="tg-display" style={{fontSize:12}}>WELIKESPORTS</div>
      </div>
    </div>
    <div style={{padding:'30px 20px 0',flex:1,textAlign:'center',display:'flex',flexDirection:'column'}}>
      <div style={{fontSize:64,lineHeight:1}}>👀</div>
      <div className="tg-display" style={{fontSize:36,lineHeight:.9,marginTop:14}}>YOU'RE ALREADY<br/>IN <span style={{color:TG.orange}}>THIS ONE.</span></div>
      <div style={{fontSize:13,color:TG.ink2,marginTop:10,fontWeight:500,maxWidth:300,marginLeft:'auto',marginRight:'auto'}}>Looks like you joined Bob's Survivor '26 last Tuesday. You don't need to pay twice.</div>

      <div className="tg-card" style={{marginTop:28,padding:0,textAlign:'left'}}>
        <div className="tg-field"><span className="lbl">YOUR SEAT</span><span className="val">#42</span></div>
        <div className="tg-field"><span className="lbl">STATUS</span><span className="val" style={{color:TG.field}}>ALIVE</span></div>
        <div className="tg-field"><span className="lbl">WEEK 1 PICK</span><span className="val" style={{color:TG.orange}}>DUE SUN 12:55P</span></div>
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'18px 0'}}>
        <button className="tg-btn orange">GO TO LEAGUE →</button>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginTop:10,letterSpacing:'.1em'}}>NOT YOU? SIGN OUT</div>
      </div>
    </div>
  </div>
);

window.LoopC = LoopC;