// ============================================================
// hifi-mobile-b.jsx — Mobile App: remaining screens
// Adds to window.MOBILE_SCREENS (loads after hifi-mobile.jsx)
// ============================================================
/* ---------------- PAIRING ---------------- */
function MPairing(){
  return (
    <PhoneShell>
      <AppBar title="Pair New Device" back/>
      <MBody>
        <Lbl>Connection Method</Lbl>
        <Row gap={9} style={{marginTop:8}}>
          {[['BLE Scan','bolt',true],['USB','device',false],['Manual','list',false]].map((m,i)=>(
            <div key={i} className="hf-card" style={{flex:1,padding:'13px 6px',textAlign:'center',borderColor:m[2]?'var(--taupe)':'var(--line-soft)',background:m[2]?'color-mix(in srgb,var(--taupe) 10%,var(--panel-1))':'var(--panel-1)'}}><div style={{display:'flex',justifyContent:'center',color:m[2]?'var(--taupe)':'var(--text-mute)'}}><Icon k={m[1]} size={20}/></div><div style={{fontSize:11,fontWeight:600,color:'var(--paper)',marginTop:6}}>{m[0]}</div></div>
          ))}
        </Row>
        <div style={{display:'flex',justifyContent:'center',padding:'24px 0 14px'}}>
          <div style={{position:'relative',width:140,height:140,display:'flex',alignItems:'center',justifyContent:'center'}}>
            {[140,104,68].map((s,i)=><div key={i} style={{position:'absolute',width:s,height:s,borderRadius:'50%',border:'1.5px solid var(--taupe)',opacity:.15+i*.18}}/>)}
            <AegisMark size={34} color="var(--taupe)" glow spin/>
          </div>
        </div>
        <Lbl>Discovered</Lbl>
        <Col gap={9} style={{marginTop:8}}>
          {['AC-7742 · Sensor','AC-1180 · Relay'].map((d,i)=>(<div key={i} className="hf-card" style={{padding:'12px 13px',display:'flex',alignItems:'center',gap:10}}><span className="hf-dot" style={{background:'var(--maint)',boxShadow:'0 0 6px var(--maint)'}}/><Mono style={{fontSize:12.5,color:'var(--paper)',flex:1}}>{d}</Mono><span className="hf-label" style={{fontSize:13}}>›</span></div>))}
        </Col>
        <div className="hf-label" style={{textAlign:'center',marginTop:14,fontSize:9}}>Scanning for nearby devices…</div>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- RECORDING ---------------- */
function MRecording(){
  return (
    <PhoneShell>
      <div style={{flex:1,background:'#040A16',display:'flex',flexDirection:'column',alignItems:'center',padding:'16px 16px 0'}}>
        <Row gap={9} align="center" style={{marginTop:6}}><span style={{width:12,height:12,borderRadius:'50%',background:'var(--crit)',boxShadow:'0 0 10px var(--crit)'}}/><span className="hf-mono" style={{fontSize:13,color:'var(--paper)',letterSpacing:'.08em'}}>REC · 00:03</span></Row>
        <div style={{width:'100%',background:'#020611',borderRadius:10,padding:10,marginTop:18,border:'1px solid var(--line-soft)'}}><Wave w={296} h={150} lines={[['ok',1],['taupe',1.5],['maint',2],['crit',1.3],['warn',1.8],['gray',1.1]]}/></div>
        <span className="hf-mono" style={{fontSize:9,color:'var(--text-mute)',marginTop:8,letterSpacing:'.1em'}}>ACCEL XYZ + GYRO XYZ</span>
        <div style={{marginTop:'auto',marginBottom:34}}>
          <div style={{width:78,height:78,borderRadius:'50%',background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'0 0 0 6px rgba(255,255,255,.12)'}}><div style={{width:28,height:28,borderRadius:5,background:'var(--crit)'}}/></div>
        </div>
      </div>
    </PhoneShell>
  );
}

/* ---------------- GESTURE SETTINGS ---------------- */
function MGSettings(){
  return (
    <PhoneShell>
      <AppBar title="Gesture Settings" back/>
      <MBody>
        <Lbl>Recognition Sensitivity</Lbl>
        <div style={{marginTop:8}}><Seg items={['Low','Medium','High']} active="Medium"/></div>
        <Lbl style={{marginTop:16}}>Confirmation Timeout</Lbl>
        <div style={{marginTop:8}}><Seg items={['3s','5s','10s']} active="5s"/></div>
        <Lbl style={{marginTop:16}}>Gestures</Lbl>
        <Col gap={9} style={{marginTop:8}}>
          {[['Up-down sweep',true],['Figure-8',true],['Double-flick',false]].map((g,i)=>(<div key={i} className="hf-card" style={{padding:'11px 13px',display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:13,color:'var(--text)'}}>{g[0]}</span><Toggle on={g[1]}/></div>))}
        </Col>
        <div className="hf-card" style={{padding:'13px',marginTop:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:13,color:'var(--text)'}}>View Audit Log</span><span className="hf-label" style={{fontSize:13}}>›</span></div>
        <Btn variant="danger" block style={{marginTop:10}}>⊘ Reset Library (biometric)</Btn>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- TEMPLATES ---------------- */
function MTemplates(){
  return (
    <PhoneShell>
      <AppBar title="Team Templates" back right={<Chip>3</Chip>}/>
      <MBody>
        <Col gap={10}>
          {[['Backup call','up-down sweep','Request Backup','Recon Div',false,false],
            ['Waypoint drop','figure-8','Mark Waypoint','Team Bravo',false,true],
            ['Drone recall','double-flick','Recall Drone','Recon Div',true,false]].map((t,i)=>(
            <div key={i} className="hf-card" style={{padding:'12px 13px'}}>
              <Row justify="space-between" align="flex-start" gap={10}>
                <div style={{width:32,height:32,borderRadius:8,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)',flex:'none'}}><Icon k="bolt" size={16}/></div>
                <div style={{flex:1,minWidth:0}}><div style={{fontSize:13.5,fontWeight:600,color:'var(--paper)'}}>{t[0]}</div><div className="hf-mono" style={{fontSize:10.5,color:'var(--text-dim)',marginTop:2}}>{t[1]} → {t[2]}</div><Row gap={5} style={{marginTop:6}} wrap><span className="hf-chip" style={{fontSize:8,color:'var(--maint)',borderColor:'color-mix(in srgb,var(--maint) 50%,transparent)'}}>{t[3]}</span>{t[4]&&<span className="hf-chip" style={{fontSize:8,color:'var(--crit)',borderColor:'color-mix(in srgb,var(--crit) 50%,transparent)'}}>RESTRICTED</span>}</Row></div>
                {t[5]?<Row gap={5} align="center" style={{flex:'none'}}><Dot s="ok"/><span className="hf-label" style={{fontSize:9,color:'var(--ok)'}}>Adopted</span></Row>:<Btn variant="accent" style={{padding:'7px 13px',flex:'none'}}>Adopt</Btn>}
              </Row>
            </div>
          ))}
        </Col>
        <div className="hf-label" style={{marginTop:10,fontSize:9,textTransform:'none',letterSpacing:0,color:'var(--text-mute)'}}>Adopting copies into your library as a read-only binding.</div>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- COMMS (channel list) ---------------- */
function MComms(){
  return (
    <PhoneShell>
      <AppBar title="Comms"/>
      <MBody pad="0" tab="Comms">
        {[['Team Bravo','Copy that, moving to grid 4','2','1m'],['Ops Center','Firmware push scheduled 1800','0','12m'],['Recon Net','Waypoint marked — see map','5','34m']].map((c,i)=>(
          <div key={i} style={{padding:'13px 16px',borderBottom:'1px solid var(--line-soft)',display:'flex',gap:11,alignItems:'center'}}>
            <div style={{width:38,height:38,borderRadius:'50%',background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)',flex:'none'}}><Icon k="comms" size={18}/></div>
            <div style={{flex:1,minWidth:0}}><Row justify="space-between"><span style={{fontSize:13.5,fontWeight:600,color:'var(--paper)'}}>{c[0]}</span><span className="hf-mono" style={{fontSize:9.5,color:'var(--text-mute)'}}>{c[3]}</span></Row><div style={{fontSize:11.5,color:'var(--text-mute)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{c[1]}</div></div>
            {c[2]!=='0'&&<span style={{width:19,height:19,borderRadius:'50%',background:'var(--crit)',color:'#fff',fontSize:9,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',flex:'none',boxShadow:'0 0 8px var(--crit)'}}>{c[2]}</span>}
          </div>
        ))}
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- CHAT ---------------- */
function MChat(){
  const them={maxWidth:'78%',borderRadius:'12px 12px 12px 3px',padding:'9px 12px',fontSize:12.5,lineHeight:1.4,background:'var(--panel-2)',color:'var(--text)',alignSelf:'flex-start',border:'1px solid var(--line-soft)'};
  const me={maxWidth:'78%',borderRadius:'12px 12px 3px 12px',padding:'9px 12px',fontSize:12.5,lineHeight:1.4,background:'var(--royal)',color:'var(--paper)',alignSelf:'flex-end'};
  return (
    <PhoneShell>
      <Row justify="space-between" align="center" style={{padding:'13px 16px',borderBottom:'1px solid var(--line-soft)',flex:'none'}}><Row gap={9} align="center"><span style={{fontSize:19,color:'var(--text-mute)'}}>‹</span><span style={{fontSize:15,fontWeight:700,color:'var(--paper)'}}>Team Bravo</span></Row><Icon k="shield" size={15} style={{color:'var(--ok)'}}/></Row>
      <div style={{padding:'7px 14px',background:'color-mix(in srgb,var(--crit) 13%,transparent)',display:'flex',alignItems:'center',justifyContent:'center',gap:8,flex:'none'}}><span className="hf-dot" style={{background:'var(--crit)'}}/><span className="hf-label" style={{fontSize:9,color:'var(--crit)'}}>Offline — messages queued</span></div>
      <div style={{flex:1,overflow:'hidden',padding:14,display:'flex',flexDirection:'column',gap:9}}>
        <div style={them}><div className="hf-label" style={{fontSize:8.5,marginBottom:3}}>T. Cole</div>Status on AC-7741?</div>
        <div style={me}>Calibration due, handling it now</div>
        <div style={them}><div className="hf-label" style={{fontSize:8.5,marginBottom:3}}>T. Cole</div>Copy that, moving to grid 4</div>
        <div style={{...me,opacity:.7}}>On my way ⟳ <span style={{fontSize:8}}>Pending</span></div>
      </div>
      <Row gap={9} align="center" style={{padding:'10px 12px',borderTop:'1px solid var(--line-soft)',flex:'none'}}><span style={{fontSize:18,color:'var(--text-mute)'}}>＋</span><div style={{flex:1,height:34,borderRadius:17,background:'var(--void)',border:'1px solid var(--line-soft)',display:'flex',alignItems:'center',padding:'0 13px'}}><span className="hf-label" style={{fontSize:10,textTransform:'none',letterSpacing:0}}>Message…</span></div><Icon k="comms" size={17} style={{color:'var(--taupe)'}}/><Icon k="loc" size={17} style={{color:'var(--text-mute)'}}/></Row>
    </PhoneShell>
  );
}

/* ---------------- PTT (transmitting) ---------------- */
function MPTT(){
  return (
    <PhoneShell>
      <Row justify="space-between" align="center" style={{padding:'13px 16px',borderBottom:'1px solid var(--line-soft)',flex:'none'}}><Row gap={9} align="center"><span style={{fontSize:19,color:'var(--text-mute)'}}>‹</span><span style={{fontSize:15,fontWeight:700,color:'var(--paper)'}}>Team Bravo · PTT</span></Row><Icon k="shield" size={15} style={{color:'var(--ok)'}}/></Row>
      <div style={{padding:'7px 14px',background:'color-mix(in srgb,var(--ok) 13%,transparent)',display:'flex',alignItems:'center',gap:8,flex:'none',borderBottom:'1px solid color-mix(in srgb,var(--ok) 25%,transparent)'}}><span className="hf-dot" style={{background:'var(--ok)',boxShadow:'0 0 6px var(--ok)'}}/><span className="hf-label" style={{fontSize:9,color:'var(--ok)'}}>PTT synced · AC-7740 hardware key</span></div>
      <div style={{padding:'10px 16px',background:'var(--taupe)',color:'#1b1206',display:'flex',alignItems:'center',gap:10,flex:'none'}}><span style={{width:9,height:9,borderRadius:'50%',background:'#1b1206'}}/><span style={{fontFamily:'var(--mono)',fontSize:11,fontWeight:600}}>You are transmitting…</span><span style={{marginLeft:'auto',fontFamily:'var(--mono)',fontSize:11}}>00:04</span></div>
      <div style={{flex:1,padding:14,display:'flex',flexDirection:'column'}}>
        <div className="hf-inset" style={{padding:12}}><Wave w={296} h={64} lines={[['taupe',1]]} grid={false}/></div>
        <span className="hf-mono" style={{fontSize:8.5,color:'var(--text-mute)',marginTop:6,letterSpacing:'.08em'}}>LIVE MIC LEVEL · HALF-DUPLEX (CHANNEL LOCKED)</span>
        <Lbl style={{marginTop:14}}>Team Roster</Lbl>
        <Col gap={8} style={{marginTop:8}}>
          {[['T. Cole','ok','online'],['J. Reyes','ok','online'],['K. Vance','off','offline · queued']].map((m,i)=>(<div key={i} className="hf-card" style={{padding:'9px 11px',display:'flex',alignItems:'center',gap:10}}><div className="hf-avatar" style={{width:26,height:26,fontSize:9}}>{m[0].split(' ')[1][0]}</div><div style={{flex:1}}><div style={{fontSize:12.5,fontWeight:600,color:'var(--paper)'}}>{m[0]}</div><span className="hf-label" style={{fontSize:8.5}}>{m[2]}</span></div><Dot s={m[1]}/></div>))}
        </Col>
        <div style={{marginTop:'auto',display:'flex',flexDirection:'column',alignItems:'center',gap:8,paddingBottom:8}}>
          <div style={{width:104,height:104,borderRadius:'50%',background:'var(--taupe)',color:'#1b1206',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:3,boxShadow:'0 0 0 8px color-mix(in srgb,var(--taupe) 20%,transparent), 0 0 30px color-mix(in srgb,var(--taupe) 50%,transparent)'}}><Icon k="comms" size={26}/><span style={{fontFamily:'var(--mono)',fontSize:10,fontWeight:600}}>ON AIR</span></div>
          <span className="hf-label" style={{fontSize:9.5}}>Release to send</span>
        </div>
      </div>
    </PhoneShell>
  );
}

/* ---------------- FIELD REPORT ---------------- */
function MFieldReport(){
  return (
    <PhoneShell>
      <Row justify="space-between" align="center" style={{padding:'13px 16px',borderBottom:'1px solid var(--line-soft)',flex:'none'}}><span style={{fontSize:18,color:'var(--text-mute)'}}>✕</span><span style={{fontSize:15,fontWeight:700,color:'var(--paper)'}}>New Field Report</span><span style={{width:14}}/></Row>
      <MBody pad="14px 16px">
        <Row gap={10}><Field label="Type" value="Malfunction ▾"/><Field label="Severity" value="● Medium ▾"/></Row>
        <div style={{marginTop:11}}><Field label="Device" value="AC-9008 · Beacon"/></div>
        <Row justify="space-between" align="center" style={{marginTop:11}}><Lbl>Description</Lbl><span className="hf-label" style={{fontSize:9,color:'var(--maint)'}}>🎙 voice</span></Row>
        <div style={{height:70,borderRadius:8,background:'var(--void)',border:'1px solid var(--line-soft)',marginTop:5}}/>
        <Row gap={10} style={{marginTop:12}}>
          <div className="hf-inset" style={{flex:1,height:58,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:4,borderStyle:'dashed',borderColor:'var(--maint)'}}><Icon k="report" size={16} style={{color:'var(--maint)'}}/><span className="hf-label" style={{fontSize:8}}>Add photo</span></div>
          <div className="hf-card" style={{flex:1,height:58,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:4}}><Icon k="loc" size={15} style={{color:'var(--taupe)'}}/><span className="hf-mono" style={{fontSize:8,color:'var(--text-dim)'}}>34.05,-118.24 ±5m</span></div>
        </Row>
        <Btn variant="accent" block lg style={{marginTop:16}}>Submit Report</Btn>
        <div className="hf-label" style={{textAlign:'center',marginTop:8,fontSize:8.5,textTransform:'none',letterSpacing:0,color:'var(--text-mute)'}}>Offline? Saved to outbox, syncs on reconnect.</div>
      </MBody>
    </PhoneShell>
  );
}

Object.assign(window.MOBILE_SCREENS, {pairing:MPairing, recording:MRecording, gsettings:MGSettings, templates:MTemplates, comms:MComms, chat:MChat, ptt:MPTT, fieldreport:MFieldReport});