// ============================================================
// hifi-system.jsx — Design System spec boards (foundation / components)
// ============================================================
function Swatch({name, hex, note, dark}){
  return (
    <div style={{flex:'1 1 0',minWidth:0}}>
      <div style={{height:54,borderRadius:8,background:hex,border:'1px solid var(--line-soft)'}}/>
      <div style={{marginTop:7,fontFamily:'var(--narrow)',fontWeight:600,fontSize:11,letterSpacing:'.04em',color:'var(--text)'}}>{name}</div>
      <div className="hf-mono" style={{fontSize:10,color:'var(--text-mute)'}}>{hex}</div>
      {note&&<div style={{fontSize:9.5,color:'var(--text-mute)',fontFamily:'var(--narrow)',letterSpacing:'.04em',marginTop:1}}>{note}</div>}
    </div>
  );
}
function Block({title, children, style={}}){
  return <div style={{...style}}>
    <Lbl style={{marginBottom:11}}>{title}</Lbl>
    {children}
  </div>;
}

function Foundation(){
  return (
    <div className="hf-app" style={{height:'100%',padding:'30px 32px',overflow:'hidden',display:'flex',flexDirection:'column',gap:22}}>
      <Row justify="space-between" align="flex-start">
        <div>
          <Eyebrow>Aegis Cognis · Design System</Eyebrow>
          <Display size={46} style={{marginTop:8}}>Dark Midnight</Display>
          <div className="hf-dim" style={{fontSize:13,marginTop:8,maxWidth:430,lineHeight:1.5}}>Operating at the edge of visible light. Near-black navy carries institutional weight; warm taupe is the glow of an instrument display; red is reserved for alarms.</div>
        </div>
        <div style={{textAlign:'center'}}>
          <AegisMark size={92} color="var(--taupe)" glow/>
          <div className="hf-mono" style={{fontSize:9,color:'var(--text-mute)',marginTop:8,letterSpacing:'.1em'}}>BRANDMARK</div>
        </div>
      </Row>

      <Block title="Core Palette">
        <Row gap={10}>
          <Swatch name="Void Navy" hex="#000E26" note="base"/>
          <Swatch name="Royal Navy" hex="#182A5B" note="chrome"/>
          <Swatch name="Taupe Glow" hex="#BFA090" note="accent"/>
          <Swatch name="Cool Gray" hex="#C1C5D0" note="dim text"/>
          <Swatch name="Paper" hex="#EEE9E9" note="text"/>
          <Swatch name="Alert Red" hex="#CC1512" note="alarm only"/>
        </Row>
      </Block>

      <Block title="Status — brand-tuned & desaturated">
        <Row gap={10}>
          {[['ok','Healthy','#5BA37F'],['warn','Warning','#CBA253'],['crit','Critical','#E23B33'],['off','Offline','#586278'],['maint','Maint','#5E84B3']].map((s,i)=>(
            <div key={i} style={{flex:1}}>
              <div style={{height:40,borderRadius:8,background:`color-mix(in srgb, ${s[2]} 16%, var(--panel-1))`,border:`1px solid color-mix(in srgb, ${s[2]} 45%, transparent)`,display:'flex',alignItems:'center',justifyContent:'center',gap:7}}>
                <span className="hf-dot" style={{background:s[2],boxShadow:`0 0 8px ${s[2]}`}}/>
                <span style={{fontFamily:'var(--narrow)',fontWeight:600,fontSize:11,textTransform:'uppercase',letterSpacing:'.06em',color:s[2]}}>{s[1]}</span>
              </div>
              <div className="hf-mono" style={{fontSize:9.5,color:'var(--text-mute)',marginTop:5,textAlign:'center'}}>{s[2]}</div>
            </div>
          ))}
        </Row>
      </Block>

      <Block title="Typography" style={{flex:1}}>
        <Row gap={20} align="stretch">
          <Card pad={18} style={{flex:1}}>
            <div className="hf-mono" style={{fontSize:10,color:'var(--taupe)',marginBottom:4}}>TEKO · display</div>
            <Display size={52} style={{lineHeight:.85}}>248 Active</Display>
            <div style={{height:1,background:'var(--line-soft)',margin:'16px 0'}}/>
            <div className="hf-mono" style={{fontSize:10,color:'var(--taupe)',marginBottom:6}}>ARCHIVO · interface</div>
            <div className="hf-h1" style={{fontSize:22,color:'var(--paper)'}}>Command Dashboard</div>
            <div style={{fontSize:13,color:'var(--text-dim)',marginTop:6,lineHeight:1.5}}>Body copy in Archivo Regular. Mission-critical clarity with minimal cognitive load for operators in high-stakes field environments.</div>
            <div className="hf-label" style={{marginTop:10}}>Archivo Narrow · labels &amp; overlines</div>
          </Card>
          <Card pad={18} style={{width:230}}>
            <div className="hf-mono" style={{fontSize:10,color:'var(--taupe)',marginBottom:8}}>JETBRAINS MONO · data</div>
            <Col gap={9}>
              {[['SN','7740-AC-22'],['LAT','34.0522'],['LON','-118.2437'],['FW','v2.4.1'],['µT','0.42']].map((r,i)=>(
                <Row key={i} justify="space-between"><span className="hf-label">{r[0]}</span><Mono style={{fontSize:13,color:'var(--paper)'}}>{r[1]}</Mono></Row>
              ))}
            </Col>
          </Card>
        </Row>
      </Block>
    </div>
  );
}

function Components(){
  return (
    <div className="hf-app" style={{height:'100%',padding:'30px 32px',overflow:'hidden',display:'flex',flexDirection:'column',gap:20}}>
      <div>
        <Eyebrow>Aegis Cognis · Design System</Eyebrow>
        <Display size={40} style={{marginTop:8}}>Components &amp; Instruments</Display>
      </div>

      <Row gap={20} align="stretch">
        <Block title="Buttons" style={{flex:1}}>
          <Col gap={9}>
            <Row gap={9}><Btn variant="primary">Primary</Btn><Btn variant="accent">Accent</Btn><Btn>Default</Btn></Row>
            <Row gap={9}><Btn variant="ghost">Ghost</Btn><Btn variant="danger">Destructive</Btn><Btn style={{opacity:.4}}>Disabled</Btn></Row>
          </Col>
          <Lbl style={{margin:'16px 0 9px'}}>Badges</Lbl>
          <Row gap={7} wrap>
            <Badge s="ok"/><Badge s="warn"/><Badge s="crit"/><Badge s="off"/><Badge s="maint"/>
          </Row>
          <Lbl style={{margin:'16px 0 9px'}}>Input states</Lbl>
          <Col gap={8}>
            <div style={{height:34,borderRadius:8,background:'var(--void)',border:'1px solid var(--line)',display:'flex',alignItems:'center',padding:'0 11px'}}><Mono style={{fontSize:12,color:'var(--text-mute)'}}>Default field</Mono></div>
            <div style={{height:34,borderRadius:8,background:'var(--void)',border:'2px solid var(--maint)',display:'flex',alignItems:'center',padding:'0 11px',boxShadow:'0 0 0 3px color-mix(in srgb,var(--maint) 22%,transparent)'}}><Mono style={{fontSize:12,color:'var(--paper)'}}>Focused</Mono></div>
            <div style={{height:34,borderRadius:8,background:'var(--void)',border:'2px solid var(--crit)',display:'flex',alignItems:'center',padding:'0 11px'}}><Mono style={{fontSize:12,color:'var(--crit)'}}>Error · invalid serial</Mono></div>
          </Col>
        </Block>

        <Block title="Device Card" style={{width:250}}>
          <Card pad={14}>
            <Row justify="space-between" align="flex-start">
              <Row gap={10} align="center">
                <div style={{width:38,height:38,borderRadius:9,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)'}}><Icon k="device" size={19}/></div>
                <div><div style={{fontFamily:'var(--mono)',fontSize:13,color:'var(--paper)'}}>AC-7740</div><div className="hf-label">Sensor · Bravo</div></div>
              </Row>
              <Badge s="ok"/>
            </Row>
            <Row gap={10} style={{marginTop:14}} align="center">
              <Ring size={42} pct={.9} s="ok"/>
              <div style={{flex:1}}>
                <Row justify="space-between"><span className="hf-label">Battery</span><Mono style={{fontSize:11,color:'var(--paper)'}}>90%</Mono></Row>
                <Row justify="space-between" style={{marginTop:4}}><span className="hf-label">Signal</span><Bars/></Row>
                <Row justify="space-between" style={{marginTop:4}}><span className="hf-label">Cal</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>12d ago</Mono></Row>
              </div>
            </Row>
          </Card>
          <div style={{marginTop:12}}>
            <Lbl style={{marginBottom:8}}>Classification</Lbl>
            <div className="hf-cui" style={{borderRadius:7,border:'1px solid #2A2008'}}><span className="pin"/>CONTROLLED UNCLASSIFIED INFORMATION</div>
          </div>
        </Block>

        <Block title="Instruments" style={{flex:1}}>
          <Row gap={12} align="center" justify="space-around">
            <div style={{textAlign:'center'}}><Donut size={120} center="248" sub="ACTIVE"/></div>
            <div style={{textAlign:'center'}}><Gauge size={130} label="In-spec" value="68%"/></div>
          </Row>
          <div className="hf-inset" style={{padding:10,marginTop:8}}>
            <Wave w={300} h={92}/>
            <div className="hf-mono" style={{fontSize:9,color:'var(--text-mute)',marginTop:4,letterSpacing:'.1em'}}>IMU WAVEFORM · ACCEL+GYRO</div>
          </div>
        </Block>
      </Row>

      <Block title="Brandmark in use — nav · loader · empty state">
        <Row gap={14}>
          <Card pad={0} style={{flex:1,overflow:'hidden'}}>
            <div className="hf-brand" style={{padding:'14px 16px'}}>
              <AegisMark size={26} color="var(--taupe)"/>
              <div className="hf-wordmark">Aegis Cognis<small>HARDWARE OPS</small></div>
            </div>
          </Card>
          <Card pad={16} style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',gap:12}}>
            <AegisMark size={30} color="var(--taupe)" spin/>
            <span className="hf-label" style={{color:'var(--text-dim)'}}>Syncing fleet…</span>
          </Card>
          <Card pad={16} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6}}>
            <AegisMark size={34} color="var(--taupe-dim)"/>
            <span className="hf-label" style={{color:'var(--text-mute)'}}>No devices connected</span>
          </Card>
        </Row>
      </Block>
    </div>
  );
}

function HFSystem({part}){ return part==='components' ? <Components/> : <Foundation/>; }
window.HFSystem = HFSystem;