// ── SCREEN 1A: THE PORTAL ───────────────────────────────────────────────
// 3D animation lobby — clickable hotspot zones → video modal
const { useState } = React;

const CUST = 'customer-0kzhqxao6r9z4p8f.cloudflarestream.com';
const ZONES = [
  { id:'poker',  title:'POKER ROOM',     sub:'Texas Hold\'em · High Stakes',   icon:'♠',
    x:'18%', y:'52%', vid:'74da4e55fa5dcad031f54b62f67fff4d' },
  { id:'shows',  title:'LIVE SHOWS',     sub:'Performances · Live Tipping',    icon:'🎭',
    x:'50%', y:'38%', vid:'43793d45a8cea1d64cf3d9baaa5de64a' },
  { id:'wheel',  title:'FORTUNE WHEEL',  sub:'Spin · Win Tokens',              icon:'◎',
    x:'82%', y:'52%', vid:'52cc0347a1f9097f208195c1030ebef8' },
];

function PortalLobby() {
  const [modal, setModal] = useState(null);
  return (
    <div style={{height:'100%', background:SC.ink, position:'relative', overflow:'hidden', display:'flex', flexDirection:'column'}}>
      {/* Background image */}
      <img src="uploads/BG-01.png" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:0.85,zIndex:0}}/>
      <div style={{position:'absolute',inset:0,zIndex:1,
        background:'linear-gradient(to top,rgba(6,4,2,0.88) 0%,rgba(6,4,2,0.22) 45%,rgba(6,4,2,0.55) 100%)'}}/>

      {/* Top nav */}
      <div style={{position:'relative',zIndex:10,height:56,display:'flex',alignItems:'center',
        padding:'0 30px', background:'linear-gradient(to bottom,rgba(6,4,2,0.82),transparent)'}}>
        <img src="uploads/UI-01.png" style={{width:30,height:30,objectFit:'contain',opacity:0.9,marginRight:12}}/>
        <span style={{...CIN(16,700), color:SC.goldHi, letterSpacing:'0.22em'}}>SIN CITY ADVENTURE</span>
        <div style={{flex:1}}/>
        <div style={{display:'flex', gap:10}}>
          <ScBtn small>LOG IN</ScBtn>
          <ScBtn primary small>JOIN FREE</ScBtn>
        </div>
      </div>

      {/* Center label */}
      <div style={{position:'absolute',top:'62%',left:'50%',transform:'translateX(-50%)',
        textAlign:'center',zIndex:5,pointerEvents:'none'}}>
        <span style={{...CIN(11,400), color:'rgba(234,217,168,0.45)', letterSpacing:'0.3em', display:'block', marginBottom:8}}>
          CHOOSE YOUR ADVENTURE
        </span>
        <OrnDiv style={{width:280, margin:'0 auto'}}/>
      </div>

      {/* Clickable hotspots */}
      {ZONES.map(z=>(
        <div key={z.id} onClick={()=>setModal(z)} style={{
          position:'absolute', left:z.x, top:z.y,
          transform:'translate(-50%,-50%)', zIndex:10, cursor:'pointer',
          display:'flex', flexDirection:'column', alignItems:'center', gap:10,
        }}>
          <div style={{
            width:82, height:82, borderRadius:'50%',
            background:'rgba(196,144,58,0.09)',
            border:`1.5px solid rgba(196,144,58,0.72)`,
            boxShadow:'0 0 28px rgba(196,144,58,0.42),0 0 64px rgba(196,144,58,0.16)',
            display:'flex',alignItems:'center',justifyContent:'center',
            backdropFilter:'blur(4px)',
          }}>
            <span style={{fontSize:28}}>{z.icon}</span>
          </div>
          <div style={{textAlign:'center'}}>
            <span style={{...CIN(12,700), color:SC.goldHi, display:'block',
              textShadow:'0 0 20px rgba(232,187,96,0.9)'}}>{z.title}</span>
            <span style={{...COR(12), color:SC.parch2, display:'block', marginTop:2}}>{z.sub}</span>
            <span style={{...CIN(8,400), color:'rgba(234,217,168,0.32)', display:'block',
              marginTop:4, letterSpacing:'0.24em'}}>CLICK TO ENTER →</span>
          </div>
        </div>
      ))}

      {/* Bottom status strip */}
      <div style={{position:'absolute',bottom:0,left:0,right:0,zIndex:10,
        background:'linear-gradient(to top,rgba(6,4,2,0.86),transparent)',
        padding:'24px 36px 14px', display:'flex', justifyContent:'center', gap:44}}>
        {[['🟢','12 rooms live'],['👁','8,934 viewers'],['⭐','1,247 members online']].map(([i,t])=>(
          <span key={t} style={{...COR(13), color:SC.parch2}}>{i} {t}</span>
        ))}
      </div>

      {/* Video modal */}
      {modal && (
        <div style={{position:'absolute',inset:0,zIndex:100,
          background:'rgba(6,4,2,0.94)', backdropFilter:'blur(10px)',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
          <div style={{position:'absolute',top:20,right:26,cursor:'pointer',
            ...CIN(11), color:SC.parch2}} onClick={()=>setModal(null)}>
            ✕ CLOSE
          </div>
          <div style={{textAlign:'center', marginBottom:20}}>
            <span style={{...CIN(20,700), color:SC.goldHi, letterSpacing:'0.2em', display:'block'}}>{modal.title}</span>
            <span style={{...COR(14), color:SC.parch2, display:'block', marginTop:4}}>{modal.sub}</span>
            <OrnDiv style={{width:300, margin:'10px auto 0'}}/>
          </div>
          <div style={{width:900, maxWidth:'90%', aspectRatio:'16/9', position:'relative',
            border:`1px solid rgba(196,144,58,0.36)`,
            boxShadow:'0 0 60px rgba(196,144,58,0.16)'}}>
            <iframe
              src={`https://${CUST}/${modal.vid}/iframe?autoplay=true&muted=true`}
              allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
              allowFullScreen style={{position:'absolute',top:0,left:0,width:'100%',height:'100%',border:'none'}}/>
          </div>
          <div style={{marginTop:26, display:'flex', gap:14}}>
            <ScBtn primary>ENTER {modal.title}</ScBtn>
            <ScBtn onClick={()=>setModal(null)}>← BACK TO LOBBY</ScBtn>
          </div>
        </div>
      )}
    </div>
  );
}

// ── SCREEN 1B: GRAND ENTRANCE ──────────────────────────────────────────
const CATS = [
  {l:'All Shows',   i:'✦',  active:true},
  {l:'Live Now',    i:'●',  live:true},
  {l:'VIP Rooms',   i:'♛',  gold:true},
  {l:'Token Games', i:'◈'},
  {l:'Private',     i:'🔒'},
  {l:'New Faces',   i:'✨'},
];

function GrandEntrance() {
  return (
    <div style={{height:'100%', background:SC.ink, display:'flex', flexDirection:'column'}}>
      <ScNav right={<>
        <span style={{...CIN(11,400), color:SC.parch2, marginRight:4}}>🔍</span>
        {['All Shows','VIP Rooms','Events','Games'].map(n=>(
          <span key={n} style={{...CIN(10,400), color:SC.parch2, cursor:'pointer'}}>{n}</span>
        ))}
        <TokenBadge amount="500"/>
        <div style={{width:30,height:30,borderRadius:'50%',background:SC.stone2,border:`1px solid ${SC.border}`}}/>
      </>}/>
      <OrnDiv/>

      <div style={{flex:1, display:'flex', overflow:'hidden'}}>
        {/* Sidebar */}
        <div style={{width:150, background:SC.stone, borderRight:`1px solid ${SC.border}`,
          padding:'14px 0', flexShrink:0}}>
          <div style={{...CIN(8,600), color:'rgba(234,217,168,0.28)', letterSpacing:'0.22em',
            padding:'0 14px', marginBottom:7}}>BROWSE</div>
          {CATS.map((c,i)=>(
            <div key={i} style={{
              padding:'8px 14px', cursor:'pointer', display:'flex', alignItems:'center', gap:8,
              background: c.active?'rgba(196,144,58,0.13)':c.live?'rgba(184,48,32,0.07)':'transparent',
              borderLeft:`2px solid ${c.active?SC.gold:c.live?SC.ember:'transparent'}`,
            }}>
              <span style={{fontSize:11}}>{c.i}</span>
              <span style={{...CIN(10, c.active||c.live?700:400),
                color: c.active?SC.goldHi:c.live?'#e86050':SC.parch2}}>{c.l}</span>
            </div>
          ))}
          <div style={{margin:'14px 0 10px', height:1, background:SC.border}}/>
          <div style={{...CIN(8,600), color:'rgba(234,217,168,0.28)', letterSpacing:'0.22em',
            padding:'0 14px', marginBottom:6}}>FRIENDS ONLINE</div>
          {['RedKnight','JamieFan','Amber'].map(u=>(
            <div key={u} style={{padding:'4px 14px', display:'flex', alignItems:'center', gap:6}}>
              <div style={{width:15,height:15,borderRadius:'50%',background:SC.stone2,border:`1px solid ${SC.border}`}}/>
              <span style={{...COR(12), color:SC.parch2}}>{u}</span>
              <div style={{width:6,height:6,borderRadius:'50%',background:'#3a8a40',marginLeft:'auto'}}/>
            </div>
          ))}
        </div>

        {/* Main content */}
        <div style={{flex:1, overflow:'auto', padding:16, display:'flex', flexDirection:'column', gap:14}}>
          {/* Hero row */}
          <div style={{display:'flex', gap:13, height:310}}>
            {/* Hero card */}
            <div style={{flex:2, borderRadius:2, overflow:'hidden', position:'relative',
              border:`1px solid rgba(196,144,58,0.38)`,
              boxShadow:'0 8px 48px rgba(0,0,0,0.7),0 0 22px rgba(196,144,58,0.09)'}}>
              <img src="uploads/BG-01.png" style={{width:'100%',height:'100%',objectFit:'cover',opacity:0.72}}/>
              <div style={{position:'absolute',inset:0,
                background:'linear-gradient(to top,rgba(6,4,2,0.96) 0%,rgba(6,4,2,0.1) 60%)'}}/>
              {/* Camera tabs */}
              <div style={{position:'absolute',top:12,right:12,display:'flex',flexDirection:'column',gap:4}}>
                {['Stage','Lounge','Kitchen'].map((c,i)=>(
                  <div key={c} style={{padding:'3px 10px', background:'rgba(6,4,2,0.75)',
                    border:`1px solid rgba(196,144,58,${i===0?0.82:0.22})`}}>
                    <span style={{...CIN(8,i===0?700:400), color:i===0?SC.goldHi:SC.parch2}}>{c}</span>
                  </div>
                ))}
              </div>
              <div style={{position:'absolute',bottom:0,left:0,right:0,padding:'0 20px 20px'}}>
                <div style={{display:'flex',gap:8,marginBottom:8}}>
                  <ScChip live>LIVE · 3,241</ScChip>
                  <ScChip gold>★ TOP ROOM</ScChip>
                </div>
                <div style={{...CIN(22,700), color:SC.parch, marginBottom:5}}>Athena · Main Stage</div>
                <ScProgress pct={72} style={{width:230, marginBottom:5}}/>
                <div style={{...COR(12), color:SC.parch2, marginBottom:14}}>
                  Show Goal: 72% · 2,160 / 3,000 tokens · Unlock: Backstage Camera
                </div>
                <div style={{display:'flex',gap:10}}>
                  <ScBtn primary small>ENTER ROOM</ScBtn>
                  <ScBtn small>PREVIEW</ScBtn>
                  <ScBtn small>🔔 FOLLOW</ScBtn>
                </div>
              </div>
            </div>
            {/* Side cards */}
            <div style={{flex:1, display:'flex', flexDirection:'column', gap:10}}>
              {[{n:'Selene · Lounge',v:892},{n:'Diana · Kitchen',v:441}].map(r=>(
                <div key={r.n} style={{flex:1, border:`1px solid ${SC.border}`,
                  background:SC.stone, borderRadius:2, overflow:'hidden', display:'flex', flexDirection:'column'}}>
                  <div style={{flex:1, background:HATCH, display:'flex', alignItems:'center', justifyContent:'center',
                    position:'relative'}}>
                    <img src="uploads/BG-03.png" style={{position:'absolute',inset:0,width:'100%',height:'100%',
                      objectFit:'cover',opacity:0.35}}/>
                    <span style={{...COR(10), color:'rgba(234,217,168,0.15)', position:'relative'}}>room preview</span>
                  </div>
                  <div style={{padding:'7px 10px', flexShrink:0}}>
                    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:4}}>
                      <span style={{...CIN(10,600), color:SC.parch}}>{r.n}</span>
                      <ScChip live style={{fontSize:8}}>{r.v}</ScChip>
                    </div>
                    <ScProgress pct={55} style={{marginBottom:5}}/>
                    <ScBtn primary small style={{width:'100%',fontSize:9}}>JOIN</ScBtn>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Live grid */}
          <div>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
              <span style={{...CIN(10,600), color:SC.parch2}}>● LIVE NOW</span>
              <span style={{...CIN(9,400), color:'rgba(234,217,168,0.28)', cursor:'pointer'}}>See all →</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10}}>
              {['Luna','Calypso','Iris','Nyx'].map((h,hi)=>(
                <div key={h} style={{border:`1px solid ${SC.border}`, background:SC.stone, borderRadius:2, overflow:'hidden'}}>
                  <div style={{height:90, background:HATCH, position:'relative',
                    display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <img src={`uploads/BG-0${(hi%2)+2}.png`} style={{position:'absolute',inset:0,
                      width:'100%',height:'100%',objectFit:'cover',opacity:0.3}}/>
                  </div>
                  <div style={{padding:'6px 9px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                    <span style={{...CIN(10,600), color:SC.parch}}>{h}</span>
                    <ScChip live style={{fontSize:8}}>LIVE</ScChip>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* VIP banner */}
          <div style={{border:`1px solid rgba(196,144,58,0.35)`,
            background:'linear-gradient(135deg,rgba(196,144,58,0.08),rgba(6,4,2,0.6))',
            padding:'14px 20px', display:'flex', alignItems:'center', gap:18}}>
            <img src="uploads/UI-03.png" style={{width:36,height:36,objectFit:'contain',
              filter:'drop-shadow(0 0 8px rgba(196,144,58,0.5))'}}/>
            <div>
              <div style={{...CIN(11,700), color:SC.goldHi, marginBottom:3}}>VIP MEMBERSHIP — EXCLUSIVE ACCESS</div>
              <div style={{...COR(12), color:SC.parch2}}>Private rooms · Priority chat · Exclusive gift animations · Monthly rewards</div>
            </div>
            <div style={{marginLeft:'auto'}}><ScBtn primary small>EXPLORE VIP</ScBtn></div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── SCREEN 2: IMMERSIVE THEATER LIVE ROOM ──────────────────────────────
const GIFTS_DATA = [
  {src:'uploads/GIFT-01.png', name:'Rose',    price:'5 SC'},
  {src:'uploads/GIFT-02.png', name:'Goblet',  price:'15 SC'},
  {src:'uploads/GIFT-03.png', name:'Amphora', price:'25 SC'},
  {src:'uploads/GIFT-04.png', name:'Diamond', price:'50 SC'},
  {src:'uploads/GIFT-05.png', name:'Laurel',  price:'100 SC'},
  {src:'uploads/GIFT-06.png', name:'Torch',   price:'200 SC'},
  {src:'uploads/GIFT-07.png', name:'Crown',   price:'500 SC'},
];

function ImmersiveRoom() {
  const [activeG, setActiveG] = useState(null);
  return (
    <div style={{height:'100%', background:SC.ink, display:'flex', flexDirection:'column'}}>
      {/* Nav */}
      <ScNav crumb="MAIN STAGE · JAMIELYNNE" right={<>
        <ScChip live>● LIVE · 1,242</ScChip>
        <TokenBadge amount="500"/>
        <span style={{...CIN(13), color:SC.parch2, cursor:'pointer', marginLeft:4}}>✕</span>
      </>}/>

      {/* Full-width video */}
      <div style={{position:'relative', height:358, flexShrink:0, background:SC.ink2}}>
        {/* Curtain texture subtle */}
        <img src="uploads/BG-02.png" style={{position:'absolute',inset:0,width:'100%',
          height:'100%',objectFit:'cover',opacity:0.07}}/>
        {/* Marble texture subtle */}
        <img src="uploads/BG-03.png" style={{position:'absolute',inset:0,width:'100%',
          height:'100%',objectFit:'cover',opacity:0.04}}/>
        {/* Video placeholder */}
        <div style={{position:'absolute',inset:0,background:HATCH,opacity:0.75,
          display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{textAlign:'center'}}>
            <div style={{...CIN(11,400), color:'rgba(234,217,168,0.18)', letterSpacing:'0.22em'}}>LIVE VIDEO STREAM</div>
            <div style={{...COR(11), color:'rgba(234,217,168,0.10)', marginTop:3}}>Cloudflare Stream · 1080p</div>
          </div>
        </div>

        {/* Top bar: goal */}
        <div style={{position:'absolute',top:0,left:0,right:0,
          background:'linear-gradient(to bottom,rgba(6,4,2,0.82),transparent)',
          padding:'10px 16px 28px', display:'flex', alignItems:'center', gap:14}}>
          <ScChip live style={{fontSize:9}}>● LIVE</ScChip>
          <div style={{flex:1}}>
            <div style={{display:'flex', alignItems:'center', gap:9, marginBottom:4}}>
              <span style={{...CIN(9,700), color:SC.goldHi}}>SHOW GOAL</span>
              <span style={{...COR(11), color:SC.parch2}}>2,160 / 3,000 tokens · Unlock: Backstage Camera</span>
            </div>
            <ScProgress pct={72} style={{maxWidth:260}}/>
          </div>
          <ScChip style={{fontSize:9}}>👁 1,242</ScChip>
        </div>

        {/* Boost column — left */}
        <div style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)',
          display:'flex', flexDirection:'column', gap:7}}>
          {[['⚡','×1','5 SC'],['⚡⚡','×2','10 SC'],['⚡⚡⚡','×5','25 SC']].map(([e,l,p])=>(
            <div key={l} style={{width:54, border:`1px solid rgba(196,144,58,0.44)`,
              background:'rgba(6,4,2,0.72)', borderRadius:2, padding:'5px 3px',
              textAlign:'center', cursor:'pointer'}}>
              <div style={{fontSize:13}}>{e}</div>
              <div style={{...CIN(8,700), color:SC.gold}}>{l}</div>
              <div style={{...CIN(7,400), color:SC.parch2}}>{p}</div>
            </div>
          ))}
        </div>

        {/* Camera tabs — top right */}
        <div style={{position:'absolute', top:10, right:12, display:'flex', gap:5}}>
          {['Stage','Lounge','Kitchen'].map((c,i)=>(
            <div key={c} style={{padding:'3px 9px', background:'rgba(6,4,2,0.75)',
              border:`1px solid rgba(196,144,58,${i===0?0.82:0.24})`, cursor:'pointer'}}>
              <span style={{...CIN(8, i===0?700:400), color:i===0?SC.goldHi:SC.parch2}}>{c}</span>
            </div>
          ))}
        </div>

        {/* Host — bottom left */}
        <div style={{position:'absolute', bottom:10, left:14, display:'flex', alignItems:'center', gap:9}}>
          <span style={{...CIN(15,700), color:SC.parch}}>🎤 JamieLynne</span>
          <img src="uploads/UI-04.png" style={{width:18,height:18,objectFit:'contain',
            filter:'drop-shadow(0 0 4px rgba(196,144,58,0.5))'}}/>
          <span style={{...CIN(8,600), color:SC.goldHi}}>VERIFIED</span>
        </div>
      </div>

      {/* Bottom panel: chat | gifts | tippers */}
      <div style={{flex:1, display:'flex', overflow:'hidden', borderTop:`1px solid ${SC.border}`}}>
        {/* CHAT */}
        <div style={{flex:'0 0 24%', display:'flex', flexDirection:'column', overflow:'hidden',
          borderRight:`1px solid ${SC.border}`}}>
          <div style={{padding:'5px 12px', background:`${SC.stone}cc`,
            borderBottom:`1px solid ${SC.border}`, flexShrink:0}}>
            <span style={{...CIN(9,600), color:SC.parch2}}>CHAT</span>
          </div>
          <div style={{flex:1, overflow:'auto', padding:'3px 0'}}>
            <ChatRow user="VIPKing" vip msg="🌿 Sent Laurel Wreath · 100 SC" time="20:42"/>
            <ChatRow user="AshleyMoon" msg="Amazing voice tonight ♥"/>
            <ChatRow user="RedKnight" msg="Let's hit 3000! 🔥"/>
            <ChatRow user="JamieFan" msg="Best show this week" time="20:40"/>
            <ChatRow user="Amber90" vip msg="Crown incoming 👑" gift/>
            <ChatRow user="MusicLover" msg="Can we request a song?"/>
            <ChatRow user="SuperAlex" msg="50 tokens sent 💪" time="20:38"/>
          </div>
          <div style={{padding:'6px 9px', borderTop:`1px solid ${SC.border}`,
            display:'flex', gap:7, flexShrink:0, background:`${SC.ink2}ee`}}>
            <span style={{fontSize:16, cursor:'pointer'}}>😊</span>
            <ScInput placeholder="Say something…" style={{flex:1, fontSize:11}}/>
            <ScBtn primary small>→</ScBtn>
          </div>
        </div>

        {/* GIFTS */}
        <div style={{flex:'0 0 50%', padding:'10px 13px', borderRight:`1px solid ${SC.border}`,
          display:'flex', flexDirection:'column', gap:9, overflow:'hidden'}}>
          <span style={{...CIN(9,600), color:SC.parch2, flexShrink:0}}>SEND A GIFT</span>
          <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:7, flexShrink:0}}>
            {GIFTS_DATA.map((g,i)=>(
              <GiftCard key={g.name} {...g} active={activeG===i} onClick={()=>setActiveG(i)}/>
            ))}
          </div>
          {/* Gift confetti preview */}
          {activeG !== null && (
            <div style={{display:'flex', alignItems:'center', gap:9, padding:'7px 10px',
              background:'rgba(196,144,58,0.07)', border:`1px solid ${SC.borderHi}`}}>
              <img src="uploads/GIFT-08.png" style={{width:28,height:28,objectFit:'contain',
                filter:'drop-shadow(0 0 6px rgba(196,144,58,0.6))'}}/>
              <div>
                <span style={{...CIN(9,700), color:SC.goldHi, display:'block'}}>
                  {GIFTS_DATA[activeG].name} selected
                </span>
                <span style={{...COR(11), color:SC.parch2}}>
                  This will appear on screen for all viewers — JamieLynne will see your name
                </span>
              </div>
            </div>
          )}
          <div style={{display:'flex', gap:9, alignItems:'center', marginTop:'auto'}}>
            <ScInput placeholder="Add a personal message to JamieLynne…" style={{flex:1, fontSize:11}}/>
            <ScBtn primary small>SEND GIFT</ScBtn>
          </div>
          <div style={{borderTop:`1px solid ${SC.border}`, paddingTop:8}}>
            <span style={{...CIN(9,600), color:SC.parch2, display:'block', marginBottom:6}}>TIPPING GOAL</span>
            <ScProgress pct={72} style={{marginBottom:4}}/>
            <div style={{display:'flex', justifyContent:'space-between'}}>
              <span style={{...COR(11), color:SC.parch2}}>2,160 / 3,000 · Unlock: Backstage Camera</span>
              <span style={{...CIN(10,700), color:SC.goldHi}}>72%</span>
            </div>
          </div>
        </div>

        {/* TOP TIPPERS */}
        <div style={{flex:1, padding:'10px 12px', overflow:'auto'}}>
          <span style={{...CIN(9,600), color:SC.parch2, display:'block', marginBottom:8}}>TOP TIPPERS · TONIGHT</span>
          {[['VIPKing',500,true],['JamieFan',420],['RedKnight',350],
            ['Amber90',300],['SuperAlex',250],['MusicLover',220],['StarWatcher',200]].map(([n,t,vip],i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', gap:7, padding:'4px 0',
              borderBottom:`1px solid rgba(196,144,58,0.07)`}}>
              <span style={{...CIN(8,400), color:'rgba(234,217,168,0.26)', width:13}}>{i+1}</span>
              <div style={{width:20,height:20,borderRadius:'50%',background:SC.stone2,
                border:`1px solid ${SC.border}`, flexShrink:0,
                display:'flex',alignItems:'center',justifyContent:'center'}}>
                {i===0 && <img src="uploads/UI-03.png" style={{width:'100%',height:'100%',objectFit:'contain'}}/>}
              </div>
              <span style={{...CIN(9,vip?700:400), color:vip?SC.goldHi:SC.parch, flex:1}}>{n}</span>
              <span style={{...CIN(9,600), color:vip?SC.gold:SC.parch2}}>{t}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom input bar */}
      <div style={{height:46, borderTop:`1px solid ${SC.border}`,
        background:`${SC.ink2}f0`, display:'flex', alignItems:'center',
        padding:'0 14px', gap:10, flexShrink:0}}>
        <TokenBadge amount="500"/>
        <ScInput placeholder="Say something to JamieLynne…" style={{flex:1, fontSize:12}}/>
        <ScBtn primary small>SEND</ScBtn>
      </div>
    </div>
  );
}

// ── SCREEN 3: MOBILE IMMERSIVE ─────────────────────────────────────────
function MobileImmersive() {
  const [giftsOpen, setGiftsOpen] = useState(false);
  const miniGifts = GIFTS_DATA.filter((_,i)=>[0,2,4,6].includes(i));

  return (
    <div style={{height:'100%', background:SC.ink, display:'flex', flexDirection:'column',
      position:'relative', overflow:'hidden'}}>
      {/* Atmospheric bg */}
      <img src="uploads/BG-01.png" style={{position:'absolute',inset:0,width:'100%',
        height:'100%',objectFit:'cover',opacity:0.25,zIndex:0}}/>
      <div style={{position:'absolute',inset:0,zIndex:1,
        background:'linear-gradient(to top,rgba(6,4,2,0.98) 0%,rgba(6,4,2,0.58) 50%,rgba(6,4,2,0.38) 100%)'}}/>

      {/* Status bar */}
      <div style={{height:26, display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 15px', zIndex:10, flexShrink:0}}>
        <span style={{...CIN(9,400), color:'rgba(255,255,255,0.6)'}}>9:41</span>
        <span style={{fontSize:9, color:'rgba(255,255,255,0.6)'}}>●●● 🔋</span>
      </div>

      {/* Top nav */}
      <div style={{height:42, display:'flex', alignItems:'center', padding:'0 15px', gap:10,
        zIndex:10, flexShrink:0, background:'linear-gradient(to bottom,rgba(6,4,2,0.7),transparent)'}}>
        <span style={{fontSize:16, color:SC.parch2, cursor:'pointer'}}>←</span>
        <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:8}}>
          <img src="uploads/UI-01.png" style={{width:17,height:17,objectFit:'contain',opacity:0.85}}/>
          <span style={{...CIN(11,700), color:SC.goldHi, letterSpacing:'0.16em'}}>MAIN STAGE</span>
        </div>
        <span style={{fontSize:16, color:SC.parch2}}>⋮</span>
      </div>

      {/* Top row */}
      <div style={{display:'flex', alignItems:'center', padding:'4px 14px', gap:8,
        zIndex:10, flexShrink:0}}>
        <ScChip live style={{fontSize:9}}>● LIVE · 1,242</ScChip>
        <div style={{flex:1}}/>
        <TokenBadge amount="500"/>
        <span style={{fontSize:14, color:SC.parch2, cursor:'pointer', marginLeft:4}}>✕</span>
      </div>

      {/* Video area + chat overlay */}
      <div style={{flex:1, position:'relative', zIndex:5, overflow:'hidden'}}>
        {/* Video placeholder (centered) */}
        <div style={{position:'absolute', left:'6%', right:'6%', top:'48%',
          transform:'translateY(-55%)', aspectRatio:'16/9',
          background:'rgba(10,8,5,0.88)', border:`1px solid rgba(196,144,58,0.16)`,
          display:'flex', alignItems:'center', justifyContent:'center'}}>
          <span style={{...COR(10), color:'rgba(234,217,168,0.16)'}}>LIVE VIDEO</span>
        </div>

        {/* Chat overlay — right side */}
        <div style={{position:'absolute', right:0, top:24, bottom:60, width:160,
          display:'flex', flexDirection:'column', justifyContent:'flex-end',
          padding:'0 7px 7px', gap:4, zIndex:20}}>
          {[{user:'VIPKing',vip:true,msg:'🌿 Laurel!'},
            {user:'Ashley',msg:'♥♥♥'},
            {user:'JamieFan',msg:"Let's go!!"},
            {user:'Amber90',msg:'50 SC!'}].map((m,i)=>(
            <div key={i} style={{display:'flex', gap:3, alignItems:'center'}}>
              <div style={{width:14,height:14,borderRadius:'50%',background:SC.stone2,flexShrink:0}}/>
              <div style={{background:'rgba(6,4,2,0.65)', borderRadius:10,
                padding:'2px 8px', backdropFilter:'blur(5px)',
                borderLeft: m.vip ? `2px solid ${SC.gold}` : 'none'}}>
                <span style={{...CIN(8,m.vip?700:400), color:m.vip?SC.goldHi:SC.parch2}}>{m.user}: </span>
                <span style={{...COR(9), color:'rgba(234,217,168,0.48)'}}>{m.msg}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Host / goal bottom gradient */}
        <div style={{position:'absolute', bottom:0, left:0, right:0,
          background:'linear-gradient(to top,rgba(6,4,2,0.94),transparent)',
          padding:'22px 14px 10px', zIndex:20}}>
          <div style={{display:'flex', alignItems:'center', gap:7, marginBottom:5}}>
            <span style={{...CIN(14,700), color:SC.parch}}>🎤 JamieLynne</span>
            <img src="uploads/UI-04.png" style={{width:16,height:16,objectFit:'contain'}}/>
          </div>
          <ScProgress pct={72} style={{marginBottom:3}}/>
          <span style={{...CIN(8,400), color:SC.parch2}}>Show Goal 72% · Unlock: Backstage</span>
          <div style={{display:'flex', gap:5, marginTop:8}}>
            {['Stage','Lounge','Kitchen'].map((c,i)=>(
              <div key={c} style={{padding:'2px 9px', background:'rgba(6,4,2,0.75)',
                border:`1px solid rgba(196,144,58,${i===0?0.72:0.22})`}}>
                <span style={{...CIN(8,i===0?700:400), color:i===0?SC.goldHi:SC.parch2}}>{c}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Action buttons */}
      <div style={{display:'flex', justifyContent:'flex-end', padding:'0 13px 6px',
        gap:10, zIndex:10, flexShrink:0}}>
        {[['🎁',()=>setGiftsOpen(o=>!o)],['⚡',null],['♥',null],['💬',null]].map(([icon,fn],i)=>(
          <div key={i} onClick={fn} style={{
            width:46, height:46, borderRadius:'50%', cursor:'pointer',
            background:'rgba(6,4,2,0.75)',
            border:`1.5px solid rgba(196,144,58,${i===0&&giftsOpen?0.85:0.36})`,
            boxShadow: i===0&&giftsOpen?`0 0 16px rgba(196,144,58,0.42)`:'none',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <span style={{fontSize:19}}>{icon}</span>
          </div>
        ))}
      </div>

      {/* Gift drawer (toggleable) */}
      {giftsOpen && (
        <div style={{zIndex:10, flexShrink:0, padding:'10px 12px',
          background:`${SC.stone}f8`, borderTop:`1px solid ${SC.border}`}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8}}>
            {miniGifts.map(g=><GiftCard key={g.name} {...g} small/>)}
          </div>
        </div>
      )}

      <div style={{textAlign:'center', padding:'3px 0', zIndex:10, flexShrink:0}}>
        <span style={{...CIN(7,400), color:'rgba(234,217,168,0.2)', letterSpacing:'0.2em'}}>↑ SWIPE FOR MORE OPTIONS</span>
      </div>

      {/* Input */}
      <div style={{height:52, display:'flex', alignItems:'center', padding:'0 12px', gap:8,
        background:`${SC.ink2}f5`, borderTop:`1px solid ${SC.border}`,
        zIndex:10, flexShrink:0}}>
        <span style={{fontSize:18, cursor:'pointer'}}>😊</span>
        <ScInput placeholder="Say something to JamieLynne…" style={{flex:1, fontSize:12}}/>
        <ScBtn primary small>→</ScBtn>
      </div>
    </div>
  );
}

Object.assign(window, { PortalLobby, GrandEntrance, ImmersiveRoom, MobileImmersive });