// artboard-variant-light.jsx — light theme variation of overview
const ArtboardLightVariant = () => {
  return (
    <div className="app" style={{
      "--bg-0": "oklch(0.985 0.003 250)",
      "--bg-1": "oklch(1 0 0)",
      "--bg-2": "oklch(0.97 0.005 250)",
      "--bg-3": "oklch(0.93 0.008 250)",
      "--fg-0": "oklch(0.20 0.018 250)",
      "--fg-1": "oklch(0.32 0.015 250)",
      "--fg-2": "oklch(0.50 0.015 250)",
      "--fg-3": "oklch(0.65 0.015 250)",
      "--border-1": "oklch(0.88 0.008 250 / 0.9)",
      "--border-2": "oklch(0.78 0.010 250 / 0.9)",
      "--accent": "oklch(0.62 0.150 175)",
      "--accent-soft": "oklch(0.62 0.150 175 / 0.10)"
    }}>
      <Sidebar active="map"/>
      <div style={{flex:1, display:"flex", flexDirection:"column", minWidth:0}}>
        <Topbar
          crumbs={["羚牛车辆数据中心", "实时监控", "总览"]}
          kpis={[
            { lbl:"在线", val:"487/512", delta:"95.1%", deltaUp:true },
            { lbl:"行驶", val:"312" },
            { lbl:"告警", val:"8", delta:"+2", deltaUp:false },
          ]}
        />
        <div style={{flex:1, display:"grid", gridTemplateColumns:"1fr 320px", minHeight:0}}>
          <div style={{position:"relative", background:"#eef0f2"}}>
            <FleetMap selectedId="浙F08638F" onSelect={()=>{}} variant="minimal"/>
          </div>
          <div style={{borderLeft:"1px solid var(--border-1)", background:"var(--bg-1)", padding:"14px 16px"}}>
            <div className="eyebrow" style={{marginBottom:6}}>当前选中</div>
            <div className="mono strong" style={{fontSize:18, fontWeight:600}}>浙F08638F</div>
            <div className="muted" style={{fontSize:11, marginTop:4}}>孙超 · 状态告警</div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginTop:12, fontSize:11}}>
              {[
                {l:"速度", v:"0", u:"km/h"},
                {l:"SOC", v:"9", u:"%"},
                {l:"H₂", v:"0.8", u:"MPa"},
                {l:"温度", v:"102", u:"°C"},
              ].map((k,i)=>(
                <div key={i} style={{padding:8, background:"var(--bg-2)", borderRadius:4, border:"1px solid var(--border-1)"}}>
                  <div className="muted" style={{fontSize:10}}>{k.l}</div>
                  <div><span className="mono strong" style={{fontSize:18}}>{k.v}</span><span className="muted mono" style={{fontSize:10, marginLeft:3}}>{k.u}</span></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.ArtboardLightVariant = ArtboardLightVariant;