/* Curio — social: join hub, QR scan, crew mode/lobby, discover/match */
const {useState:useSocState,useEffect:useSocEffect,useRef:useSocRef} = React;

/* ── JOIN HUB (Scan tab) ── */
function JoinHubScreen(){
  const{t,nav}=useApp();
  return <div data-screen-label="Join" className="cu-scroll" style={{flex:1,overflowY:'auto',background:T.bg}}>
    
    <header style={{padding:'8px 20px 0'}}>
      <h1 style={{color:T.text,fontSize:fz(26),fontWeight:800,fontFamily:FD,letterSpacing:'-0.7px',margin:0}}>{t('exploreScan')}</h1>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'3px 0 0',lineHeight:1.5}}>{t('joinSub')}</p>
    </header>
    <Gap n={22}/>
    <div style={{padding:'0 20px'}}>
      {/* primary: scan an object */}
      <button type="button" onClick={()=>nav.push('object-scan',{})} className="cu-press" style={{display:'block',width:'100%',textAlign:'left',padding:22,borderRadius:22,background:GRAD,border:'none',cursor:'pointer',boxShadow:SHmd,marginBottom:14,position:'relative',overflow:'hidden'}}>
        <span aria-hidden="true" style={{position:'absolute',top:-30,right:-20,width:130,height:130,borderRadius:'50%',background:'rgba(255,255,255,.16)'}}></span>
        <span style={{display:'flex',gap:14,alignItems:'center',position:'relative'}}>
          <span style={{width:56,height:56,borderRadius:18,background:'rgba(255,255,255,.22)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#fff',flexShrink:0}}><Ic k="scan" size={30}/></span>
          <span style={{flex:1}}>
            <span style={{display:'block',color:'#fff',fontSize:fz(18),fontWeight:800,fontFamily:FD}}>{t('scanObject')}</span>
            <span style={{display:'block',color:'rgba(255,255,255,.88)',fontSize:fz(13),fontFamily:F,marginTop:2,lineHeight:1.4}}>{t('scanObjectSub')}</span>
          </span>
          <Ic k="arrowR" size={22} color="#fff"/>
        </span>
      </button>
      {/* secondary: join a quest via QR/code */}
      <button type="button" onClick={()=>nav.push('scan-qr')} className="cu-press" style={{display:'block',width:'100%',textAlign:'left',padding:18,borderRadius:20,background:T.card,border:`1.5px solid ${T.line}`,cursor:'pointer',boxShadow:SH,marginBottom:10}}>
        <span style={{display:'flex',gap:13,alignItems:'center'}}>
          <span style={{width:48,height:48,borderRadius:14,background:tint(10),display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--ink-deep)',flexShrink:0}}><Ic k="qr" size={24}/></span>
          <span style={{flex:1,minWidth:0}}>
            <span style={{display:'block',color:T.text,fontSize:fz(15.5),fontWeight:800,fontFamily:F}}>{t('joinQuestTitle')}</span>
            <span style={{display:'block',color:T.muted,fontSize:fz(12.5),fontFamily:F,marginTop:1}}>{t('joinQuestSub')}</span>
          </span>
          <Ic k="chevR" size={18} color={T.muted}/>
        </span>
      </button>
      <ListRow emoji="🔢" title={t('enterCode')} sub={t('enterCoded')} onClick={()=>nav.push('enter-code')} trailing={<Ic k="chevR" size={18} color={T.muted}/>}/>
      <Gap n={10}/>
      <ListRow icon={<Ic k="map" size={22}/>} title={t('browseNearby')} sub={t('browseNearbyd')} onClick={()=>nav.goTab('explore')} trailing={<Ic k="chevR" size={18} color={T.muted}/>}/>
      <Gap n={10}/>
      <ListRow icon={<Ic k="users" size={22}/>} iconKind="neutral" title={t('discover')} sub={t('discoverSub')} onClick={()=>nav.push('discover')} trailing={<Ic k="chevR" size={18} color={T.muted}/>}/>
    </div>
    <Gap n={24}/>
    <div style={{padding:'0 20px'}}>
      <div style={{padding:'14px 16px',borderRadius:16,background:T.cardAlt,display:'flex',gap:11,alignItems:'center'}}>
        <span style={{fontSize:22}}>💡</span>
        <p style={{color:T.sub,fontSize:fz(12.5),fontFamily:F,margin:0,lineHeight:1.5}}>{t('tapToScanDemo')} · try code <strong style={{color:'var(--ink-deep)'}}>CURIO-7K2</strong></p>
      </div>
    </div>
    <Gap n={32}/>
  </div>;
}

/* ── QR SCAN (camera) ── */
function ScanScreen(){
  const{t,nav,actions}=useApp();
  const videoRef=useSocRef(null), canvRef=useSocRef(null);
  const[camErr,setCamErr]=useSocState(false);
  const[detected,setDetected]=useSocState(null);
  const streamRef=useSocRef(null), rafRef=useSocRef(null), doneRef=useSocRef(false);

  function handleCode(raw){
    if(doneRef.current) return;
    const m=(raw||'').toUpperCase().match(/CURIO-[A-Z0-9]{3}/);
    const code=m?m[0]:null;
    if(!code) return;
    doneRef.current=true; setDetected(code);
    stop();
    setTimeout(()=>{
      const crew=actions.joinByCode(code);
      if(crew) nav.replace('group-lobby',{code});
      else nav.replace('enter-code',{prefill:code});
    },900);
  }
  function stop(){
    if(rafRef.current) cancelAnimationFrame(rafRef.current);
    if(streamRef.current) streamRef.current.getTracks().forEach(t=>t.stop());
  }
  useSocEffect(()=>{
    let cancelled=false;
    async function go(){
      try{
        const stream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'environment'}});
        if(cancelled){stream.getTracks().forEach(t=>t.stop());return;}
        streamRef.current=stream;
        const v=videoRef.current; v.srcObject=stream; v.setAttribute('playsinline',''); await v.play();
        const loop=()=>{
          if(doneRef.current||cancelled) return;
          const v2=videoRef.current, c=canvRef.current;
          if(v2&&c&&v2.videoWidth){
            c.width=v2.videoWidth; c.height=v2.videoHeight;
            const ctx=c.getContext('2d'); ctx.drawImage(v2,0,0,c.width,c.height);
            if(window.jsQR){
              try{ const img=ctx.getImageData(0,0,c.width,c.height); const r=window.jsQR(img.data,c.width,c.height); if(r&&r.data) handleCode(r.data); }catch(e){}
            }
          }
          rafRef.current=requestAnimationFrame(loop);
        };
        rafRef.current=requestAnimationFrame(loop);
      }catch(e){ if(!cancelled) setCamErr(true); }
    }
    go();
    return ()=>{cancelled=true; stop();};
  },[]);

  return <div data-screen-label="Scan QR" style={{flex:1,position:'relative',overflow:'hidden',background:'#0B0814'}}>
    <video ref={videoRef} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',display:camErr?'none':'block'}} muted playsInline></video>
    <canvas ref={canvRef} style={{display:'none'}}></canvas>
    {camErr&&<img src="img/clue.jpg" alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>}
    <div aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(11,8,20,.55),rgba(11,8,20,.25) 35%,rgba(11,8,20,.7))'}}></div>
    
    <div style={{position:'absolute',top:'calc(12px + var(--cu-safe-top))',left:14,right:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <IconBtn k="arrowL" onDark onClick={nav.pop} ariaLabel={t('back')}/>
      <Chip label={t('scanQR')} kind="onDark"/>
    </div>
    {!camErr&&<>
      <button type="button" onClick={()=>handleCode('CURIO-7K2')} aria-label={t('tapToScanDemo')} style={{position:'absolute',top:'42%',left:'50%',transform:'translate(-50%,-50%)',background:'transparent',border:'none',cursor:'pointer'}}>
        <ScanCorners size={232}/>
      </button>
      <div style={{position:'absolute',top:'42%',left:0,right:0,transform:'translateY(150px)',textAlign:'center',padding:'0 30px'}}>
        <p style={{color:'#fff',fontSize:fz(15),fontWeight:700,fontFamily:F,margin:'0 0 4px'}}>{detected?`${t('foundEvent')} ${detected}`:t('pointCamera')}</p>
        <p style={{color:'rgba(255,255,255,.7)',fontSize:fz(12.5),fontFamily:F,margin:0}}>{t('tapToScanDemo')}</p>
      </div>
    </>}
    <div style={{position:'absolute',left:20,right:20,bottom:30}}>
      {camErr&&<div style={{background:T.card,borderRadius:20,padding:'18px 18px',marginBottom:12,boxShadow:SHlg}}>
        <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:6}}><span style={{fontSize:22}}>📷</span><span style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F}}>{t('cameraBlocked')}</span></div>
        <p style={{color:T.muted,fontSize:fz(13),fontFamily:F,margin:0,lineHeight:1.5}}>{t('cameraBlockedD')}</p>
      </div>}
      <Btn label={t('useCodeInstead')} variant={camErr?'primary':'onGradient'} onClick={()=>nav.replace('enter-code')}/>
    </div>
  </div>;
}

/* ── CODE ENTRY ── */
function CodeEntryScreen(){
  const{t,nav,route,actions}=useApp();
  const[code,setCode]=useSocState(route.p.prefill||'');
  const[err,setErr]=useSocState(false);
  function check(){
    const crew=actions.joinByCode(code.trim().toUpperCase());
    if(crew){ showToast(`${t('joinedToast')} · ${crew.name}`,{icon:<Ic k="check" size={15} color="#34C759"/>}); nav.replace('group-lobby',{code:code.trim().toUpperCase()}); }
    else setErr(true);
  }
  return <div data-screen-label="Enter Code" className="cu-scroll" style={{flex:1,overflowY:'auto',background:T.bg}}>
    <BackRow title={t('enterCode')}/>
    <div style={{padding:'18px 24px'}}>
      <div style={{display:'flex',justifyContent:'center',marginBottom:24}}>
        <span style={{width:80,height:80,borderRadius:24,background:tint(10),display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--ink-deep)'}}><Ic k="qr" size={40}/></span>
      </div>
      <label style={{display:'block'}}>
        <span style={{display:'block',color:T.sub,fontSize:fz(13),fontWeight:600,fontFamily:F,marginBottom:8,textAlign:'center'}}>{t('codeLabel')}</span>
        <input value={code} onChange={e=>{setCode(e.target.value);setErr(false);}} placeholder={t('codePlaceholder')} aria-label={t('codeLabel')} style={{width:'100%',minHeight:64,textAlign:'center',padding:'0 14px',borderRadius:16,background:T.card,border:`2px solid ${err?'#E0566A':code?tint(40):T.lineMd}`,color:T.text,fontSize:fz(24),fontWeight:800,fontFamily:FD,letterSpacing:'2px',outline:'none',boxShadow:SH,textTransform:'uppercase',boxSizing:'border-box'}}/>
      </label>
      {err&&<p role="alert" style={{color:'#D63A4A',fontSize:fz(13),fontFamily:F,margin:'10px 0 0',fontWeight:600,textAlign:'center'}}>{t('invalidCode')}</p>}
      <Gap n={18}/>
      <Btn label={t('checkCode')} disabled={!code.trim()} onClick={check}/>
      <Gap n={20}/>
      <p style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,textAlign:'center',lineHeight:1.6}}>{t('tryLiveTeam')} <button type="button" onClick={()=>setCode('CURIO-7K2')} className="cu-press" style={{background:'transparent',border:'none',color:'var(--ink-deep)',fontWeight:700,cursor:'pointer',fontFamily:F,fontSize:fz(12.5)}}>CURIO-7K2</button> · <button type="button" onClick={()=>setCode('CURIO-M4P')} className="cu-press" style={{background:'transparent',border:'none',color:'var(--ink-deep)',fontWeight:700,cursor:'pointer',fontFamily:F,fontSize:fz(12.5)}}>CURIO-M4P</button></p>
    </div>
  </div>;
}

/* ── CREATE CREW ── */
function CrewModeScreen(){
  const{t,lang,nav,route,state,actions}=useApp();
  const L=(v)=>pick(v,lang);
  const questId=route.p.questId||'golestan';
  const quest=window.DATA.questById(questId)||window.DATA.QUESTS[0];
  const[name,setName]=useSocState('');
  const mode=(state.modes&&state.modes[0])||'friends';
  function surprise(){ setName(window.CREW_NAMES[Math.floor(Math.random()*window.CREW_NAMES.length)]); }
  function create(){ const c=actions.createCrew({questId,mode,name:name.trim()}); nav.replace('group-lobby',{code:c.code}); }
  return <StepShell label="Create Team"
    header={<BackRow title={t('startCrew')}/>}
    footer={<Btn label={t('createCrewCta')} icon={<Ic k="plus" size={19}/>} disabled={!name.trim()} onClick={create}/>}>
    <div style={{padding:'14px 20px'}}>
      <h2 style={{color:T.text,fontSize:fz(23),fontWeight:800,fontFamily:FD,letterSpacing:'-0.5px',margin:'0 0 6px'}}>{t('startCrew')}</h2>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'0 0 22px',lineHeight:1.55}}>{t('startCrewSub')}</p>
      {/* which quest */}
      <div style={{display:'flex',gap:12,alignItems:'center',padding:10,borderRadius:16,background:T.card,border:`1.5px solid ${T.line}`,boxShadow:SH,marginBottom:22}}>
        <Photo src={quest.img} alt="" h={52} radius={12} style={{width:52}}/>
        <div style={{flex:1,minWidth:0}}>
          <div style={{color:T.muted,fontSize:fz(11),fontWeight:800,fontFamily:F,textTransform:'uppercase',letterSpacing:'.5px'}}>{t('forQuest')}</div>
          <div style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{L(quest.title)}</div>
          <div style={{color:T.muted,fontSize:fz(12.5),fontFamily:F}}>{quest.venue}</div>
        </div>
      </div>
      {/* name field */}
      <label style={{display:'block',color:T.text,fontSize:fz(14),fontWeight:800,fontFamily:F,margin:'0 0 9px'}}>{t('crewName')}</label>
      <div style={{position:'relative',marginBottom:10}}>
        <input value={name} onChange={e=>setName(e.target.value)} maxLength={28} placeholder={t('crewNamePh')} style={{width:'100%',boxSizing:'border-box',padding:'15px 102px 15px 16px',borderRadius:14,border:`1.5px solid ${T.lineMd}`,background:T.card,color:T.text,fontSize:fz(16),fontWeight:700,fontFamily:F,outline:'none'}}/>
        <button type="button" onClick={surprise} className="cu-press" style={{position:'absolute',top:'50%',right:7,transform:'translateY(-50%)',display:'flex',gap:5,alignItems:'center',padding:'8px 11px',borderRadius:10,border:'none',background:T.cardAlt,color:'var(--ink-deep)',fontSize:fz(12),fontWeight:800,fontFamily:F,cursor:'pointer'}}><Ic k="sparkle" size={14} fill/>{t('surpriseName')}</button>
      </div>
      <p style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,margin:0,lineHeight:1.5}}>{t('inviteSub')}</p>
    </div>
  </StepShell>;
}

/* ── GROUP LOBBY ── */
function GroupLobbyScreen(){
  const{t,lang,state,nav,route,actions}=useApp();
  const L=(v)=>pick(v,lang);
  const crew=(state.crews.find(c=>c.code===route.p.code))||state.crews[state.crews.length-1];
  const[role,setRole]=useSocState(crew?.role||null);
  const[showQR,setShowQR]=useSocState(false);
  const[copied,setCopied]=useSocState(false);
  const[showSettings,setShowSettings]=useSocState(false);
  useSocEffect(()=>{
    if(!crew?.code) return;
    const pending=(crew.invites||[]).some(i=>i.status==='pending');
    if(!pending) return;
    const tmr=setTimeout(()=>{
      actions.acceptPendingInvites(crew.code);
      showToast(t('inviteJoined'),{icon:<Ic k="check" size={15} color="#34C759"/>});
    }, 2800);
    return ()=>clearTimeout(tmr);
  },[crew?.code, (crew?.invites||[]).map(i=>i.status).join(',')]);
  if(!crew) return <div className="cu-fill" style={{background:T.bg,display:'flex',alignItems:'center',justifyContent:'center'}}><p style={{color:T.muted,fontFamily:F}}>…</p></div>;
  const quest=window.DATA.questById(crew.questId);
  const roles=window.DATA.rolesFor(crew.questId);
  const members=crew.members||[];
  const invites=crew.invites||[];
  const readyCount=members.filter(m=>m.ready).length+(role?1:0);
  const link=prettyUrl(crew.code);
  function copy(){ try{navigator.clipboard&&navigator.clipboard.writeText(link);}catch(e){} setCopied(true); setTimeout(()=>setCopied(false),1500); }
  return <StepShell label="Group Lobby"
    header={<BackRow title={t('yourCrew')} right={<IconBtn k="settings" onClick={()=>setShowSettings(true)} ariaLabel={t('sessionSettings')}/>}/>}
    footer={<>
      <Btn label={t('lockInStart')} disabled={!role} onClick={()=>{actions.startQuest(crew.questId,crew.mode); nav.push('quest-brief',{questId:crew.questId});}} style={{flex:2}}/>
      <Btn label={t('crewChat')} variant="secondary" icon={<Ic k="chat" size={18}/>} onClick={()=>{const tid='t-'+crew.code.replace('CURIO-',''); const exists=(state.threads||[]).some(x=>x.id===tid); if(!exists){actions.pushMessage&&0; actions.update(s=>({...s,threads:[...(state.threads||window.DATA.seedThreads()),{id:tid,kind:'group',code:crew.code,name:crew.name,questId:crew.questId,members:(crew.members||[]).map(m=>({n:m.n,photo:m.photo,ci:m.ci})),msgs:[]}]}));} nav.push('chat-thread',{id:tid});}} full={false} style={{flex:1}}/>
    </>}>
    <div style={{padding:'12px 20px 20px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:18}}>
        <div style={{minWidth:0}}>
          <h2 style={{color:T.text,fontSize:fz(22),fontWeight:800,fontFamily:FD,letterSpacing:'-0.5px',margin:0}}>{crew.name}</h2>
          <p style={{color:T.muted,fontSize:fz(13),fontFamily:F,margin:'2px 0 0'}}>{quest?L(quest.title):''}</p>
        </div>
        <div style={{padding:'8px 14px',borderRadius:14,background:tint(10),border:`1px solid ${tint(26)}`,textAlign:'center',flexShrink:0}}>
          <div style={{color:'var(--ink-deep)',fontSize:fz(17),fontWeight:800,fontFamily:FD,lineHeight:1}}>{readyCount}/{members.length+1}</div>
          <div style={{color:T.muted,fontSize:fz(11),fontFamily:F}}>{t('ready')}</div>
        </div>
      </div>
      {/* invite */}
      <div style={{borderRadius:18,padding:16,background:GRAD,boxShadow:SHmd,marginBottom:20,position:'relative',overflow:'hidden'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div>
            <p style={{color:'rgba(255,255,255,.85)',fontSize:fz(12),fontWeight:700,fontFamily:F,margin:'0 0 3px',textTransform:'uppercase',letterSpacing:'.5px'}}>{t('inviteMembers')}</p>
            <p style={{color:'#fff',fontSize:fz(26),fontWeight:800,fontFamily:FD,margin:0,letterSpacing:'1px'}}>{crew.code}</p>
            <p style={{color:'rgba(255,255,255,.85)',fontSize:fz(12.5),fontFamily:F,margin:'4px 0 0'}}>{t('inviteSub')}</p>
          </div>
          <button type="button" onClick={()=>setShowQR(true)} aria-label={t('showQR')} className="cu-press" style={{width:64,height:64,borderRadius:14,background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',border:'none',cursor:'pointer',flexShrink:0}}><Ic k="qr" size={34} color={T.text}/></button>
        </div>
        <div style={{display:'flex',gap:8,marginTop:14}}>
          <button type="button" onClick={copy} className="cu-press" style={{flex:1,minHeight:42,borderRadius:11,border:'none',background:'rgba(255,255,255,.22)',color:'#fff',fontSize:fz(13),fontWeight:800,fontFamily:F,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',gap:6}}><Ic k="share" size={16}/>{copied?t('copied'):t('share')}</button>
          <button type="button" onClick={()=>setShowQR(true)} className="cu-press" style={{flex:1,minHeight:42,borderRadius:11,border:'none',background:'#fff',color:'var(--ink-deep)',fontSize:fz(13),fontWeight:800,fontFamily:F,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',gap:6}}><Ic k="qr" size={16}/>{t('showQR')}</button>
        </div>
      </div>
      {invites.length>0&&<>
        <h3 style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F,margin:'0 0 10px'}}>{t('pendingInvites')}</h3>
        <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:20}}>
          {invites.map((inv,i)=><div key={inv.id||i} style={{padding:'10px 14px',borderRadius:14,background:T.card,border:`1.5px solid ${T.line}`,display:'flex',gap:10,alignItems:'center'}}>
            <Ic k={inv.type==='email'?'globe':'user'} size={16} color="var(--ink-deep)"/>
            <div style={{flex:1,minWidth:0}}><div style={{color:T.text,fontSize:fz(14),fontWeight:700,fontFamily:F,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{inv.value}</div>
            <div style={{color:T.muted,fontSize:fz(12),fontFamily:F}}>{inv.status==='joined'?t('inviteJoined'):t('invitePending')}</div></div>
            {inv.status==='joined'?<Chip label={t('joined')} kind="green" dot/>:<Chip label={t('invitePending')} kind="neutral"/>}
          </div>)}
        </div>
      </>}
      {/* members */}
      <h3 style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F,margin:'0 0 10px'}}>{t('members2')}</h3>
      <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:22}}>
        <div style={{padding:'10px 14px',borderRadius:14,background:tint(7),border:`1.5px solid ${tint(24)}`,display:'flex',gap:12,alignItems:'center'}}>
          <Av n={state.name||'You'} ci={state.avatar} sz={38} photo={state.photo}/>
          <div style={{flex:1}}><div style={{color:T.text,fontSize:fz(14.5),fontWeight:800,fontFamily:F}}>{state.name||'You'} <span style={{color:T.muted,fontWeight:600}}>({t('tabProfile')})</span></div>
          <div style={{color:T.muted,fontSize:fz(12.5),fontFamily:F}}>{role?L((roles.find(r=>r.id===role)||roles[0]).name):t('choosing')}</div></div>
          {role?<Chip label={t('ready')} kind="green" dot/>:<Chip label={t('choosing')} kind="neutral"/>}
        </div>
        {members.map((m,i)=><div key={i} style={{padding:'10px 14px',borderRadius:14,background:T.card,border:`1.5px solid ${T.line}`,boxShadow:SH,display:'flex',gap:12,alignItems:'center'}}>
          <Av n={m.n} ci={m.ci} sz={38} photo={m.photo}/>
          <div style={{flex:1}}><div style={{color:T.text,fontSize:fz(14.5),fontWeight:700,fontFamily:F}}>{m.n}</div>
          <div style={{color:T.muted,fontSize:fz(12.5),fontFamily:F}}>{m.r}</div></div>
          {m.ready?<Chip label={t('ready')} kind="green" dot/>:<Chip label={t('waiting')} kind="neutral"/>}
        </div>)}
      </div>
      {/* role */}
      <h3 style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F,margin:'0 0 4px'}}>{t('yourRole')}</h3>
      <p style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,margin:'0 0 10px',lineHeight:1.5}}>{lang==='de'?'Vom Challenge-Macher für diese Quest festgelegt.':'Set by this quest’s challenge master.'}</p>
      <div role="radiogroup" style={{display:'flex',flexDirection:'column',gap:10,marginBottom:20}}>
        {roles.map(r=><ListRow key={r.id} role="radio" ariaChecked={role===r.id} emoji={r.icon} title={L(r.name)} sub={L(r.desc)} selected={role===r.id} onClick={()=>{setRole(r.id);actions.setCrewRole(crew.code,r.id);}}
          trailing={<span aria-hidden="true" style={{width:22,height:22,borderRadius:'50%',border:role===r.id?'none':`2px solid ${T.lineMd}`,background:role===r.id?'var(--ink)':'transparent',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#fff',flexShrink:0}}>{role===r.id&&<Ic k="check" size={14} stroke={3}/>}</span>}/>)}
      </div>
    </div>
    {showQR&&<Sheet onClose={()=>setShowQR(false)}>
      <h3 style={{color:T.text,fontSize:fz(18),fontWeight:800,fontFamily:FD,textAlign:'center',margin:'0 0 4px'}}>{t('scanToJoin')}</h3>
      <p style={{color:T.muted,fontSize:fz(13),fontFamily:F,textAlign:'center',margin:'0 0 18px'}}>{crew.name}</p>
      <div style={{display:'flex',justifyContent:'center',marginBottom:16}}>
        <div style={{padding:16,borderRadius:20,background:'#fff',boxShadow:SHmd,border:`1.5px solid ${T.line}`}}><QR text={joinUrl(crew.code)} size={188}/></div>
      </div>
      <p style={{textAlign:'center',color:T.text,fontSize:fz(24),fontWeight:800,fontFamily:FD,letterSpacing:'2px',margin:'0 0 16px'}}>{crew.code}</p>
      <Btn label={t('done')} variant="secondary" onClick={()=>setShowQR(false)}/>
    </Sheet>}
    {showSettings&&<Sheet onClose={()=>setShowSettings(false)}>
      <h2 style={{color:T.text,fontSize:fz(20),fontWeight:800,fontFamily:FD,margin:'0 0 8px'}}>{t('sessionSettings')}</h2>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,lineHeight:1.55,margin:'0 0 20px'}}>{t('sessionSettingsSub')}</p>
      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        <Btn label={t('leaveLobby')} variant="secondary" onClick={()=>{setShowSettings(false); nav.goTab('home'); showToast(t('teamSaved'));}}/>
        <Btn label={t('deleteTeam')} variant="secondary" style={{color:'#C0392B'}} onClick={()=>{actions.deleteCrew(crew.code); setShowSettings(false); showToast(t('teamDeleted')); nav.goTab('home');}}/>
        <Btn label={t('cancel')} variant="tonal" onClick={()=>setShowSettings(false)}/>
      </div>
    </Sheet>}
  </StepShell>;
}

/* ── DISCOVER / MATCH ── */
function DiscoverScreen(){
  const{t,lang,nav,route,state,actions}=useApp();
  const L=(v)=>pick(v,lang);
  /* opt-in gate */
  if(!state.meetEnabled){
    return <div data-screen-label="Discover" className="cu-scroll" style={{flex:1,display:'flex',flexDirection:'column',background:T.bg}}>
      <BackRow title={t('discover')}/>
      <div style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',textAlign:'center',padding:'0 32px'}}>
        <div className="cu-pop" style={{width:88,height:88,borderRadius:28,background:GRAD,display:'flex',alignItems:'center',justifyContent:'center',fontSize:40,marginBottom:20,boxShadow:SHmd}}>👋</div>
        <h2 style={{color:T.text,fontSize:fz(22),fontWeight:800,fontFamily:FD,letterSpacing:'-0.4px',margin:'0 0 10px'}}>{t('meetOffTitle')}</h2>
        <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,lineHeight:1.6,margin:'0 0 26px',maxWidth:320}}>{t('meetOffSub')}</p>
        <div style={{width:'100%',maxWidth:320}}>
          <Btn label={t('enableMeeting')} icon={<Ic k="users" size={19}/>} onClick={()=>actions.setMeet({meetEnabled:true})}/>
        </div>
        <p style={{color:T.muted,fontSize:fz(12),fontFamily:F,margin:'14px 0 0'}}>{t('meetOnNote')}</p>
      </div>
    </div>;
  }
  const all=window.DATA.PEOPLE;
  const people=(state.meetLooking==='date')?all.filter(p=>p.looking==='date')
    :(state.meetLooking==='friends')?all.filter(p=>p.looking==='friends'||p.looking==='family')
    :all;
  const startIdx=route.p.focus?Math.max(0,people.findIndex(p=>p.id===route.p.focus)):0;
  const[idx,setIdx]=useSocState(startIdx<0?0:startIdx);
  const[matched,setMatched]=useSocState(null);
  const[ice,setIce]=useSocState(false);
  const[sent,setSent]=useSocState(null);
  const p=people[idx%people.length];
  const lookMap={date:{l:t('lookingDate'),e:'💘'},friends:{l:t('lookingFriends'),e:'🎉'},family:{l:t('lookingFamily'),e:'👨‍👩‍👧'},any:{l:t('lookingAny'),e:'🤝'}};
  const look=lookMap[p.looking];
  const interests=(lang==='de'?p.deInterests:p.interests)||p.interests;
  function next(){ setMatched(null); setIce(false); setSent(null); setIdx(i=>i+1); }
  function connect(){ actions.addConnection(p.id); setMatched(p); }
  return <div data-screen-label="Discover" style={{flex:1,display:'flex',flexDirection:'column',background:T.bg,overflow:'hidden'}}>
    <BackRow title={t('discover')}/>
    <p style={{color:T.muted,fontSize:fz(13),fontFamily:F,margin:'2px 20px 10px',lineHeight:1.5}}>{t('discoverSub')}</p>
    <div style={{flex:1,padding:'4px 20px 0',position:'relative'}}>
      <div key={p.id} className="cu-rise" style={{borderRadius:24,overflow:'hidden',boxShadow:SHlg,height:'100%',maxHeight:520,position:'relative',background:'#1a1530'}}>
        <img src={p.photo} alt={p.name} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 28%'}}/>
        <div aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(16,12,28,.15) 30%,rgba(16,12,28,.9) 100%)'}}></div>
        <div style={{position:'absolute',top:14,left:14,right:14,display:'flex',justifyContent:'space-between'}}>
          <Chip label={`${look.e} ${look.l}`} kind="onDark"/>
          {p.online&&<Chip label={t('online')} kind="green" dot/>}
        </div>
        <div style={{position:'absolute',left:18,right:18,bottom:18}}>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
            <Av n={p.name} ci={p.ci} sz={52} ring photo={p.photo}/>
            <div><h2 style={{color:'#fff',fontSize:fz(24),fontWeight:800,fontFamily:FD,margin:0,letterSpacing:'-0.4px'}}>{p.name}{p.age?`, ${p.age}`:''}</h2>
            <p style={{color:'rgba(255,255,255,.82)',fontSize:fz(12.5),fontFamily:F,margin:0}}>📍 {p.dist} {t('away')} · {p.mutual} {t('mutualQuests')}</p></div>
          </div>
          <p style={{color:'rgba(255,255,255,.92)',fontSize:fz(14),fontFamily:F,lineHeight:1.5,margin:'0 0 12px'}}>{L(p.bio)}</p>
          <div style={{display:'flex',flexWrap:'wrap',gap:7}}>
            {interests.map((it,i)=><span key={i} style={{padding:'5px 11px',borderRadius:100,background:'rgba(255,255,255,.18)',border:'1px solid rgba(255,255,255,.3)',color:'#fff',fontSize:fz(12),fontWeight:700,fontFamily:F}}>{it}</span>)}
          </div>
        </div>
      </div>
    </div>
    <div style={{padding:'16px 20px 26px',display:'flex',gap:12,alignItems:'center',justifyContent:'center'}}>
      <button type="button" onClick={next} aria-label={t('pass')} className="cu-press" style={{width:60,height:60,borderRadius:30,background:T.card,border:`1.5px solid ${T.lineMd}`,boxShadow:SH,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',color:T.muted}}><Ic k="x" size={26}/></button>
      <Btn label={p.looking==='date'?'💘 '+t('connect'):t('connect')} onClick={connect} style={{flex:1,maxWidth:240}}/>
      <button type="button" onClick={()=>{actions.addConnection(p.id);nav.push('crew-mode',{questId:'deutsches'});}} aria-label={t('inviteToCrew')} className="cu-press" style={{width:60,height:60,borderRadius:30,background:tint(12),border:`1.5px solid ${tint(28)}`,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--ink-deep)'}}><Ic k="users" size={24}/></button>
    </div>
    {matched&&<div style={{position:'absolute',inset:0,zIndex:70,background:GRAD,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',padding:'0 30px',textAlign:'center',overflow:'hidden'}}>
      <Confetti/>
      <div className="cu-pop" style={{display:'flex',marginBottom:20}}>
        <span style={{transform:'rotate(-8deg)'}}><Av n={state.name||'You'} ci={state.avatar} sz={88} ring photo={state.photo}/></span>
        <span style={{transform:'rotate(8deg)',marginLeft:-16}}><Av n={matched.name} ci={matched.ci} sz={88} ring photo={matched.photo}/></span>
      </div>
      <h1 style={{color:'#fff',fontSize:fz(34),fontWeight:800,fontFamily:FD,letterSpacing:'-1px',margin:'0 0 8px'}}>{t('itsAMatch')}</h1>
      <p style={{color:'rgba(255,255,255,.9)',fontSize:fz(15),fontFamily:F,lineHeight:1.5,margin:'0 0 30px',maxWidth:300}}>{t('matchSub')}</p>
      <div style={{width:'100%',maxWidth:320,display:'flex',flexDirection:'column',gap:11}}>
        <Btn label={t('startQuestTogether')} variant="onGradient" icon={<Ic k="bolt" size={18} fill/>} onClick={()=>{nav.push('crew-mode',{questId:'deutsches'});}}/>
        <Btn label={t('sayHi')} variant="ghost" onClick={()=>setIce(true)} style={{color:'#fff',border:'1.5px solid rgba(255,255,255,.4)'}}/>
        <button type="button" onClick={next} style={{background:'transparent',border:'none',color:'rgba(255,255,255,.85)',fontSize:fz(13.5),fontWeight:600,fontFamily:F,cursor:'pointer',padding:8}}>{t('maybeLater')}</button>
      </div>
      {ice&&<Sheet onClose={()=>{ if(sent) next(); else setIce(false); }}>
        {!sent?<>
          <div style={{display:'flex',alignItems:'center',gap:11,margin:'0 0 14px'}}>
            <Av n={matched.name} ci={matched.ci} sz={40} photo={matched.photo}/>
            <div style={{minWidth:0}}>
              <h3 style={{color:T.text,fontSize:fz(17),fontWeight:800,fontFamily:FD,margin:0}}>{t('icebreaker')}</h3>
              <p style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,margin:'1px 0 0'}}>{lang==='de'?`an ${matched.name}`:`to ${matched.name}`}</p>
            </div>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:9}}>
            {window.DATA.ICEBREAKERS[lang].map((m,i)=><button key={i} type="button" onClick={()=>setSent(m)} className="cu-press" style={{textAlign:'left',padding:'14px 16px',borderRadius:14,background:T.card,border:`1.5px solid ${T.line}`,boxShadow:SH,cursor:'pointer',color:T.text,fontSize:fz(14),fontFamily:F,fontWeight:600,lineHeight:1.4}}>{m}</button>)}
          </div>
        </>:<div style={{textAlign:'center',padding:'6px 4px 2px'}}>
          <span className="cu-pop" style={{width:64,height:64,borderRadius:'50%',background:T.greenBg,display:'inline-flex',alignItems:'center',justifyContent:'center',color:T.green,marginBottom:14}}><Ic k="check" size={34} stroke={3}/></span>
          <h3 style={{color:T.text,fontSize:fz(19),fontWeight:800,fontFamily:FD,margin:'0 0 6px'}}>{lang==='de'?'Gesendet!':'Message sent!'}</h3>
          <p style={{color:T.muted,fontSize:fz(13.5),fontFamily:F,lineHeight:1.5,margin:'0 0 18px'}}>{lang==='de'?`${matched.name} ist jetzt in deinen Kontakten. Wir sagen dir Bescheid, sobald sie antwortet.`:`${matched.name} is now in your connections. We'll ping you the moment she replies.`}</p>
          <div style={{padding:'12px 14px',borderRadius:14,background:T.cardAlt,textAlign:'left',marginBottom:18,display:'flex',gap:10}}>
            <span style={{fontSize:18}}>💬</span>
            <p style={{color:T.sub,fontSize:fz(13.5),fontFamily:F,margin:0,lineHeight:1.45}}>“{sent}”</p>
          </div>
          <Btn label={t('done')} onClick={next}/>
        </div>}
      </Sheet>}
    </div>}
  </div>;
}

/* ── CREW TAB ── */
function CrewTabScreen(){
  const{t,lang,state,nav,actions}=useApp();
  const L=(v)=>pick(v,lang);
  const met=window.DATA.PEOPLE.filter(p=>state.connections.includes(p.id));
  return <div data-screen-label="Team" className="cu-scroll" style={{flex:1,overflowY:'auto',background:T.bg}}>
    
    <header style={{padding:'8px 20px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <h1 style={{color:T.text,fontSize:fz(26),fontWeight:800,fontFamily:FD,letterSpacing:'-0.7px',margin:0}}>{t('crew')}</h1>
      <div style={{display:'flex',gap:9,alignItems:'center'}}>
        <button type="button" onClick={()=>nav.push('messages')} aria-label={t('messages')} className="cu-press" style={{position:'relative',width:42,height:42,borderRadius:13,border:`1.5px solid ${T.line}`,background:T.card,boxShadow:SH,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',color:T.sub}}><Ic k="chat" size={20}/>{(state.threads||[]).length>0&&<span style={{position:'absolute',top:-4,right:-4,minWidth:17,height:17,padding:'0 5px',borderRadius:9,background:'var(--ink)',color:'#fff',fontSize:10.5,fontWeight:800,fontFamily:F,display:'flex',alignItems:'center',justifyContent:'center',border:`2px solid ${T.bg}`}}>{(state.threads||[]).length}</span>}</button>
        <Btn label={t('newCrew')} variant="tonal" sm full={false} onClick={()=>nav.push('crew-mode',{questId:'deutsches'})}/>
      </div>
    </header>
    <Gap n={20}/>
    {/* discover banner */}
    <div style={{padding:'0 20px'}}>
      <button type="button" onClick={()=>nav.push('discover')} className="cu-press" style={{display:'block',width:'100%',textAlign:'left',padding:18,borderRadius:20,background:GRAD_WARM,border:'none',cursor:'pointer',boxShadow:SHmd,position:'relative',overflow:'hidden'}}>
        <span aria-hidden="true" style={{position:'absolute',top:-20,right:-10,width:110,height:110,borderRadius:'50%',background:'rgba(255,255,255,.16)'}}></span>
        <span style={{position:'relative',display:'flex',gap:13,alignItems:'center'}}>
          <span style={{fontSize:34}}>✨</span>
          <span style={{flex:1}}><span style={{display:'block',color:'#fff',fontSize:fz(17),fontWeight:800,fontFamily:FD}}>{t('discover')}</span>
          <span style={{display:'block',color:'rgba(255,255,255,.9)',fontSize:fz(13),fontFamily:F,marginTop:1}}>{t('discoverSub')}</span></span>
          <Ic k="arrowR" size={22} color="#fff"/>
        </span>
      </button>
    </div>
    <Gap n={26}/>
    <SecTitle c={t('myCrews')}/>
    <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:11}}>
      {state.crews.length===0&&<div style={{padding:'26px 18px',borderRadius:18,background:T.cardAlt,textAlign:'center'}}>
        <span style={{fontSize:34,display:'block',marginBottom:8}}>🧭</span>
        <p style={{color:T.sub,fontSize:fz(14),fontFamily:F,margin:'0 0 14px',lineHeight:1.5}}>{t('noCrewsYetSub')}</p>
        <Btn label={t('joinAQuest')} sm full={false} onClick={()=>nav.goTab('explore')} style={{margin:'0 auto'}}/>
      </div>}
      {state.crews.map((c,i)=>{const q=window.DATA.questById(c.questId);return <Card key={i} onClick={()=>nav.push('group-lobby',{code:c.code})} padding="14px">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{color:T.text,fontSize:fz(15.5),fontWeight:800,fontFamily:F}}>{c.name}</span>
          <Chip label={c.code} kind="ink"/>
        </div>
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <AvStack names={(c.members||[]).map(m=>m.n).concat([state.name||'You'])} sz={26}/>
          <span style={{color:T.muted,fontSize:fz(12.5),fontFamily:F}}>{(c.members||[]).length+1} {(c.members||[]).length+1===1?t('member1'):t('members')} · {q?L(q.title):''}</span>
        </div>
      </Card>;})}
    </div>
    <Gap n={26}/>
    <SecTitle c={lang==='de'?'Offene Teams in der N\u00e4he':'Open teams nearby'}/>
    <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:14}}>
      {(window.DATA.OPEN_TEAMS||[]).map(ot=>{const q=window.DATA.questById(ot.questId); const requested=(state.requestedTeams||[]).includes(ot.id);
        return <Card key={ot.id} padding="0" style={{overflow:'hidden'}}>
          <div style={{position:'relative',height:88,overflow:'hidden'}}>
            <img src={ot.cover||q?.img||window.DATA.QUESTS[0]?.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
            <div aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.55))'}}></div>
            <div style={{position:'absolute',left:14,right:14,bottom:12,display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:8}}>
              <span style={{color:'#fff',fontSize:fz(15.5),fontWeight:800,fontFamily:F,lineHeight:1.2}}>{ot.name}</span>
              <Chip label={ot.distance||''} kind="onDark"/>
            </div>
          </div>
          <div style={{padding:'14px 14px 16px'}}>
            <div style={{display:'flex',gap:12,alignItems:'center',marginBottom:10}}>
              <AvStack names={Array(ot.members).fill('T')} photos={ot.photos} sz={32}/>
              <span style={{color:T.muted,fontSize:fz(12.5),fontFamily:F}}>{ot.members} {t('members')} · {lang==='de'?`Noch ${ot.needs} gesucht`:`${ot.needs} spots open`}</span>
            </div>
            <p style={{color:T.sub,fontSize:fz(13.5),fontFamily:F,margin:'0 0 14px',lineHeight:1.5}}>{L(ot.blurb)}</p>
            <div style={{display:'flex',gap:8,alignItems:'center',justifyContent:'space-between'}}>
              <Chip label={q?q.venue:''} kind="neutral"/>
              <Btn label={requested?(lang==='de'?'✓ Angefragt':'✓ Requested'):t('join')} variant={requested?'secondary':'solid'} sm full={false} disabled={requested} onClick={()=>{
                const crew=actions.joinOpenTeam(ot.id);
                if(crew){ showToast(`${t('joinedToast')} · ${crew.name}`,{icon:<Ic k="check" size={15} color="#34C759"/>}); nav.push('group-lobby',{code:crew.code}); }
                else { actions.update(s=>({...s,requestedTeams:[...(s.requestedTeams||[]),ot.id]})); showToast(lang==='de'?'Anfrage gesendet':'Request sent',{icon:<Ic k="check" size={15} color="#34C759"/>}); }
              }} style={requested?{background:T.greenBg,color:T.green,border:`1.5px solid ${T.greenLine}`}:undefined}/>
            </div>
          </div>
        </Card>;})}
    </div>
    <Gap n={26}/>
    <SecTitle c={t('soloLookingTeam')}/>
    <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:11}}>
      {(window.DATA.OPEN_SOLO||[]).map(os=>{const p=window.DATA.PEOPLE.find(x=>x.id===os.personId); const q=window.DATA.questById(os.questId); const invited=(state.invitedSolo||[]).includes(os.id);
        if(!p) return null;
        return <Card key={os.id} padding="14px">
          <div style={{display:'flex',gap:12,alignItems:'flex-start'}}>
            <Av n={p.name} ci={p.ci} sz={48} photo={p.photo} ring/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:8,marginBottom:4}}>
                <span style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F}}>{p.name}{p.age?`, ${p.age}`:''}</span>
                <Chip label={os.distance||''} kind="neutral"/>
              </div>
              <p style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,margin:'0 0 8px',lineHeight:1.45}}>{L(os.blurb)}</p>
              <div style={{display:'flex',gap:8,alignItems:'center',justifyContent:'space-between'}}>
                <Chip label={q?q.venue:''} kind="ink"/>
                <Btn label={invited?(lang==='de'?'✓ Eingeladen':'✓ Invited'):t('inviteToCrew')} variant={invited?'secondary':'tonal'} sm full={false} disabled={invited} onClick={()=>{
                  const c=actions.createCrew({questId:os.questId,mode:'friends',name:`${p.name}'s team`});
                  actions.update(s=>{
                    const crews=s.crews.map(cr=>cr.code===c.code?{...cr,invites:[...(cr.invites||[]),{id:'solo'+os.id,type:'email',value:p.name,status:'pending',name:p.name}]}:cr);
                    const next={...s,crews,invitedSolo:[...(s.invitedSolo||[]),os.id]};
                    const updated=crews.find(cr=>cr.code===c.code);
                    if(updated) window.CurioStore.savePublicCrew(updated.code, updated);
                    return next;
                  });
                  showToast(lang==='de'?`${p.name} eingeladen`:`Invite sent to ${p.name}`,{icon:<Ic k="check" size={15} color="#34C759"/>});
                  nav.push('group-lobby',{code:c.code});
                }} style={invited?{background:T.greenBg,color:T.green,border:`1.5px solid ${T.greenLine}`}:undefined}/>
              </div>
            </div>
          </div>
        </Card>;})}
    </div>
    <Gap n={26}/>
    <SecTitle c={t('connections')}/>
    <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:8}}>
      {met.length===0&&<p style={{color:T.muted,fontSize:fz(13.5),fontFamily:F,padding:'4px 2px'}}>{t('findNearby')} →</p>}
      {met.map(p=><div key={p.id} style={{padding:'10px 14px',borderRadius:14,background:T.card,border:`1.5px solid ${T.line}`,boxShadow:SH,display:'flex',gap:12,alignItems:'center'}}>
        <Av n={p.name} ci={p.ci} sz={40} photo={p.photo}/>
        <div style={{flex:1}}><div style={{color:T.text,fontSize:fz(14.5),fontWeight:700,fontFamily:F}}>{p.name}{p.age?`, ${p.age}`:''}</div>
        <div style={{color:T.muted,fontSize:fz(12.5),fontFamily:F}}>{p.mutual} {t('mutualQuests')}</div></div>
        <Btn label={t('inviteToCrew')} variant="tonal" sm full={false} onClick={()=>nav.push('crew-mode',{questId:'deutsches'})}/>
      </div>)}
      <Gap n={4}/>
      <ListRow icon={<Ic k="location" size={22}/>} iconKind="neutral" title={t('findNearby')} onClick={()=>nav.push('discover')} trailing={<Ic k="chevR" size={18} color={T.muted}/>}/>
    </div>
    <Gap n={32}/>
  </div>;
}

Object.assign(window,{JoinHubScreen,ScanScreen,CodeEntryScreen,CrewModeScreen,GroupLobbyScreen,DiscoverScreen,CrewTabScreen});