// loop-a.jsx — Auth & Funding screens A1-A8

const LoopA = {};

// A1 · Landing / entry
LoopA.A1 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'12px 20px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <div style={{display:'flex',alignItems:'center',gap:8}}><Shield size={26}/><div className="tg-display" style={{fontSize:13}}>WELIKESPORTS</div></div>
      <div className="tg-display" style={{fontSize:9,color:TG.ink2,letterSpacing:'.14em'}}>EST. '26 · SEC. 108</div>
    </div>
    <div style={{padding:'28px 20px 20px',flex:1,position:'relative',display:'flex',flexDirection:'column'}}>
      <div className="tg-chip-orange">WEEK 1 · KICKOFF SUNDAY</div>
      <div className="tg-display" style={{fontSize:62,lineHeight:.84,marginTop:16}}>
        THE<br/>GROUP<br/>CHAT <span style={{color:TG.orange}}>IS</span><br/><span className="tg-hl">THE BOOK.</span>
      </div>
      <div style={{fontSize:14,lineHeight:1.45,marginTop:18,fontWeight:500,color:TG.ink2,maxWidth:320}}>
        Pools with your people. No house, no bookie. Just the box score and bragging rights.
      </div>
      <div className="tg-card" style={{marginTop:22,display:'flex'}}>
        <div style={{padding:'12px 14px',flex:1,borderRight:`2px dashed ${TG.ink}`}}>
          <div className="tg-display" style={{fontSize:9,color:TG.ink2}}>POOLS LIVE</div>
          <div className="tg-display" style={{fontSize:26,lineHeight:1,marginTop:2}}>1,284</div>
        </div>
        <div style={{padding:'12px 14px',flex:1}}>
          <div className="tg-display" style={{fontSize:9,color:TG.ink2}}>ON THE LINE</div>
          <div className="tg-display" style={{fontSize:26,lineHeight:1,marginTop:2,color:TG.orange}}>$2.4M</div>
        </div>
      </div>
      <div style={{position:'absolute',right:-8,top:180,transform:'rotate(16deg)'}}>
        <StarBurst size={86}>
          <div className="tg-display" style={{fontSize:9,transform:'rotate(-8deg)'}}>NO</div>
          <div className="tg-display" style={{fontSize:15,lineHeight:.9,transform:'rotate(-8deg)'}}>HOUSE</div>
          <div className="tg-display" style={{fontSize:9,transform:'rotate(-8deg)'}}>CUT</div>
        </StarBurst>
      </div>
      <div style={{flex:1}}/>
      <button className="tg-btn orange">LET'S GO — SIGN IN →</button>
      <div className="tg-display" style={{fontSize:9,color:TG.ink2,textAlign:'center',marginTop:10,letterSpacing:'.14em'}}>✦ GOOGLE ✦ APPLE ✦ SECURED BY PRIVY ✦</div>
    </div>
  </div>
);

// A2 · Privy auth modal
LoopA.A2 = () => (
  <div className="tg-root" style={{background:TG.ink}}>
    <div style={{position:'absolute',inset:0,background:'rgba(26,21,16,.7)',backdropFilter:'blur(2px)'}}/>
    <StatusBar dark/>
    {/* Behind: faded landing hint */}
    <div style={{padding:'30px 24px',opacity:.18,color:TG.cream}}>
      <div className="tg-display" style={{fontSize:44,lineHeight:.85}}>THE GROUP CHAT IS<br/>THE BOOK.</div>
    </div>
    {/* Modal */}
    <div style={{position:'absolute',left:16,right:16,bottom:24,background:TG.chalk,border:`2px solid ${TG.ink}`,boxShadow:`6px 6px 0 ${TG.orange}`,padding:'22px 20px 20px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div className="tg-chip-orange">SECURED BY PRIVY</div>
        <div style={{fontSize:18,color:TG.ink2}}>×</div>
      </div>
      <div className="tg-display" style={{fontSize:30,lineHeight:.9,marginTop:14}}>CHECK IN<br/>AT THE GATE.</div>
      <div style={{fontSize:13,color:TG.ink2,marginTop:8,fontWeight:500}}>We make a wallet for you — no seed phrase, no extension.</div>

      <div style={{marginTop:18,display:'flex',flexDirection:'column',gap:8}}>
        <div style={{border:`2px solid ${TG.ink}`,padding:'14px 16px',display:'flex',alignItems:'center',gap:12,background:TG.chalk,boxShadow:`3px 3px 0 ${TG.ink}`,fontWeight:700}}>
          <div style={{width:22,height:22,borderRadius:'50%',background:'conic-gradient(from 0deg, #4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75%)'}}/>
          Continue with Google
        </div>
        <div style={{border:`2px solid ${TG.ink}`,padding:'14px 16px',display:'flex',alignItems:'center',gap:12,background:TG.chalk,fontWeight:700}}>
          <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>
          Continue with Apple
        </div>
        <div style={{border:`2px dashed ${TG.ink}`,padding:'12px 16px',display:'flex',alignItems:'center',gap:12,fontWeight:600,color:TG.ink2,fontSize:13}}>
          <div style={{width:18,height:18,border:`2px solid ${TG.ink2}`,borderRadius:'50%'}}/>
          Email or wallet
        </div>
      </div>
      <div style={{fontSize:11,color:TG.ink2,marginTop:14,textAlign:'center',fontWeight:500}}>By continuing you agree to the <b>ToS</b> and <b>Privacy</b>.</div>
    </div>
  </div>
);

// A3 · Post-login router
LoopA.A3 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'60px 20px',flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',textAlign:'center'}}>
      <div style={{position:'relative',width:120,height:120}}>
        <div style={{position:'absolute',inset:0,border:`6px solid ${TG.ink}`,borderTopColor:TG.orange,borderRadius:'50%',animation:'tg-spin 1.2s linear infinite'}}/>
        <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}><Shield size={56}/></div>
      </div>
      <div className="tg-display" style={{fontSize:38,marginTop:28,lineHeight:.9}}>SHOWING YOU<br/>TO YOUR <span style={{color:TG.orange}}>SEAT.</span></div>
      <div className="tg-hand" style={{fontSize:20,marginTop:14,color:TG.ink2}}>checking your ticket…</div>

      <div style={{marginTop:34,width:'100%',maxWidth:300}}>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0',borderBottom:`2px dashed ${TG.ink}`}}>
          <div style={{width:20,height:20,background:TG.field,border:`2px solid ${TG.ink}`,display:'flex',alignItems:'center',justifyContent:'center',color:TG.cream,fontSize:12}}>✓</div>
          <div style={{fontWeight:600,fontSize:13,textAlign:'left',flex:1}}>Wallet created</div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0',borderBottom:`2px dashed ${TG.ink}`}}>
          <div style={{width:20,height:20,background:TG.orange,border:`2px solid ${TG.ink}`,borderRadius:'50%',animation:'tg-pulse 1s infinite'}}/>
          <div style={{fontWeight:600,fontSize:13,textAlign:'left',flex:1}}>Checking balance…</div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0'}}>
          <div style={{width:20,height:20,border:`2px dashed ${TG.ink2}`,borderRadius:'50%'}}/>
          <div style={{fontWeight:600,fontSize:13,textAlign:'left',flex:1,color:TG.ink2}}>Routing you…</div>
        </div>
      </div>
    </div>
  </div>
);

// A4 · Deposit prompt
LoopA.A4 = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'20px 20px 0',flex:1,display:'flex',flexDirection:'column'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <button style={{border:0,background:'transparent'}} className="tg-display"><span style={{fontSize:12}}>← BACK</span></button>
        <div className="tg-pill">STEP 1 OF 3</div>
      </div>
      <div className="tg-display" style={{fontSize:46,lineHeight:.88,marginTop:22}}>LOAD UP<br/>THE <span style={{color:TG.orange}}>COOLER.</span></div>
      <div style={{fontSize:14,marginTop:10,color:TG.ink2,fontWeight:500,maxWidth:300}}>
        Drop funds once. Pools pull from here. Winnings land back. No card, no fuss.
      </div>

      <div className="tg-card" style={{marginTop:24,padding:16}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:6}}>RECOMMENDED FOR YOUR INVITE</div>
        <div style={{display:'flex',alignItems:'baseline',gap:4}}>
          <div className="tg-display" style={{fontSize:36,color:TG.ink2}}>$</div>
          <div className="tg-display" style={{fontSize:64,letterSpacing:'-.04em',lineHeight:.9}}>50</div>
          <div style={{flex:1}}/>
          <div className="tg-display" style={{fontSize:11,color:TG.ink2}}>USDC</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:6,marginTop:12}}>
          {['$25','$50','$100','$250'].map((v,i)=>(
            <div key={v} style={{padding:'8px 0',textAlign:'center',border:`2px solid ${TG.ink}`,background:v==='$50'?TG.orange:TG.cream,color:v==='$50'?TG.cream:TG.ink,fontFamily:'Archivo Black',fontSize:12,transform:`rotate(${i%2?-1:1}deg)`}}>{v}</div>
          ))}
        </div>
      </div>

      <div style={{marginTop:20}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,marginBottom:8}}>— PICK YOUR LANE</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}}>COINBASE ONRAMP · INSTANT</div>
              </div>
            </div>
            <div style={{width:20,height:20,border:`2.5px solid ${TG.ink}`,borderRadius:'50%',background:TG.orange,position:'relative'}}>
              <div style={{position:'absolute',inset:3,background:TG.cream,borderRadius:'50%'}}/>
              <div style={{position:'absolute',inset:6,background:TG.orange,borderRadius:'50%'}}/>
            </div>
          </div>
          <div className="tg-field" style={{alignItems:'center'}}>
            <div>
              <div style={{fontWeight:800,fontSize:14}}>Transfer USDC</div>
              <div className="tg-display" style={{fontSize:9,color:TG.ink2}}>BASE · ≈ 30 SEC</div>
            </div>
            <div style={{width:20,height:20,border:`2.5px solid ${TG.ink}`,borderRadius:'50%'}}/>
          </div>
          <div className="tg-field" style={{alignItems:'center'}}>
            <div>
              <div style={{fontWeight:800,fontSize:14}}>Debit card</div>
              <div className="tg-display" style={{fontSize:9,color:TG.ink2}}>VIA COINBASE · 3% FEE</div>
            </div>
            <div style={{width:20,height:20,border:`2.5px solid ${TG.ink}`,borderRadius:'50%'}}/>
          </div>
        </div>
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'12px 0 16px'}}>
        <button className="tg-btn orange">CONTINUE · $50 →</button>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2,textAlign:'center',marginTop:8}}>SKIP FOR NOW</div>
      </div>
    </div>
  </div>
);

// A5 · Coinbase onramp
LoopA.A5 = () => (
  <div className="tg-root">
    <StatusBar/>
    <div style={{padding:'12px 20px 0',display:'flex',alignItems:'center',gap:10}}>
      <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={{background:TG.ink,color:TG.cream,borderColor:TG.ink}}>COINBASE</div>
    </div>
    <div style={{padding:'18px 20px 0',flex:1,overflow:'auto'}}>
      <div style={{textAlign:'center'}}>
        <div style={{width:56,height:56,borderRadius:12,background:'#0052FF',margin:'0 auto',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontFamily:'Archivo Black',fontSize:26,border:`2px solid ${TG.ink}`}}>◆</div>
        <div className="tg-display" style={{fontSize:26,marginTop:12,lineHeight:.95}}>CONFIRM YOUR<br/><span style={{color:TG.orange}}>$50 BUY.</span></div>
      </div>

      <div className="tg-card" style={{marginTop:22}}>
        <div className="tg-field"><span className="lbl">PAYING WITH</span><span className="val">APPLE PAY</span></div>
        <div className="tg-field"><span className="lbl">YOU PAY</span><span className="val">$51.52 USD</span></div>
        <div className="tg-field"><span className="lbl">FEES</span><span className="val" style={{color:TG.ink2}}>$1.50</span></div>
        <div className="tg-field"><span className="lbl">NETWORK</span><span className="val">BASE</span></div>
        <div className="tg-field" style={{background:TG.mustard}}><span className="lbl">YOU GET</span><span className="val" style={{fontSize:20}}>50.00 USDC</span></div>
      </div>

      <div style={{marginTop:14,padding:'12px 14px',background:TG.chalk,border:`2px dashed ${TG.ink}`}}>
        <div className="tg-display" style={{fontSize:10,color:TG.ink2}}>HOW IT WORKS</div>
        <div style={{fontSize:12,marginTop:4,color:TG.ink2,lineHeight:1.5}}>Coinbase takes your $ → sends 50 USDC to your WLS wallet. You don't need a Coinbase account.</div>
      </div>
    </div>
    <div style={{padding:'12px 20px 16px'}}>
      <button className="tg-btn orange" style={{background:'#0052FF',boxShadow:`4px 4px 0 ${TG.ink}`}}> BUY WITH APPLE PAY</button>
    </div>
  </div>
);

// A6 · Recognizing deposit
LoopA.A6 = () => (
  <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:'60px 20px',flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',textAlign:'center',color:TG.cream,position:'relative'}}>
      <div style={{position:'relative',width:160,height:160}}>
        <div style={{position:'absolute',inset:0,border:`8px solid ${TG.cream}`,borderTopColor:TG.mustard,borderRadius:'50%',animation:'tg-spin 1s linear infinite'}}/>
        <div style={{position:'absolute',inset:20,border:`4px dashed ${TG.mustard}`,borderRadius:'50%',animation:'tg-spin 3s linear infinite reverse'}}/>
        <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}} className="tg-display">
          <div style={{fontSize:42,color:TG.mustard}}>$</div>
        </div>
      </div>
      <div className="tg-display" style={{fontSize:40,marginTop:30,lineHeight:.9}}>CHECKING<br/>THE GATE…</div>
      <div className="tg-hand" style={{fontSize:22,marginTop:14,color:TG.mustard}}>your USDC is on its way</div>
      <div className="tg-display" style={{fontSize:11,marginTop:22,letterSpacing:'.16em',opacity:.7}}>· BASE · BLOCK 18,421,903 · ~18 SEC ·</div>

      {/* Tx hash pill */}
      <div style={{marginTop:14,padding:'7px 12px',border:`2px solid ${TG.cream}`,fontFamily:'monospace',fontSize:10,opacity:.75}}>0x8f2…c4a1</div>
    </div>
  </div>
);

// A7 · Deposit success
LoopA.A7 = () => (
  <div className="tg-root" style={{background:TG.mustard}}>
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'30px 20px 0',flex:1,display:'flex',flexDirection:'column',position:'relative'}}>
      {/* Stickers */}
      <div style={{position:'absolute',top:56,left:-14,transform:'rotate(-18deg)',zIndex:2}}>
        <StarBurst size={110} fill={TG.orange}>
          <div className="tg-display" style={{fontSize:11,color:TG.cream,transform:'rotate(12deg)'}}>YOU'RE</div>
          <div className="tg-display" style={{fontSize:22,color:TG.cream,lineHeight:.9,transform:'rotate(12deg)'}}>LOADED!</div>
        </StarBurst>
      </div>
      <div style={{position:'absolute',top:44,right:-10,transform:'rotate(14deg)',zIndex:2}}>
        <StickyNote rotate={6} color={TG.chalk}>you did it ✌︎</StickyNote>
      </div>

      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',paddingTop:120}}>
        <div className="tg-display" style={{fontSize:13,color:TG.ink2}}>— BALANCE</div>
        <div className="tg-display" style={{fontSize:100,lineHeight:.85,letterSpacing:'-.05em',marginTop:8,textAlign:'center'}}>
          $50<span style={{fontSize:40,color:TG.ink2}}>.00</span>
        </div>
        <div style={{marginTop:14}} className="tg-stamp">✓ DEPOSIT CONFIRMED</div>
        <div className="tg-hand" style={{fontSize:22,marginTop:16,color:TG.brick,transform:'rotate(-2deg)'}}>let's get you in a pool →</div>
      </div>

      <div style={{padding:'0 0 20px',display:'flex',gap:10}}>
        <button className="tg-btn ghost sm" style={{flex:1}}>ADD MORE</button>
        <button className="tg-btn sm" style={{flex:2,background:TG.ink,color:TG.cream,boxShadow:`4px 4px 0 ${TG.brick}`}}>FIND A POOL →</button>
      </div>
    </div>
  </div>
);

// A7 alternate · ticket print version
LoopA.A7b = () => (
  <div className="tg-root">
    <div className="tg-grain"/>
    <StatusBar/>
    <div style={{padding:'30px 18px 0',flex:1,display:'flex',flexDirection:'column'}}>
      <div style={{background:TG.ink,color:TG.cream,padding:'24px 20px 28px',position:'relative',border:`2px solid ${TG.ink}`,boxShadow:`5px 5px 0 ${TG.orange}`}}>
        <div className="tg-display" style={{fontSize:10,color:TG.mustard}}>— RECEIPT · WLS #0841</div>
        <div className="tg-display" style={{fontSize:36,lineHeight:.88,marginTop:10}}>YOU'RE<br/><span style={{color:TG.mustard}}>FUNDED.</span></div>
        <div style={{marginTop:16,fontFamily:'monospace',fontSize:11,opacity:.7,lineHeight:1.6}}>
          + 50.00 USDC<br/>
          NET  50.00 USDC<br/>
          TX   0x8f2…c4a1<br/>
          NET  BASE · BLOCK 18,421,903
        </div>
        <TicketEdge dark count={18}/>
      </div>

      <div style={{marginTop:24,textAlign:'center'}}>
        <div className="tg-display" style={{fontSize:11,color:TG.ink2}}>WHAT'S NEXT</div>
        <div className="tg-display" style={{fontSize:28,marginTop:6,lineHeight:1}}>FIND YOUR CREW.</div>
      </div>

      <div style={{marginTop:20,display:'flex',flexDirection:'column',gap:10}}>
        <div className="tg-card" style={{padding:14,display:'flex',alignItems:'center',gap:12}}>
          <div style={{fontSize:24}}>🎟️</div>
          <div style={{flex:1}}>
            <div style={{fontWeight:800,fontSize:14}}>Open an invite</div>
            <div style={{fontSize:11,color:TG.ink2}}>1 link waiting · Bob's Survivor</div>
          </div>
          <div className="tg-display" style={{fontSize:11}}>→</div>
        </div>
        <div className="tg-card" style={{padding:14,display:'flex',alignItems:'center',gap:12}}>
          <div style={{fontSize:24}}>🏟️</div>
          <div style={{flex:1}}>
            <div style={{fontWeight:800,fontSize:14}}>Browse public pools</div>
            <div style={{fontSize:11,color:TG.ink2}}>182 open · from $5</div>
          </div>
          <div className="tg-display" style={{fontSize:11}}>→</div>
        </div>
        <div className="tg-card" style={{padding:14,display:'flex',alignItems:'center',gap:12}}>
          <div style={{fontSize:24}}>👑</div>
          <div style={{flex:1}}>
            <div style={{fontWeight:800,fontSize:14}}>Run your own league</div>
            <div style={{fontSize:11,color:TG.ink2}}>Commissioner mode</div>
          </div>
          <div className="tg-display" style={{fontSize:11}}>→</div>
        </div>
      </div>
      <div style={{flex:1}}/>
    </div>
  </div>
);

// A8 · Deposit error / retry
LoopA.A8 = () => (
  <div className="tg-root" style={{background:TG.brick}}>
    <div className="tg-grain"/>
    <StatusBar dark/>
    <div style={{padding:'30px 20px 0',flex:1,display:'flex',flexDirection:'column',color:TG.cream}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <button style={{border:0,background:'transparent',color:TG.cream}} className="tg-display"><span style={{fontSize:12}}>← BACK</span></button>
        <div className="tg-stamp" style={{background:TG.cream,color:TG.brick}}>ERROR</div>
      </div>

      <div style={{marginTop:40,textAlign:'center'}}>
        <div style={{fontSize:72,transform:'rotate(-8deg)',display:'inline-block'}}>🚩</div>
        <div className="tg-display" style={{fontSize:42,lineHeight:.88,marginTop:14}}>FLAG ON<br/>THE PLAY.</div>
        <div className="tg-hand" style={{fontSize:22,marginTop:14,color:TG.mustard}}>deposit didn't go through</div>
      </div>

      <div className="tg-card" style={{marginTop:28,color:TG.ink}}>
        <div className="tg-field"><span className="lbl">WHAT HAPPENED</span><span className="val" style={{fontSize:13}}>APPLE PAY DECLINED</span></div>
        <div className="tg-field"><span className="lbl">CODE</span><span className="val" style={{fontFamily:'monospace',fontSize:12}}>ONRAMP_3041</span></div>
        <div className="tg-field"><span className="lbl">YOUR MONEY</span><span className="val" style={{color:TG.field}}>NOT CHARGED</span></div>
      </div>

      <div style={{marginTop:18,padding:'12px 14px',background:'rgba(245,236,215,.12)',border:`1px dashed ${TG.cream}`,fontSize:12,lineHeight:1.5}}>
        Most often this is the card issuer blocking crypto. Try a different card, or switch to USDC transfer.
      </div>

      <div style={{flex:1}}/>
      <div style={{padding:'0 0 20px',display:'flex',flexDirection:'column',gap:10}}>
        <button className="tg-btn orange">TRY AGAIN</button>
        <button className="tg-btn ghost" style={{color:TG.cream,borderColor:TG.cream}}>USE A DIFFERENT METHOD</button>
      </div>
    </div>
  </div>
);

window.LoopA = LoopA;