// ============================================================
// hifi-kit.jsx — Aegis Cognis hi-fi shared kit (Dark Midnight)
// Exports brandmark, icons, instruments, components to window.
// ============================================================
const AC_PATH = "M174.7077175,174.7077175C260.3740201,89.041415,277.8868997,0,277.8868997,0c0,0,17.5128796,89.041415,103.1791821,174.7077175,85.6663025,85.6663025,174.7077175,103.1791822,174.7077175,103.1791822,0,0-89.041415,17.5128797-174.7077175,103.1791822-85.6663025,85.6663025-103.1791822,174.7077175-103.1791822,174.7077175,0,0-17.5128796-89.041415-103.1791821-174.7077175C89.041415,295.3997793,0,277.8868996,0,277.8868996c0,0,89.041415-17.5128796,174.7077175-103.1791821ZM2.9429571,277.8868996s118.9202846-4.2364362,199.0503317,75.8936109c80.1300471,80.1300471,75.8936108,199.0503317,75.8936108,199.0503317,0,0-4.2364362-118.9202847,75.8936109-199.0503317,80.1300471-80.1300471,199.0503317-75.8936108,199.0503317-75.8936108,0,0-118.9202847,4.2364362-199.0503317-75.8936109C273.6504634,121.8632417,277.8868997,2.9429571,277.8868997,2.9429571c0,0,4.2364362,118.9202847-75.8936109,199.0503317C121.8632417,282.1233359,2.9429571,277.8868997,2.9429571,277.8868996ZM403.8033618,277.8868997s-73.8180039-2.612771-98.5608475-27.3556146c-24.7428436-24.7428436-27.3556146-98.5608475-27.3556146-98.5608475,0,0-2.612771,73.8180039-27.3556146,98.5608475-24.7428436,24.7428436-98.5608475,27.3556146-98.5608475,27.3556146,0,0,73.8180039,2.612771,98.5608475,27.3556146,24.7428436,24.7428436,27.3556146,98.5608475,27.3556146,98.5608475,0,0,2.612771-73.8180039,27.3556146-98.5608475,24.7428436-24.7428436,98.5608475-27.3556146,98.5608475-27.3556146Z";

const AegisMark = ({size=24, color='var(--taupe)', glow=false, spin=false, style={}}) => (
  <svg width={size} height={size} viewBox="0 0 555.7738 555.7738" style={{filter:glow?`drop-shadow(0 0 8px ${color})`:'none',...style}} className={spin?'hf-spinarc':''}>
    <path d={AC_PATH} fill={color}/>
  </svg>
);

/* ---------- nav / ui icons (1.6 stroke, currentColor) ---------- */
const I = {
  grid:"M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  map:"M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2zM9 3v16M15 5v16",
  device:"M5 3h14v18H5zM9 7h6M9 11h6M10 17h4",
  pulse:"M3 12h4l2 6 4-14 2 8h6",
  bell:"M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6M10 21h4",
  report:"M6 3h9l5 5v13H6zM14 3v5h5M9 13h7M9 17h7",
  admin:"M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z",
  gear:"M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 2h-5l-.3 2.5a7 7 0 0 0-1.7 1l-2.4-1-2 3.5L2.6 11a7 7 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 1.7 1l.3 2.5h5l.3-2.5a7 7 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5a7 7 0 0 0 .1-1z",
  cal:"M12 3v4M5 8l3 2M19 8l-3 2M12 21a7 7 0 0 0 0-14 7 7 0 0 0 0 14zM12 11v3l2 1",
  chip:"M7 7h10v10H7zM4 9V8m0 4v-1m0 5v-1M20 9V8m0 4v-1m0 5v-1M9 4H8m4 0h-1m5 0h-1M9 20H8m4 0h-1m5 0h-1",
  flask:"M9 3h6M10 3v6l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3M7.5 14h9",
  list:"M4 6h16M4 12h16M4 18h16",
  bolt:"M13 2 4 14h7l-1 8 9-12h-7z",
  comms:"M4 5h16v11H8l-4 4z",
  shield:"M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z",
  home:"M4 11 12 4l8 7M6 10v10h12V10",
  search:"M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4",
  loc:"M12 22s7-6 7-12a7 7 0 0 0-14 0c0 6 7 12 7 12zM12 8a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z",
};
const Icon = ({k, size=18, sw=1.6, style={}}) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}><path d={I[k]||I.grid}/></svg>;

/* ---------- text helpers ---------- */
const Display = ({children, size=44, style={}}) => <div className="hf-display" style={{fontSize:size,...style}}>{children}</div>;
const Eyebrow = ({children, style={}}) => <div className="hf-eyebrow" style={style}>{children}</div>;
const Lbl = ({children, style={}}) => <div className="hf-label" style={style}>{children}</div>;
const Mono = ({children, style={}}) => <span className="hf-mono" style={style}>{children}</span>;

/* ---------- status ---------- */
const STATUS = {ok:'Healthy',warn:'Warning',crit:'Critical',off:'Offline',maint:'Maint'};
const Badge = ({s='ok', label, style={}}) => (
  <span className={'hf-badge st-'+s} style={style}><span className="hf-dot hf-dot--g" style={{background:'var(--c)'}}/>{label||STATUS[s]}</span>
);
const Dot = ({s='ok', glow=true, style={}}) => <span className={'hf-dot st-'+s+(glow?' hf-dot--g':'')} style={{background:'var(--c)',...style}}/>;
const Chip = ({children, style={}}) => <span className="hf-chip" style={style}>{children}</span>;
const Btn = ({variant, block, lg, children, style={}}) =>
  <span className={'hf-btn'+(variant?' hf-btn--'+variant:'')+(block?' hf-btn--block':'')+(lg?' hf-btn--lg':'')} style={style}>{children}</span>;

/* ---------- layout ---------- */
const Row = ({gap=12, wrap, align='stretch', justify, style={}, children}) =>
  <div style={{display:'flex',gap,flexWrap:wrap?'wrap':'nowrap',alignItems:align,justifyContent:justify,...style}}>{children}</div>;
const Col = ({gap=12, style={}, children}) => <div style={{display:'flex',flexDirection:'column',gap,...style}}>{children}</div>;
const Card = ({pad=16, glow, style={}, children}) => <div className={'hf-card'+(glow?' hf-glow':'')} style={{padding:pad,...style}}>{children}</div>;

/* ---------- instruments ---------- */
const Donut = ({size=140, segs=[['ok',181],['warn',42],['crit',12],['off',57]], center, sub}) => {
  const total = segs.reduce((a,b)=>a+b[1],0);
  const r=size/2-12, c=size/2, C=2*Math.PI*r; let acc=0;
  const col=s=>`var(--${s})`;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={c} cy={c} r={r} fill="none" stroke="var(--line-soft)" strokeWidth="11"/>
      {segs.map((sg,i)=>{const len=sg[1]/total*C;const el=
        <circle key={i} cx={c} cy={c} r={r} fill="none" stroke={col(sg[0])} strokeWidth="11"
          strokeDasharray={`${len-2} ${C-len+2}`} strokeDashoffset={-acc} strokeLinecap="round"
          transform={`rotate(-90 ${c} ${c})`} style={{filter:`drop-shadow(0 0 5px color-mix(in srgb, ${col(sg[0])} 60%, transparent))`}}/>;
        acc+=len;return el;})}
      <text x={c} y={c-2} textAnchor="middle" fontFamily="var(--display)" fontSize={size*0.30} fill="var(--paper)" style={{textTransform:'uppercase'}}>{center}</text>
      <text x={c} y={c+size*0.13} textAnchor="middle" fontFamily="var(--narrow)" fontSize="10" letterSpacing="2" fill="var(--text-mute)">{sub}</text>
    </svg>
  );
};
const Spark = ({w=120, h=34, color='var(--taupe)', fill=true, seed=0}) => {
  const data=[6,10,7,13,9,15,11,9,16,13,19,15,22,18,25,21,24,28];
  const pts=data.map((v,i)=>[(i/(data.length-1))*w, h-((v+seed)/32)*h]);
  const line=pts.map(p=>p.join(',')).join(' ');
  const area=`0,${h} `+line+` ${w},${h}`;
  const id='sp'+Math.random().toString(36).slice(2,7);
  return <svg width={w} height={h}>
    {fill&&<defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={color} stopOpacity="0.28"/><stop offset="1" stopColor={color} stopOpacity="0"/></linearGradient></defs>}
    {fill&&<polygon points={area} fill={`url(#${id})`}/>}
    <polyline points={line} fill="none" stroke={color} strokeWidth="1.6"/>
  </svg>;
};
const Gauge = ({size=150, pct=0.68, label, value='68%'}) => {
  const r=size/2-14, c=size/2, C=Math.PI*r;
  return <svg width={size} height={size*0.62} viewBox={`0 0 ${size} ${size*0.62}`}>
    <path d={`M14 ${c} A ${r} ${r} 0 0 1 ${size-14} ${c}`} fill="none" stroke="var(--line-soft)" strokeWidth="11" strokeLinecap="round"/>
    <path d={`M14 ${c} A ${r} ${r} 0 0 1 ${size-14} ${c}`} fill="none" stroke="var(--ok)" strokeWidth="11" strokeLinecap="round"
      strokeDasharray={`${C*pct} ${C}`} style={{filter:'drop-shadow(0 0 6px color-mix(in srgb,var(--ok) 70%, transparent))'}}/>
    <text x={c} y={c-4} textAnchor="middle" fontFamily="var(--display)" fontSize={size*0.22} fill="var(--paper)">{value}</text>
    {label&&<text x={c} y={c+12} textAnchor="middle" fontFamily="var(--narrow)" fontSize="10" letterSpacing="1.5" fill="var(--text-mute)" style={{textTransform:'uppercase'}}>{label}</text>}
  </svg>;
};
const Wave = ({w=300, h=120, lines=[['ok',1.0],['taupe',1.7],['maint',2.4]], grid=true}) => {
  const mk=(seed,amp)=>Array.from({length:80}).map((_,i)=>{
    const x=(i/79)*w; const y=h/2+Math.sin(i*0.5+seed)*Math.cos(i*0.17+seed*1.3)*(h*0.30*amp%1+0.4)*(h*0.34);
    return `${x.toFixed(1)},${(h/2+Math.sin(i*0.5+seed)*Math.cos(i*0.19+seed)*h*0.32).toFixed(1)}`;
  }).join(' ');
  return <svg width={w} height={h} style={{display:'block'}}>
    {grid&&Array.from({length:6}).map((_,i)=><line key={'h'+i} x1="0" y1={i*h/5} x2={w} y2={i*h/5} stroke="var(--line-soft)" strokeWidth="0.5"/>)}
    {grid&&Array.from({length:10}).map((_,i)=><line key={'v'+i} x1={i*w/9} y1="0" x2={i*w/9} y2={h} stroke="var(--line-soft)" strokeWidth="0.5"/>)}
    {lines.map((ln,i)=><polyline key={i} points={mk(i*1.7+0.5,ln[1])} fill="none" stroke={`var(--${ln[0]})`} strokeWidth="1.5" opacity="0.92" style={{filter:`drop-shadow(0 0 4px color-mix(in srgb,var(--${ln[0]}) 60%, transparent))`}}/>)}
  </svg>;
};
const Ring = ({size=34, pct=0.7, s='ok', track='var(--line-soft)'}) => {
  const r=size/2-3.5, c=size/2, C=2*Math.PI*r;
  return <svg width={size} height={size}><circle cx={c} cy={c} r={r} fill="none" stroke={track} strokeWidth="3.5"/>
    <circle cx={c} cy={c} r={r} fill="none" stroke={`var(--${s})`} strokeWidth="3.5" strokeDasharray={`${pct*C} ${C}`} strokeLinecap="round" transform={`rotate(-90 ${c} ${c})`} style={{filter:`drop-shadow(0 0 4px color-mix(in srgb,var(--${s}) 60%,transparent))`}}/></svg>;
};
const Bars = ({n=4, active=3}) => <span style={{display:'inline-flex',alignItems:'flex-end',gap:2,height:16}}>{[6,9,13,16].map((b,i)=><span key={i} style={{width:3,height:b,borderRadius:1,background:i<active?'var(--taupe)':'var(--line)'}}/>)}</span>;

/* ---------- map ---------- */
const MapField = ({h=300, pins=[['ok','28%','30%'],['warn','58%','44%'],['crit','46%','64%'],['off','74%','56%'],['ok','22%','72%'],['ok','66%','24%']], watermark}) => (
  <div style={{position:'relative',height:h,background:'radial-gradient(120% 120% at 50% 0%, #0A1A38 0%, #02091C 100%)',overflow:'hidden'}}>
    <div className="hf-grid-bg" style={{position:'absolute',inset:0,opacity:.5}}/>
    {watermark&&<div style={{position:'absolute',right:18,bottom:14,opacity:.10}}><AegisMark size={150} color="var(--taupe)"/></div>}
    {pins.map((p,i)=>(
      <span key={i} style={{position:'absolute',left:p[1],top:p[2],transform:'translate(-50%,-50%)'}}>
        <span style={{display:'block',width:11,height:11,borderRadius:'50%',background:`var(--${p[0]})`,boxShadow:`0 0 0 4px color-mix(in srgb,var(--${p[0]}) 22%, transparent), 0 0 12px var(--${p[0]})`}}/>
      </span>
    ))}
  </div>
);

Object.assign(window, {
  AegisMark, Icon, I, Display, Eyebrow, Lbl, Mono, STATUS,
  Badge, Dot, Chip, Btn, Row, Col, Card,
  Donut, Spark, Gauge, Wave, Ring, Bars, MapField
});