// ============================================================
// hifi-desktop.jsx — Desktop App: all screens (uses DesktopShell)
// HFDesktop({screen}) — login|dashboard|devices|detail|calibration|
//   firmware|diagnostics|config|testsuites|activity|settings
// ============================================================
const DSTEPS = ['Device','Profile','Pre-checks','Calibrate','Review','Certificate'];

/* ---------------- LOGIN ---------------- */
function DLogin(){
  return (
    <div className="hf-app" style={{display:'flex',flexDirection:'column'}}>
      <CUI short/>
      <div style={{flex:1,position:'relative',display:'flex',alignItems:'center',justifyContent:'center',background:'radial-gradient(120% 90% at 50% -10%, #0A1C40 0%, #000E26 60%)'}}>
        <div style={{position:'absolute',inset:0,opacity:.05,display:'flex',alignItems:'center',justifyContent:'center'}}><AegisMark size={560} color="var(--taupe)"/></div>
        <div className="hf-grid-bg" style={{position:'absolute',inset:0,opacity:.22}}/>
        <Card pad={34} style={{width:392,position:'relative',background:'var(--panel-1)'}} glow>
          <div style={{textAlign:'center'}}>
            <AegisMark size={52} color="var(--taupe)" glow/>
            <div className="hf-wordmark" style={{fontSize:28,marginTop:12}}>Aegis Cognis</div>
            <div className="hf-label" style={{marginTop:4}}>Hardware Operations Suite</div>
          </div>
          <Col gap={12} style={{marginTop:26}}>
            <Field label="Organization" value="JSOC Task Force Alpha ▾"/>
            <Btn variant="accent" block lg style={{marginTop:2}}>Sign in with SSO</Btn>
            <div style={{textAlign:'center'}}><span className="hf-label" style={{fontSize:11,color:'var(--maint)'}}>Sign in with credentials</span></div>
            <Btn block style={{marginTop:2}}><Icon k="shield" size={14}/> Sign in with CAC / PIV</Btn>
            <div style={{textAlign:'center'}}><span className="hf-label" style={{fontSize:9}}>Smart-card reader detected</span></div>
          </Col>
          <div style={{height:1,background:'var(--line-soft)',margin:'20px 0 14px'}}/>
          <Row justify="space-between"><span className="hf-label" style={{fontSize:10}}>Forgot password</span><span className="hf-label" style={{fontSize:10}}>Contact admin</span></Row>
        </Card>
      </div>
    </div>
  );
}

/* ---------------- DASHBOARD ---------------- */
function DDashboard(){
  return (
    <DesktopShell active="Dashboard">
      <ScreenHead eyebrow="Workstation · 4 connected" title="Hardware Dashboard" right={<Row gap={8}><Chip>↻ Rescan</Chip></Row>}/>
      <div className="hf-card" style={{padding:'11px 14px',display:'flex',alignItems:'center',gap:10,borderLeft:'3px solid var(--warn)',background:'color-mix(in srgb,var(--warn) 9%,var(--panel-1))',marginBottom:14}}>
        <Icon k="bell" size={15} style={{color:'var(--warn)'}}/><span style={{fontSize:12.5,color:'var(--text)'}}>2 devices have calibration expiring within 7 days · 1 firmware update available</span>
        <span className="hf-label" style={{marginLeft:'auto',fontSize:10}}>Dismiss</span>
      </div>
      <Row gap={14} align="stretch" style={{flex:1}}>
        <Card pad={16} style={{flex:'1.5',minWidth:0}}>
          <Row justify="space-between" align="center"><Lbl>Connected Devices</Lbl><Chip>4 connected</Chip></Row>
          <Col gap={9} style={{marginTop:12}}>
            {[['ok','AC-7740 · Sensor','USB','Cal 12d ago',.9],['warn','AC-7741 · Sensor','Serial','Cal 88d ago',.62],['ok','AC-3320 · Relay','Network','Cal 4d ago',.84],['crit','AC-9008 · Beacon','USB','Cal expired',.2]].map((d,i)=>(
              <div key={i} className="hf-card-2" style={{padding:'11px 13px',display:'flex',alignItems:'center',gap:12}}>
                <Dot s={d[0]}/><div style={{flex:1}}><Mono style={{fontSize:12.5,color:'var(--paper)'}}>{d[1]}</Mono><div className="hf-label" style={{fontSize:9.5,marginTop:2}}>{d[3]}</div></div>
                <Chip>{d[2]}</Chip><Ring size={26} pct={d[4]} s={d[0]==='crit'?'crit':d[0]==='warn'?'warn':'ok'}/>
              </div>
            ))}
          </Col>
        </Card>
        <Card pad={16} style={{width:300}}>
          <Lbl>Quick Actions</Lbl>
          <Col gap={10} style={{marginTop:12}}>
            <Btn variant="accent" block style={{justifyContent:'flex-start',padding:'14px'}}><Icon k="cal" size={16}/> Start Calibration</Btn>
            <Btn block style={{justifyContent:'flex-start',padding:'14px'}}><Icon k="flask" size={16}/> Run Diagnostics</Btn>
            <Btn block style={{justifyContent:'flex-start',padding:'14px'}}><Icon k="chip" size={16}/> Check Firmware Updates</Btn>
          </Col>
          <Lbl style={{marginTop:18}}>Workstation</Lbl>
          <Col gap={8} style={{marginTop:8}}>
            <Row justify="space-between"><span className="hf-label">Agent</span><Mono style={{fontSize:11,color:'var(--ok)'}}>v3.2 · online</Mono></Row>
            <Row justify="space-between"><span className="hf-label">Interfaces</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>USB · Serial · Net</Mono></Row>
          </Col>
        </Card>
      </Row>
      <Card pad={16} style={{marginTop:14}}>
        <Lbl>Recent Activity</Lbl>
        <Col gap={9} style={{marginTop:10}}>
          {[['ok','Calibration completed','AC-3320 · M. Operator','4m'],['ok','Firmware updated v2.4.1','AC-7740 · J. Reyes','1h'],['crit','Diagnostic suite: FAIL','AC-9008 · M. Operator','3h']].map((a,i)=>(
            <Row key={i} gap={11} align="center"><Dot s={a[0]}/><span style={{flex:1,fontSize:12.5,color:'var(--text)'}}>{a[1]} — <span style={{color:'var(--text-mute)'}}>{a[2]}</span></span><span className="hf-mono" style={{fontSize:10.5,color:'var(--text-mute)'}}>{a[3]}</span></Row>
          ))}
        </Col>
      </Card>
    </DesktopShell>
  );
}

/* ---------------- DEVICES ---------------- */
function DDevices(){
  return (
    <DesktopShell active="Devices">
      <ScreenHead eyebrow="Connected & known" title="Devices" right={<Row gap={8}><Chip>Connected only ▾</Chip><Btn variant="ghost">↻ Rescan</Btn></Row>}/>
      <Row gap={8} style={{marginBottom:12}}><Field value="" ph="⌕ Search devices…" w={250}/><Chip>Type ▾</Chip><Chip>Connection ▾</Chip><Chip>Status ▾</Chip></Row>
      <Lbl style={{marginBottom:8}}>Connected</Lbl>
      <Col gap={8}>
        {[['ok','AC-7740 · Sensor','USB','12d ago',.9],['warn','AC-7741 · Sensor','Serial','88d ago',.62],['crit','AC-9008 · Beacon','USB','expired',.2]].map((d,i)=>(
          <Card key={i} pad={0}><Row align="center" gap={12} style={{padding:'11px 14px'}}><Dot s={d[0]}/><div style={{flex:1}}><Mono style={{fontSize:12.5,color:'var(--paper)'}}>{d[1]}</Mono><div className="hf-label" style={{fontSize:9.5,marginTop:2}}>Last cal {d[3]}</div></div><Chip>{d[2]}</Chip><Ring size={24} pct={d[4]} s={d[0]==='crit'?'crit':d[0]==='warn'?'warn':'ok'}/><span className="hf-label" style={{fontSize:13,color:'var(--text-mute)'}}>›</span></Row></Card>
        ))}
      </Col>
      <Lbl style={{margin:'18px 0 8px'}}>Known · offline</Lbl>
      <Col gap={8} style={{opacity:.7}}>
        {[['off','AC-3320 · Relay','Network','4d ago'],['off','AC-5512 · Relay','—','3d ago']].map((d,i)=>(
          <Card key={i} pad={0}><Row align="center" gap={12} style={{padding:'11px 14px'}}><Dot s={d[0]}/><div style={{flex:1}}><Mono style={{fontSize:12.5,color:'var(--text-dim)'}}>{d[1]}</Mono><div className="hf-label" style={{fontSize:9.5,marginTop:2}}>Last seen {d[3]}</div></div><Chip>{d[2]}</Chip><span className="hf-label" style={{fontSize:13}}>›</span></Row></Card>
        ))}
      </Col>
    </DesktopShell>
  );
}

/* ---------------- DEVICE DETAIL ---------------- */
function DDetail(){
  return (
    <DesktopShell active="Devices">
      <Card pad={16} style={{marginBottom:14}}>
        <Row justify="space-between" align="flex-start">
          <Row gap={13} align="center"><div style={{width:42,height:42,borderRadius:10,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)'}}><Icon k="device" size={21}/></div><div><Row gap={9} align="center"><Display size={24} style={{whiteSpace:'nowrap'}}>AC-7740</Display><Badge s="ok"/></Row><div className="hf-label" style={{marginTop:4}}>SN 7740-AC-22 · HW rev C · USB connected</div></div></Row>
          <Row gap={8}><Btn variant="ghost">Run Diagnostics</Btn><Btn variant="accent">Start Calibration</Btn></Row>
        </Row>
      </Card>
      <div style={{display:'flex',gap:2,borderBottom:'1px solid var(--line)',marginBottom:16}}>
        {['Overview','Calibration','Firmware','Diagnostics','Config','Log'].map((t,i)=>(
          <div key={i} style={{padding:'10px 16px',fontFamily:'var(--narrow)',fontWeight:600,textTransform:'uppercase',letterSpacing:'.06em',fontSize:11,color:i===0?'var(--paper)':'var(--text-mute)',borderBottom:i===0?'2px solid var(--taupe)':'2px solid transparent',marginBottom:-1}}>{t}</div>
        ))}
      </div>
      <Row gap={14} align="stretch">
        <Col gap={14} style={{flex:1,minWidth:0}}>
          <Card pad={16}><Lbl>Hardware</Lbl><Row gap={10} wrap style={{marginTop:10}}><Chip>Model S-7740</Chip><Chip>HW rev C</Chip><Chip>Mfg 2025-08</Chip><Chip>IMU 6-axis</Chip></Row></Card>
          <Card pad={16}><Row justify="space-between" align="center"><div><Lbl>Last Calibration</Lbl><Row gap={8} align="center" style={{marginTop:8}}><Dot s="ok"/><span style={{fontSize:12.5,color:'var(--text)'}}>PASS · 12 days ago · M. Operator</span></Row></div><Btn variant="ghost" style={{padding:'6px 12px'}}>Certificate ⬇</Btn></Row></Card>
          <Card pad={16}><Lbl>Configuration Summary</Lbl><Row gap={10} wrap style={{marginTop:10}}><Chip>Sample 100 Hz</Chip><Chip>Warn 60°C</Chip><Chip>BLE 30 ms</Chip><Chip>Profile: Custom</Chip></Row></Card>
        </Col>
        <Col gap={14} style={{width:300}}>
          <Card pad={16}><Row justify="space-between" align="center"><div><Lbl>Firmware</Lbl><Mono style={{fontSize:12,color:'var(--paper)',display:'block',marginTop:6}}>v2.3.0 → v2.4.1</Mono></div><Btn variant="accent" style={{padding:'6px 12px'}}>Update</Btn></Row></Card>
          <Card pad={16}><Lbl>Connection</Lbl><Col gap={7} style={{marginTop:8}}><Row justify="space-between"><span className="hf-label">Interface</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>USB 2.0</Mono></Row><Row justify="space-between"><span className="hf-label">Latency</span><Mono style={{fontSize:11,color:'var(--ok)'}}>12 ms</Mono></Row><Row justify="space-between"><span className="hf-label">Throughput</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>480 kb/s</Mono></Row></Col></Card>
        </Col>
      </Row>
    </DesktopShell>
  );
}

/* ---------------- CALIBRATION (hero) ---------------- */
function DCal(){
  return (
    <DesktopShell active="Calibration">
      <ScreenHead eyebrow="Calibration · Guided Workflow" title="Magnetometer Calibration"
        right={<Row gap={10} align="center"><Chip><Icon k="device" size={12}/> AC-7740 · Sensor</Chip><Chip>Profile: Magnetometer Full</Chip></Row>}/>
      <div className="hf-card" style={{padding:'14px 18px',display:'flex',alignItems:'center'}}>
        {DSTEPS.map((s,i)=>(
          <React.Fragment key={i}>
            <div className={'hf-step'+(i<3?' done':'')+(i===3?' active':'')}><span className="sc">{i<3?'✓':i+1}</span><span className="sl">{s}</span></div>
            {i<DSTEPS.length-1&&<div className={'hf-step-line'+(i<3?' done':'')}/>}
          </React.Fragment>
        ))}
      </div>
      <Row gap={18} style={{marginTop:18,flex:1}} align="stretch">
        <Card pad={18} style={{width:330,display:'flex',flexDirection:'column'}}>
          <Lbl>Step 4 · Axis Alignment</Lbl>
          <div style={{fontSize:13.5,color:'var(--text)',lineHeight:1.55,marginTop:10}}>Rotate the device slowly through all three axes until each reading settles within tolerance.</div>
          <Col gap={9} style={{marginTop:16}}>
            {[['X-axis','ok','0.42 µT','in spec'],['Y-axis','warn','1.18 µT','marginal'],['Z-axis','off','— µT','pending']].map((a,i)=>(
              <div key={i} className="hf-card-2" style={{padding:'11px 13px',display:'flex',alignItems:'center',gap:11,borderLeft:`3px solid var(--${a[1]})`}}>
                <Dot s={a[1]}/><div style={{flex:1}}><div style={{fontSize:13,color:'var(--paper)',fontWeight:600}}>{a[0]}</div><div className="hf-label" style={{fontSize:9.5}}>{a[3]}</div></div><Mono style={{fontSize:14,color:'var(--paper)'}}>{a[2]}</Mono>
              </div>
            ))}
          </Col>
          <div style={{marginTop:'auto',paddingTop:16}}><Row gap={8} align="center"><AegisMark size={16} color="var(--taupe)"/><span className="hf-label" style={{color:'var(--text-dim)'}}>Live IMU stream · 500 Hz</span></Row></div>
        </Card>
        <Card pad={18} glow style={{flex:1,minWidth:0,display:'flex',flexDirection:'column'}}>
          <Row justify="space-between" align="center"><Lbl>Real-Time Sensor Feedback</Lbl><Badge s="ok" label="Streaming"/></Row>
          <Row gap={18} style={{marginTop:14}} align="center">
            <div style={{textAlign:'center'}}><Gauge size={158} pct={.72} label="X-axis · in spec" value="0.42"/></div>
            <div className="hf-inset" style={{flex:1,minWidth:0,padding:12}}>
              <Wave w={440} h={140}/>
              <Row justify="space-between" style={{marginTop:8}}><span className="hf-mono" style={{fontSize:9.5,color:'var(--text-mute)',letterSpacing:'.1em'}}>ACCEL XYZ + GYRO XYZ · 500ms</span><span className="hf-mono" style={{fontSize:9.5,color:'var(--taupe)'}}>● REC</span></Row>
            </div>
          </Row>
          <Row gap={14} style={{marginTop:16}}>
            {[['Field Strength','0.42','µT'],['Heading Δ','1.8','°'],['Noise','0.03','µT'],['Samples','12,480','']].map((r,i)=>(
              <div key={i} className="hf-card-2" style={{flex:1,padding:'12px 14px'}}><Lbl style={{fontSize:9.5}}>{r[0]}</Lbl><Row align="baseline" gap={4} style={{marginTop:4}}><span className="hf-display" style={{fontSize:30,color:'var(--paper)'}}>{r[1]}</span><span className="hf-mono" style={{fontSize:11,color:'var(--text-mute)'}}>{r[2]}</span></Row></div>
            ))}
          </Row>
        </Card>
      </Row>
      <Row justify="space-between" align="center" style={{marginTop:18}}>
        <Btn variant="ghost">‹ Back</Btn>
        <Row gap={10} align="center"><span className="hf-label">Step 4 of 6 · validation passing</span><Btn variant="ghost">Cancel</Btn><Btn variant="accent">Continue ›</Btn></Row>
      </Row>
    </DesktopShell>
  );
}

/* ---------------- FIRMWARE ---------------- */
function DFirmware(){
  return (
    <DesktopShell active="Firmware">
      <ScreenHead eyebrow="Upload / accept · update · batch" title="Firmware"
        right={<Row gap={8}><Btn variant="ghost">⬆ Upload</Btn><Btn variant="accent">↻ Batch Update (2)</Btn></Row>}/>
      <div className="hf-card" style={{padding:'11px 14px',display:'flex',alignItems:'center',gap:10,borderLeft:'3px solid var(--maint)',background:'color-mix(in srgb,var(--maint) 9%,var(--panel-1))',marginBottom:14}}>
        <Icon k="chip" size={15} style={{color:'var(--maint)'}}/><span style={{fontSize:12.5,color:'var(--text)'}}>2 of 4 connected devices have firmware updates available.</span>
      </div>
      <Row gap={14} align="stretch" style={{marginBottom:14}}>
        <Card pad={16} style={{width:380}}>
          <Lbl>Add Firmware · Upload</Lbl>
          <div className="hf-inset" style={{marginTop:10,padding:'20px 12px',display:'flex',flexDirection:'column',alignItems:'center',gap:7,borderStyle:'dashed',borderColor:'var(--maint)'}}>
            <Icon k="chip" size={22} style={{color:'var(--maint)'}}/><span style={{fontSize:12.5,fontWeight:600,color:'var(--paper)'}}>Drop firmware image</span><span className="hf-label" style={{fontSize:9.5}}>signed .afw · or click to browse</span>
          </div>
          <Row gap={10} style={{marginTop:10}}><Field label="Target type" value="Sensor ▾"/><Field label="Version" value="v2.4.2"/></Row>
          <Row gap={8} align="center" style={{marginTop:10}}><Badge s="ok" label="Signature valid"/><span className="hf-label" style={{fontSize:9.5}}>SHA-256 verified</span></Row>
          <Btn variant="primary" block style={{marginTop:10}}>Upload &amp; Verify</Btn>
        </Card>
        <Card pad={16} style={{flex:1,minWidth:0}}>
          <Row justify="space-between" align="center"><Lbl>Backend OTA Inbox</Lbl><Chip>2 awaiting review</Chip></Row>
          <Col gap={9} style={{marginTop:10}}>
            {[['v2.4.2','Sensor','pushed 12m ago'],['v1.9.1','Relay','pushed 1h ago']].map((p,i)=>(
              <div key={i} className="hf-card-2" style={{padding:'11px 13px'}}>
                <Row justify="space-between" align="flex-start"><div><Mono style={{fontSize:12.5,fontWeight:600,color:'var(--paper)'}}>Firmware {p[0]}</Mono><div className="hf-label" style={{fontSize:9.5,marginTop:2}}>Target: {p[1]} · {p[2]}</div></div><Badge s="ok" label="Signed"/></Row>
                <Row gap={8} align="center" style={{marginTop:10}}><span className="hf-label" style={{fontSize:10,color:'var(--maint)'}}>View changelog</span><span style={{marginLeft:'auto'}}/><Btn variant="ghost" style={{padding:'5px 12px'}}>Reject</Btn><Btn variant="accent" style={{padding:'5px 12px'}}>Accept</Btn></Row>
              </div>
            ))}
          </Col>
        </Card>
      </Row>
      <Card pad={0} style={{overflow:'hidden'}}>
        <table className="hf-tbl"><thead><tr><th>Device</th><th>Current</th><th>Available</th><th style={{width:120}}>Status</th><th style={{width:120}}></th></tr></thead>
        <tbody>{[['AC-7740 · Sensor','v2.3.0','v2.4.1','warn','Update'],['AC-7741 · Sensor','v2.4.1','v2.4.1','ok','Current'],['AC-3320 · Relay','v1.8.2','v1.9.0','warn','Update'],['AC-9008 · Beacon','v3.0.0','v3.0.0','ok','Current']].map((r,i)=>(
          <tr key={i}><td style={{color:'var(--paper)'}}><Mono>{r[0]}</Mono></td><td><Mono style={{color:'var(--text-mute)'}}>{r[1]}</Mono></td><td><Mono style={{color:'var(--text-dim)'}}>{r[2]}</Mono></td><td><Badge s={r[3]} label={r[4]}/></td><td>{r[4]==='Update'?<Btn variant="accent" style={{padding:'4px 12px'}}>Update</Btn>:<Btn variant="ghost" style={{padding:'4px 12px'}}>Rollback</Btn>}</td></tr>
        ))}</tbody></table>
      </Card>
    </DesktopShell>
  );
}

/* ---------------- DIAGNOSTICS ---------------- */
function DDiag(){
  return (
    <DesktopShell active="Diagnostics">
      <ScreenHead eyebrow="Test suites · live" title="Diagnostics" right={<Row gap={8}><Chip>AC-7740 ▾</Chip><Btn variant="accent"><Icon k="flask" size={14}/> Run Suite</Btn></Row>}/>
      <Row gap={14} align="stretch" style={{flex:1}}>
        <Card pad={16} style={{flex:1,minWidth:0}}>
          <Row justify="space-between" align="center"><Lbl>Full Sensor Suite</Lbl><Chip>running…</Chip></Row>
          <div style={{height:7,borderRadius:4,background:'var(--line-soft)',marginTop:12,overflow:'hidden'}}><div style={{width:'70%',height:'100%',background:'var(--taupe)',boxShadow:'0 0 12px var(--taupe)'}}/></div>
          <Col gap={9} style={{marginTop:14}}>
            {[['ok','Power rail check','3.30 V'],['ok','IMU self-test','OK'],['ok','Comms loopback','12 ms'],['warn','Thermal range','marginal'],['off','Magnetometer','queued']].map((t,i)=>(
              <div key={i} className="hf-card-2" style={{padding:'10px 13px',display:'flex',alignItems:'center',gap:11}}><Dot s={t[0]}/><span style={{flex:1,fontSize:12.5,color:'var(--text)'}}>{t[1]}</span><Mono style={{fontSize:12,color:t[0]==='off'?'var(--text-mute)':'var(--paper)'}}>{t[2]}</Mono></div>
            ))}
          </Col>
        </Card>
        <Card pad={16} style={{width:330}}>
          <Lbl>Summary</Lbl>
          <Row gap={12} style={{marginTop:12}}>
            <div className="hf-card-2" style={{flex:1,padding:'12px 14px'}}><Lbl style={{fontSize:9.5}}>Passed</Lbl><div className="hf-display" style={{fontSize:32,color:'var(--ok)'}}>3</div></div>
            <div className="hf-card-2" style={{flex:1,padding:'12px 14px'}}><Lbl style={{fontSize:9.5}}>Warnings</Lbl><div className="hf-display" style={{fontSize:32,color:'var(--warn)'}}>1</div></div>
          </Row>
          <Btn block style={{marginTop:12}}>⬇ Export Report</Btn>
          <Lbl style={{marginTop:18}}>History</Lbl>
          <Col gap={8} style={{marginTop:8}}>{[['ok','Pass','3d'],['ok','Pass','1w'],['crit','Fail','2w']].map((h,i)=>(<Row key={i} gap={9} align="center"><Dot s={h[0]}/><span style={{flex:1,fontSize:12,color:'var(--text-dim)'}}>Full Sensor Suite</span><span className="hf-mono" style={{fontSize:10.5,color:'var(--text-mute)'}}>{h[2]}</span></Row>))}</Col>
        </Card>
      </Row>
    </DesktopShell>
  );
}

/* ---------------- CONFIGURATION ---------------- */
function DConfig(){
  return (
    <DesktopShell active="Configuration">
      <ScreenHead eyebrow="Device profiles" title="Configuration" right={<Row gap={8}><Btn variant="ghost">⬆ Import</Btn><Btn variant="ghost">⬇ Export</Btn><Btn variant="accent">Save to Device</Btn></Row>}/>
      <Row gap={14} align="stretch" style={{flex:1}}>
        <Card pad={14} style={{width:300}}>
          <Row justify="space-between" align="center"><Lbl>Profiles</Lbl><span className="hf-label" style={{fontSize:10,color:'var(--maint)'}}>＋ New</span></Row>
          <Col gap={8} style={{marginTop:10}}>
            {['Default','Field Optimized','Low Power','Custom · AC-7740'].map((p,i)=>(
              <div key={i} className="hf-card-2" style={{padding:'10px 12px',borderColor:i===3?'var(--taupe)':'var(--line-soft)',background:i===3?'color-mix(in srgb,var(--taupe) 9%,var(--panel-2))':'var(--panel-2)'}}><span style={{fontSize:12.5,fontWeight:i===3?600:500,color:i===3?'var(--paper)':'var(--text-dim)'}}>{p}</span></div>
            ))}
          </Col>
        </Card>
        <Card pad={16} style={{flex:1,minWidth:0}}>
          <Lbl>Parameters · Custom · AC-7740</Lbl>
          {[['Sampling',['Sample rate (Hz)','100','Buffer size','512']],['Thresholds',['Warn temp (°C)','60','Crit temp (°C)','85']],['Comms',['BLE interval (ms)','30','Retry count','3']]].map((g,i)=>(
            <div key={i} style={{marginTop:i?16:12}}>
              <Lbl style={{fontSize:9.5,marginBottom:8}}>{g[0]}</Lbl>
              <Row gap={12}><Field label={g[1][0]} value={g[1][1]}/><Field label={g[1][2]} value={g[1][3]}/></Row>
            </div>
          ))}
        </Card>
      </Row>
    </DesktopShell>
  );
}

/* ---------------- TEST SUITES ---------------- */
function DTests(){
  return (
    <DesktopShell active="Test Suites">
      <ScreenHead eyebrow="Pre-built & custom · scheduled" title="Test Suites" right={<Btn variant="accent">＋ New Suite</Btn>}/>
      <Row gap={14} align="stretch" style={{flex:1}}>
        <Card pad={0} style={{flex:1,minWidth:0,overflow:'hidden'}}>
          <table className="hf-tbl"><thead><tr><th>Suite</th><th>Type</th><th>Steps</th><th>Schedule</th><th style={{width:110}}>Last</th></tr></thead>
          <tbody>{[['Nightly Sensor QA','Sensor','8','Daily 02:00','ok','Pass'],['Pre-Deploy Full','All','22','Manual','ok','Pass'],['Relay Endurance','Relay','5','Weekly Sun','warn','Warn'],['Beacon Range','Beacon','4','Manual','off','—']].map((r,i)=>(
            <tr key={i}><td style={{color:'var(--paper)'}}>{r[0]}</td><td>{r[1]}</td><td><Mono style={{color:'var(--text-mute)'}}>{r[2]}</Mono></td><td><Mono style={{fontSize:11,color:'var(--text-dim)'}}>{r[3]}</Mono></td><td><Badge s={r[4]} label={r[5]}/></td></tr>
          ))}</tbody></table>
        </Card>
        <Card pad={16} style={{width:340}}>
          <Lbl>Builder · Nightly Sensor QA</Lbl>
          <Col gap={7} style={{marginTop:10}}>
            {['Power rail check','IMU self-test','Comms loopback','Thermal sweep','Magnetometer cal'].map((s,i)=>(
              <div key={i} className="hf-card-2" style={{padding:'9px 11px',display:'flex',alignItems:'center',gap:9}}><span style={{color:'var(--text-mute)'}}>⠿</span><span style={{fontSize:12,color:'var(--text)',flex:1}}>{i+1}. {s}</span><span className="hf-label" style={{fontSize:11}}>✕</span></div>
            ))}
            <Btn variant="ghost" block style={{borderStyle:'dashed',marginTop:2}}>＋ Add step</Btn>
          </Col>
          <Row gap={8} align="center" style={{marginTop:14}}><Lbl>Next run</Lbl><Chip>Tonight 02:00</Chip></Row>
        </Card>
      </Row>
    </DesktopShell>
  );
}

/* ---------------- ACTIVITY LOG ---------------- */
function DActivity(){
  return (
    <DesktopShell active="Activity Log">
      <ScreenHead eyebrow="Local · timestamped" title="Activity Log" right={<Btn variant="ghost">⬇ Export CSV</Btn>}/>
      <Row gap={8} style={{marginBottom:12}}><Chip><Icon k="cal" size={12}/> Last 7 days</Chip><Chip>Device ▾</Chip><Chip>Action ▾</Chip><Chip>Operator ▾</Chip></Row>
      <div className="hf-card" style={{padding:'10px 13px',display:'flex',alignItems:'center',gap:9,borderStyle:'dashed',borderColor:'var(--line)',marginBottom:12}}>
        <AegisMark size={15} color="var(--taupe)" spin/><span className="hf-label" style={{fontSize:10,textTransform:'none',letterSpacing:0,color:'var(--text-dim)'}}>2 offline actions queued — will sync to org audit log on reconnect.</span>
      </div>
      <Card pad={0} style={{overflow:'hidden'}}>
        <table className="hf-tbl"><thead><tr><th style={{width:90}}>Time</th><th>Operator</th><th>Device</th><th>Action</th><th style={{width:110}}>Result</th></tr></thead>
        <tbody>{[['14:02:11','M. Operator','AC-3320','Calibration completed','ok','Pass'],['13:40:02','J. Reyes','AC-7740','Firmware v2.4.1','ok','OK'],['13:12:55','M. Operator','AC-7741','Diagnostic suite','crit','Fail'],['12:30:18','M. Operator','AC-9008','Config applied','maint','Queued'],['11:58:40','K. Vance','AC-3320','Profile edited','ok','OK']].map((r,i)=>(
          <tr key={i}><td><Mono style={{color:'var(--text-mute)'}}>{r[0]}</Mono></td><td style={{color:'var(--paper)'}}>{r[1]}</td><td><Mono style={{fontSize:11}}>{r[2]}</Mono></td><td style={{color:'var(--text)'}}>{r[3]}</td><td><Badge s={r[4]} label={r[5]}/></td></tr>
        ))}</tbody></table>
      </Card>
    </DesktopShell>
  );
}

/* ---------------- SETTINGS ---------------- */
function DSettings(){
  return (
    <DesktopShell active="Settings">
      <ScreenHead eyebrow="App preferences" title="Settings"/>
      <Row gap={16} align="flex-start">
        <SubNav items={['Connection','Profile','Appearance','License']} active="Connection" label="Settings"/>
        <Col gap={14} style={{flex:1,minWidth:0}}>
          <Card pad={16}><Lbl>Connection</Lbl><Col gap={11} style={{marginTop:12}}>
            <Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Default interface</span><Chip>USB ▾</Chip></Row>
            <Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Serial baud rate</span><Chip>115200 ▾</Chip></Row>
            <Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Network discovery</span><Toggle on/></Row>
            <Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Auto-connect on launch</span><Toggle on={false}/></Row>
          </Col></Card>
          <Row gap={14}>
            <Card pad={16} style={{flex:1}}><Lbl>Appearance</Lbl><Col gap={11} style={{marginTop:12}}><Seg items={['Light','Dark','System']} active="Dark"/><Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Density</span><Chip>Comfortable ▾</Chip></Row></Col></Card>
            <Card pad={16} style={{flex:1}}><Lbl>License</Lbl><Col gap={9} style={{marginTop:12}}><Row justify="space-between"><span className="hf-label">Key</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>•••• 7740</Mono></Row><Row justify="space-between"><span className="hf-label">Org</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>JSOC TF Alpha</Mono></Row><Btn variant="danger" block style={{marginTop:6}}>Sign Out</Btn></Col></Card>
          </Row>
        </Col>
      </Row>
    </DesktopShell>
  );
}

const DESK_SCREENS = {login:DLogin, dashboard:DDashboard, devices:DDevices, detail:DDetail, calibration:DCal, firmware:DFirmware, diagnostics:DDiag, config:DConfig, testsuites:DTests, activity:DActivity, settings:DSettings};
function HFDesktop({screen='calibration'}){ const C=DESK_SCREENS[screen]||DCal; return <C/>; }
window.HFDesktop = HFDesktop;