// boarding-pass.jsx — the hero "passport" card. Three skins, same data.

function BoardingPass({ t, user, stamps, full = false }) {
  // user: { name, callsign, path, memberSince, paxId, rank, xp, xpMax }
  // stamps: Set<string> of floor codes
  const stampCount = stamps.size;
  const xpPct = Math.round((user.xp / user.xpMax) * 100);

  // Edge treatment
  if (t.edge === 'angular') return <BoardingPassEsports t={t} user={user} stamps={stamps} xpPct={xpPct}/>;
  if (t.edge === 'rounded') return <BoardingPassCosplay t={t} user={user} stamps={stamps} xpPct={xpPct}/>;
  return <BoardingPassCasual t={t} user={user} stamps={stamps} xpPct={xpPct}/>;
}

// ─── ESPORTS HUNTER : cyber/neon JRPG card ────────────────────────────
function BoardingPassEsports({ t, user, stamps, xpPct }) {
  return (
    <div style={{
      position:'relative',
      background: `linear-gradient(180deg, ${t.surface} 0%, ${t.surface2} 100%)`,
      borderRadius: 4,
      padding: 0,
      overflow:'hidden',
      clipPath: 'polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px))',
      boxShadow: `0 0 0 1px ${t.line}, 0 12px 32px rgba(124,77,255,0.2), inset 0 1px 0 rgba(255,255,255,0.04)`,
    }}>
      {/* circuit BG */}
      <svg style={{ position:'absolute', inset:0, opacity: 0.18 }} width="100%" height="100%">
        <defs>
          <pattern id="grid-eh" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M20 0H0v20" stroke={t.accent2} strokeWidth="0.5" fill="none"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid-eh)"/>
      </svg>
      {/* corner accent */}
      <div style={{ position:'absolute', top:0, right:0, width: 60, height: 60,
        background: `linear-gradient(225deg, ${t.accent3} 0%, transparent 60%)` }}/>
      <svg width="40" height="40" style={{ position:'absolute', top:6, left:6 }}>
        <path d="M2 12V2h10" stroke={t.accent2} strokeWidth="1.5" fill="none"/>
      </svg>
      <svg width="40" height="40" style={{ position:'absolute', bottom:6, right:6 }}>
        <path d="M38 28v10H28" stroke={t.accent2} strokeWidth="1.5" fill="none"/>
      </svg>

      {/* Header strip */}
      <div style={{
        position:'relative',
        padding: '14px 18px 10px',
        borderBottom: `1px dashed ${t.line}`,
        display:'flex', alignItems:'center', justifyContent:'space-between',
      }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius:'50%', background: t.accent3,
            boxShadow:`0 0 8px ${t.accent3}` }}/>
          <span style={{ fontFamily: t.fontMono, fontSize: 11, letterSpacing:'0.18em',
            color: t.text, fontWeight: 600 }}>HUNTER · CLASS A</span>
        </div>
        <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim,
          letterSpacing:'0.1em' }}>BP-{user.paxId}</span>
      </div>

      {/* Identity */}
      <div style={{ position:'relative', padding: '14px 18px 12px', display:'flex', gap: 12, alignItems:'center' }}>
        <div style={{
          width: 56, height: 56,
          background: `linear-gradient(135deg, ${t.accent}, ${t.accent3})`,
          clipPath: 'polygon(15% 0, 100% 0, 85% 100%, 0 100%)',
          display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily: t.fontTitle, fontSize: 28, fontWeight: 700, color:'#fff',
        }}>{user.name[0]}</div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily: t.fontMono, fontSize: 9,
            letterSpacing:'0.18em', color: t.accent2 }}>CALLSIGN</div>
          <div style={{ fontFamily: t.fontTitle, fontSize: 22, fontWeight: 700,
            letterSpacing:'0.04em', color: t.text, lineHeight: 1, marginTop: 2 }}>
            {user.callsign}
          </div>
          <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim,
            marginTop: 4 }}>
            JOINED {user.memberSince} · LV {user.rank}
          </div>
        </div>
      </div>

      {/* IATA-style strip */}
      <div style={{
        position:'relative',
        background: t.bgDeep,
        margin: '0 14px',
        padding: '10px 12px',
        border:`1px solid ${t.line}`,
        display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', gap:8,
      }}>
        <div>
          <div style={{ fontFamily:t.fontMono, fontSize:9, color:t.textDim, letterSpacing:'0.1em' }}>FROM</div>
          <div style={{ fontFamily:t.fontTitle, fontSize:24, fontWeight:700, color:t.text, letterSpacing:'0.06em' }}>HOME</div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:2 }}>
          <svg width="40" height="14" viewBox="0 0 40 14">
            <path d="M2 7h28M28 3l5 4-5 4" stroke={t.accent2} strokeWidth="1.5" fill="none"/>
          </svg>
          <span style={{ fontFamily:t.fontMono, fontSize:8, color:t.accent2, letterSpacing:'0.1em' }}>JUN 20-21</span>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontFamily:t.fontMono, fontSize:9, color:t.textDim, letterSpacing:'0.1em' }}>VENUE</div>
          <div style={{ fontFamily:t.fontTitle, fontSize:24, fontWeight:700, color:t.text, letterSpacing:'0.06em' }}>T21</div>
        </div>
      </div>

      {/* XP bar */}
      <div style={{ padding:'14px 18px 8px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 6 }}>
          <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.textMute, letterSpacing:'0.12em' }}>XP // RANK {user.rank}</span>
          <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.accent2, fontWeight:600 }}>{user.xp}/{user.xpMax}</span>
        </div>
        <div style={{ height: 6, background:t.bgDeep, position:'relative', border:`1px solid ${t.line}` }}>
          <div style={{
            position:'absolute', left:0, top:0, bottom:0, width:`${xpPct}%`,
            background: `linear-gradient(90deg, ${t.accent}, ${t.accent2})`,
            boxShadow: `0 0 8px ${t.accent2}88`,
          }}/>
          <div style={{
            position:'absolute', left:`${xpPct}%`, top:-3, bottom:-3, width:2,
            background: t.accent3, boxShadow:`0 0 6px ${t.accent3}`,
          }}/>
        </div>
      </div>

      {/* Stamp grid */}
      <div style={{ padding:'10px 14px 16px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 10 }}>
          <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.textMute, letterSpacing:'0.12em' }}>FLOOR STAMPS</span>
          <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.text, letterSpacing:'0.06em' }}>{stamps.size}/7</span>
        </div>
        <StampGrid t={t} stamps={stamps}/>
      </div>
    </div>
  );
}

// ─── COSPLAY STAR : pillowy festival pass ──────────────────────────────
function BoardingPassCosplay({ t, user, stamps, xpPct }) {
  return (
    <div style={{
      position:'relative',
      background: `linear-gradient(165deg, #4a2470 0%, #2a1845 50%, #3a1a55 100%)`,
      borderRadius: 24,
      padding: 0,
      overflow:'hidden',
      boxShadow: `0 12px 32px rgba(255,126,182,0.18), 0 0 0 1px ${t.line2}, inset 0 1px 0 rgba(255,255,255,0.08)`,
    }}>
      {/* sparkles */}
      <svg style={{ position:'absolute', inset:0, pointerEvents:'none' }} width="100%" height="100%">
        {[
          [40,30],[300,50],[60,180],[330,200],[200,90],[280,260],[20,260],[150,220],
        ].map(([x,y],i)=>(
          <g key={i} transform={`translate(${x} ${y})`} opacity={0.6}>
            <path d="M0 -6L1.5 -1.5L6 0L1.5 1.5L0 6L-1.5 1.5L-6 0L-1.5 -1.5Z" fill={t.accent2}/>
          </g>
        ))}
      </svg>
      {/* glow blobs */}
      <div style={{ position:'absolute', top:-40, right:-40, width:160, height:160, borderRadius:'50%',
        background: `radial-gradient(${t.accent}88, transparent 70%)` }}/>
      <div style={{ position:'absolute', bottom:-50, left:-30, width:140, height:140, borderRadius:'50%',
        background: `radial-gradient(${t.accent3}66, transparent 70%)` }}/>

      {/* Header */}
      <div style={{ position:'relative', padding: '16px 20px 12px',
        display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ fontSize: 16 }}>✦</span>
          <span style={{ fontFamily: t.fontBody, fontSize: 12, fontWeight: 600, color: t.text,
            letterSpacing:'0.02em' }}>Cosplay Star Pass</span>
        </div>
        <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim }}>★ {user.paxId}</span>
      </div>

      {/* Identity */}
      <div style={{ position:'relative', padding: '8px 20px 16px', display:'flex', gap: 14, alignItems:'center' }}>
        <div style={{
          width: 64, height: 64, borderRadius: '50%',
          background: `linear-gradient(135deg, ${t.accent}, ${t.accent2})`,
          display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily: t.fontTitle, fontSize: 30, fontWeight: 700, color:'#fff',
          boxShadow: `0 4px 12px ${t.accent}88, 0 0 0 3px rgba(255,255,255,0.15)`,
        }}>{user.name[0]}</div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily: t.fontBody, fontSize: 11,
            color: t.accent2, fontWeight: 600 }}>★ Stage Name</div>
          <div style={{ fontFamily: t.fontTitle, fontSize: 22, fontWeight: 600,
            color: t.text, lineHeight: 1.1, marginTop: 2 }}>
            {user.callsign}
          </div>
          <div style={{ fontFamily: t.fontBody, fontSize: 11, color: t.textDim,
            marginTop: 4, fontWeight:500 }}>
            Member since {user.memberSince} · Lv. {user.rank}
          </div>
        </div>
      </div>

      {/* Tickety strip — soft */}
      <div style={{
        position:'relative',
        background: 'rgba(255,255,255,0.08)',
        margin: '0 16px',
        padding: '12px 14px',
        borderRadius: 14,
        border: `1px solid ${t.line2}`,
        display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', gap:8,
      }}>
        <div>
          <div style={{ fontFamily:t.fontBody, fontSize:10, color:t.textDim, fontWeight:600 }}>FROM</div>
          <div style={{ fontFamily:t.fontTitle, fontSize:22, fontWeight:600, color:t.text }}>Home</div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:2 }}>
          <span style={{ fontSize: 14 }}>✿</span>
          <span style={{ fontFamily:t.fontBody, fontSize:9, color:t.accent2, fontWeight:600, letterSpacing:'0.05em' }}>JUN 20–21</span>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontFamily:t.fontBody, fontSize:10, color:t.textDim, fontWeight:600 }}>VENUE</div>
          <div style={{ fontFamily:t.fontTitle, fontSize:22, fontWeight:600, color:t.text }}>T21 Korat</div>
        </div>
      </div>

      {/* Friendship/XP bar */}
      <div style={{ padding:'14px 20px 8px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 6 }}>
          <span style={{ fontFamily:t.fontBody, fontSize:11, color:t.textMute, fontWeight:600 }}>★ Festival rank {user.rank}</span>
          <span style={{ fontFamily:t.fontMono, fontSize:11, color:t.accent2, fontWeight:700 }}>{user.xp}/{user.xpMax}</span>
        </div>
        <div style={{ height: 8, background:'rgba(0,0,0,0.3)', borderRadius: 100, position:'relative', overflow:'hidden' }}>
          <div style={{
            position:'absolute', left:0, top:0, bottom:0, width:`${xpPct}%`,
            background: `linear-gradient(90deg, ${t.accent}, ${t.accent2})`,
            borderRadius: 100,
            boxShadow: `0 0 12px ${t.accent}88`,
          }}/>
        </div>
      </div>

      {/* Stamp grid */}
      <div style={{ padding:'10px 16px 18px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 10 }}>
          <span style={{ fontFamily:t.fontBody, fontSize:11, color:t.textMute, fontWeight:600 }}>Floor stickers</span>
          <span style={{ fontFamily:t.fontMono, fontSize:11, color:t.text, fontWeight:600 }}>{stamps.size} / 7</span>
        </div>
        <StampGrid t={t} stamps={stamps}/>
      </div>
    </div>
  );
}

// ─── CASUAL EXPLORER : minimalist boarding pass ────────────────────────
function BoardingPassCasual({ t, user, stamps, xpPct }) {
  return (
    <div style={{
      position:'relative',
      background: t.surface,
      borderRadius: 10,
      padding: 0,
      overflow:'hidden',
      border: `1px solid ${t.line}`,
      boxShadow: `0 8px 24px rgba(0,0,0,0.4)`,
    }}>
      {/* Stub strip on right */}
      <div style={{ display:'flex' }}>
        <div style={{ flex:1, padding: '16px 18px 14px', borderRight: `1px dashed ${t.line}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
            <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute,
              letterSpacing:'0.2em' }}>BOARDING PASS</span>
            <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textDim,
              letterSpacing:'0.12em' }}>T21 / GAMEFEST</span>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'flex-end', gap: 8, marginBottom: 14 }}>
            <div>
              <div style={{ fontFamily:t.fontMono, fontSize:10, color:t.textDim, letterSpacing:'0.16em' }}>FROM</div>
              <div style={{ fontFamily:t.fontTitle, fontSize:32, fontWeight:600, color:t.text, letterSpacing:'0.04em', lineHeight:1 }}>HME</div>
              <div style={{ fontFamily:t.fontBody, fontSize:11, color:t.textMute, marginTop:2 }}>Korat</div>
            </div>
            <div style={{ paddingBottom: 8 }}>
              <svg width="44" height="14" viewBox="0 0 44 14">
                <path d="M2 7h32M32 3l6 4-6 4" stroke={t.accent} strokeWidth="1.2" fill="none"/>
              </svg>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontFamily:t.fontMono, fontSize:10, color:t.textDim, letterSpacing:'0.16em' }}>TO</div>
              <div style={{ fontFamily:t.fontTitle, fontSize:32, fontWeight:600, color:t.text, letterSpacing:'0.04em', lineHeight:1 }}>T21</div>
              <div style={{ fontFamily:t.fontBody, fontSize:11, color:t.textMute, marginTop:2 }}>GameFest</div>
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8,
            paddingTop: 12, borderTop: `1px solid ${t.line2}` }}>
            <Field t={t} label="PASSENGER" value={user.callsign}/>
            <Field t={t} label="PAX ID" value={user.paxId}/>
            <Field t={t} label="VALID" value="JUN 20–21" align="right"/>
          </div>
        </div>

        {/* perforated stub */}
        <div style={{ width: 90, padding: '16px 12px 14px',
          display:'flex', flexDirection:'column', justifyContent:'space-between', alignItems:'center', gap:10 }}>
          <div style={{ fontFamily:t.fontMono, fontSize:9, color:t.textDim, letterSpacing:'0.16em' }}>STUB</div>
          <div style={{ fontFamily:t.fontTitle, fontSize:36, fontWeight:600, color:t.text,
            writingMode:'vertical-rl', transform:'rotate(180deg)', letterSpacing:'0.1em' }}>
            T21·GF
          </div>
          <div style={{ fontFamily:t.fontMono, fontSize:9, color:t.accent2, letterSpacing:'0.12em' }}>SEAT {user.rank}A</div>
        </div>
      </div>

      <PerforatedEdge t={t} color={t.bg}/>

      {/* Lower section */}
      <div style={{ padding: '14px 18px 16px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10 }}>
          <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.textMute, letterSpacing:'0.16em' }}>FLOOR STAMPS</span>
          <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.text }}>{stamps.size}/7 · LV{user.rank}</span>
        </div>
        <StampGrid t={t} stamps={stamps}/>

        <div style={{ marginTop: 14 }}>
          <div style={{ height: 4, background: t.bgDeep, borderRadius: 2, position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', left:0, top:0, bottom:0, width:`${xpPct}%`, background: t.accent }}/>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop: 4 }}>
            <span style={{ fontFamily:t.fontMono, fontSize:9, color:t.textDim, letterSpacing:'0.1em' }}>XP {user.xp}/{user.xpMax}</span>
            <span style={{ fontFamily:t.fontMono, fontSize:9, color:t.textDim, letterSpacing:'0.1em' }}>NEXT: LV{user.rank+1}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ t, label, value, align='left' }) {
  return (
    <div style={{ textAlign: align }}>
      <div style={{ fontFamily:t.fontMono, fontSize:9, color:t.textDim, letterSpacing:'0.16em' }}>{label}</div>
      <div style={{ fontFamily:t.fontBody, fontSize:13, color:t.text, fontWeight:600, marginTop:2 }}>{value}</div>
    </div>
  );
}

Object.assign(window, { BoardingPass });