/* ============================================================
   icons.jsx — custom SVG icon set + emoji glyph wrapper
   ============================================================ */

const Ic = ({ d, size=16, stroke=1.7, fill='none', children }) => (
  <svg className="ic" width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {d ? <path d={d} /> : children}
  </svg>
);

const ICONS = {
  today:    (p) => <Ic {...p}><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17"/><path d="M8 3.5v3"/><path d="M16 3.5v3"/><circle cx="12" cy="14.5" r="1.4" fill="currentColor" stroke="none"/></Ic>,
  team:     (p) => <Ic {...p}><circle cx="9" cy="9" r="3.2"/><path d="M3 19c.6-2.8 3-4.8 6-4.8s5.4 2 6 4.8"/><circle cx="17" cy="8" r="2.4"/><path d="M16 14c2 .2 3.6 1.4 4.5 3"/></Ic>,
  pto:      (p) => <Ic {...p}><path d="M3 18c0-3 3-5 6-5s6 2 6 5"/><circle cx="9" cy="9" r="3"/><path d="M17 5l4 4-2 2-4-4z"/><path d="M19 11v6"/></Ic>,
  building: (p) => <Ic {...p}><rect x="4" y="3.5" width="16" height="17" rx="1.5"/><path d="M9 8h2M13 8h2M9 12h2M13 12h2M9 16h2M13 16h2"/></Ic>,
  door:     (p) => <Ic {...p}><path d="M5 21V4a1 1 0 0 1 1-1h11l2 1.5V21"/><path d="M5 21h14"/><circle cx="14.5" cy="12.5" r=".8" fill="currentColor" stroke="none"/></Ic>,
  chart:    (p) => <Ic {...p}><path d="M4 20V8"/><path d="M10 20V4"/><path d="M16 20v-8"/><path d="M22 20H3"/></Ic>,
  search:   (p) => <Ic {...p}><circle cx="10.5" cy="10.5" r="6.5"/><path d="m20 20-4.4-4.4"/></Ic>,
  ai:       (p) => <Ic {...p}><path d="M12 3v3"/><path d="M12 18v3"/><path d="M3 12h3"/><path d="M18 12h3"/><rect x="7" y="7" width="10" height="10" rx="2.5"/><circle cx="10" cy="11" r=".9" fill="currentColor" stroke="none"/><circle cx="14" cy="11" r=".9" fill="currentColor" stroke="none"/><path d="M10 14.5h4"/></Ic>,
  plug:     (p) => <Ic {...p}><path d="M9 3v5"/><path d="M15 3v5"/><path d="M7 8h10v3a5 5 0 0 1-5 5h0a5 5 0 0 1-5-5V8z"/><path d="M12 16v5"/></Ic>,
  report:   (p) => <Ic {...p}><path d="M6 3.5h9l4 4V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1z"/><path d="M14 3.5V8h5"/><path d="M8 13h8M8 17h5"/></Ic>,
  msg:      (p) => <Ic {...p}><path d="M4 5.5h16v10H10l-4 4v-4H4v-10z"/><path d="M8 9.5h8M8 12.5h5"/></Ic>,
  server:   (p) => <Ic {...p}><rect x="3.5" y="4" width="17" height="6" rx="1.5"/><rect x="3.5" y="14" width="17" height="6" rx="1.5"/><circle cx="7" cy="7" r=".8" fill="currentColor" stroke="none"/><circle cx="7" cy="17" r=".8" fill="currentColor" stroke="none"/><path d="M11 7h6M11 17h6"/></Ic>,
  audit:    (p) => <Ic {...p}><path d="M9 4h7l4 4v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1"/><circle cx="6.5" cy="11.5" r="3"/><path d="m4.4 13.6-2 2.4"/><path d="M14 4v4h4"/></Ic>,
  bell:     (p) => <Ic {...p}><path d="M5 16V11a7 7 0 1 1 14 0v5l1.5 2H3.5L5 16z"/><path d="M10 20a2 2 0 0 0 4 0"/></Ic>,
  qr:       (p) => <Ic {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM17 17h3v3h-3zM14 17v3"/></Ic>,
  cmd:      (p) => <Ic {...p}><path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6z"/></Ic>,
  sun:      (p) => <Ic {...p}><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M5 5l1.5 1.5M17.5 17.5L19 19M3 12h2M19 12h2M5 19l1.5-1.5M17.5 6.5L19 5"/></Ic>,
  moon:     (p) => <Ic {...p}><path d="M20.5 14a8 8 0 1 1-10.5-10A6 6 0 0 0 20.5 14z"/></Ic>,
  filter:   (p) => <Ic {...p}><path d="M4 5h16l-6 8v6l-4-2v-4z"/></Ic>,
  download: (p) => <Ic {...p}><path d="M12 4v12"/><path d="m7 11 5 5 5-5"/><path d="M5 20h14"/></Ic>,
  refresh:  (p) => <Ic {...p}><path d="M4 12a8 8 0 0 1 14-5.3"/><path d="M20 12a8 8 0 0 1-14 5.3"/><path d="M18 3v4h-4"/><path d="M6 21v-4h4"/></Ic>,
  arrowR:   (p) => <Ic {...p}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></Ic>,
  arrowL:   (p) => <Ic {...p}><path d="M19 12H5"/><path d="m11 18-6-6 6-6"/></Ic>,
  caret:    (p) => <Ic {...p}><path d="m6 9 6 6 6-6"/></Ic>,
  chevron:  (p) => <Ic {...p}><path d="m6 9 6 6 6-6"/></Ic>,
  caretUp:  (p) => <Ic {...p}><path d="m6 15 6-6 6 6"/></Ic>,
  check:    (p) => <Ic {...p}><path d="m5 12 4 4L19 6"/></Ic>,
  x:        (p) => <Ic {...p}><path d="M6 6 18 18M18 6 6 18"/></Ic>,
  plus:     (p) => <Ic {...p}><path d="M12 5v14M5 12h14"/></Ic>,
  edit:     (p) => <Ic {...p}><path d="M4 20h4l11-11-4-4-11 11v4z"/><path d="m13 6 4 4"/></Ic>,
  trash:    (p) => <Ic {...p}><path d="M5 7h14"/><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/><path d="M6 7v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7"/><path d="M10 11v6M14 11v6"/></Ic>,
  send:     (p) => <Ic {...p}><path d="m4 4 17 8-17 8 4-8-4-8z"/></Ic>,
  sparkle:  (p) => <Ic {...p}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z"/><path d="M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8L19 16z"/></Ic>,
  alert:    (p) => <Ic {...p}><path d="M12 4 2.5 20h19L12 4z"/><path d="M12 10v4"/><circle cx="12" cy="17" r=".9" fill="currentColor" stroke="none"/></Ic>,
  clock:    (p) => <Ic {...p}><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></Ic>,
  cog:      (p) => <Ic {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 12c0 .5-.1 1-.2 1.5l2 1.5-2 3.5-2.4-1c-.7.6-1.6 1-2.5 1.3l-.4 2.5h-4l-.4-2.5c-1-.3-1.8-.7-2.5-1.3l-2.4 1-2-3.5 2-1.5c-.1-.5-.2-1-.2-1.5s.1-1 .2-1.5l-2-1.5 2-3.5 2.4 1c.7-.6 1.6-1 2.5-1.3L10 3h4l.4 2.5c1 .3 1.8.7 2.5 1.3l2.4-1 2 3.5-2 1.5c.1.5.2 1 .2 1.5z"/></Ic>,
  expand:   (p) => <Ic {...p}><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></Ic>,
  shrink:   (p) => <Ic {...p}><path d="M9 3v6H3"/><path d="M15 21v-6h6"/><path d="M3 9l7-7"/><path d="M21 15l-7 7"/></Ic>,
  signout:  (p) => <Ic {...p}><path d="M9 5H4v14h5"/><path d="m16 8 4 4-4 4"/><path d="M9 12h11"/></Ic>,
  user:     (p) => <Ic {...p}><circle cx="12" cy="8.5" r="3.5"/><path d="M4.5 20c1-3.6 4-5.5 7.5-5.5s6.5 1.9 7.5 5.5"/></Ic>,
  pulse:    (p) => <Ic {...p}><path d="M3 12h4l2-5 4 10 2-5h6"/></Ic>,
  info:     (p) => <Ic {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v1"/><path d="M12 11v5"/></Ic>,
  book:     (p) => <Ic {...p}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></Ic>,
  list:     (p) => <Ic {...p}><path d="M4 6h16M4 12h16M4 18h16"/></Ic>,
  grid:     (p) => <Ic {...p}><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></Ic>,
  sliders:  (p) => <Ic {...p}><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/><circle cx="8" cy="6" r="2" fill="var(--bg)" strokeWidth={1.7}/><circle cx="16" cy="12" r="2" fill="var(--bg)" strokeWidth={1.7}/><circle cx="10" cy="18" r="2" fill="var(--bg)" strokeWidth={1.7}/></Ic>,
  mic:      (p) => <Ic {...p}><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/><path d="M9 21h6"/></Ic>,
};

function Icon({ name, size=16, ...rest }) {
  const I = ICONS[name];
  if (!I) return <span style={{ fontSize: size, lineHeight: 1 }}>{name}</span>;
  return <I size={size} {...rest} />;
}

window.Icon = Icon;
window.ICONS = ICONS;

/* ============================================================
   Brand glyph + wordmark
   ============================================================ */
function StatusGlyph({ size = 28 }) {
  // Stylized "S" + pulse — formed by two arcs
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <rect x="0" y="0" width="32" height="32" rx="7" fill="currentColor" />
      <path
        d="M22 11c-.7-1.7-2.6-3-5-3-3 0-5.2 1.8-5.2 4.2 0 2 1.5 3.1 4.4 3.7l1.6.3c2.6.5 3.7 1.5 3.7 3.4 0 2.5-2.2 4.4-5.4 4.4-2.7 0-4.7-1.3-5.4-3.2"
        stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
      />
      <circle cx="22" cy="11" r="2.2" fill="#16a34a" stroke="white" strokeWidth="1.4" />
    </svg>
  );
}
window.StatusGlyph = StatusGlyph;

function StatusWordmark({ size = 14 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4, fontFamily: "var(--font-sans)" }}>
      <span style={{ fontWeight: 600, fontSize: size, letterSpacing: '-0.02em' }}>status</span>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: size - 3, color: 'var(--text-3)' }}>/k9</span>
    </span>
  );
}
window.StatusWordmark = StatusWordmark;
