/* icons.jsx — lightweight inline SVG icon set (1.7px stroke, rounded) */
function Icon({ name, size = 18, style, strokeWidth = 1.75, className }) {
  const p = ICONS[name] || "";
  const fill = FILLED[name];
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill={fill ? "currentColor" : "none"}
      stroke={fill ? "none" : "currentColor"} strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, ...style }}
      dangerouslySetInnerHTML={{ __html: p }} />
  );
}
const FILLED = { star: true };
const ICONS = {
  user: '<circle cx="12" cy="8" r="4"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0"/>',
  doc: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13h7M8.5 16.5h7"/>',
  briefcase: '<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/>',
  cap: '<path d="M22 9 12 4 2 9l10 5 10-5Z"/><path d="M6 11v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5"/>',
  sparkle: '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/>',
  folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
  award: '<circle cx="12" cy="9" r="5"/><path d="M9 13.5 7.5 21 12 18.5 16.5 21 15 13.5"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  trash: '<path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6"/>',
  chev: '<path d="m6 9 6 6 6-6"/>',
  chevR: '<path d="m9 6 6 6-6 6"/>',
  grip: '<circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/>',
  x: '<path d="M18 6 6 18M6 6l12 12"/>',
  download: '<path d="M12 3v12M7 11l5 5 5-5M5 21h14"/>',
  eye: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
  zoomin: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5M11 8v6M8 11h6"/>',
  zoomout: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5M8 11h6"/>',
  layout: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/>',
  check: '<path d="m5 12 5 5L20 7"/>',
  minus: '<path d="M5 12h14"/>',
  alert: '<path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/>',
  bolt: '<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>',
  copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>',
  grid: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
  target: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/>',
  arrowL: '<path d="M19 12H5M11 18l-6-6 6-6"/>',
  share: '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5 8.6 10.5"/>',
  text: '<path d="M4 7V5h16v2M9 19h6M12 5v14"/>',
  image: '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/>',
  upload: '<path d="M12 16V4M8 8l4-4 4 4M5 20h14"/>',
  palette: '<path d="M12 3a9 9 0 0 0 0 18c1.3 0 2-1 2-2 0-1.2-1-1.5-1-2.5 0-.8.7-1.5 1.5-1.5H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8Z"/><circle cx="7.5" cy="11" r="1"/><circle cx="11" cy="7.5" r="1"/><circle cx="15.5" cy="9" r="1"/>',
  mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/>',
  phone: '<path d="M6.5 3h3l1.5 4.5L9 9a12 12 0 0 0 6 6l1.5-2.5 4.5 1.5v3a2 2 0 0 1-2 2A17 17 0 0 1 4.5 5a2 2 0 0 1 2-2Z"/>',
  pin: '<path d="M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/>',
  globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/>',
  link: '<path d="M9.5 14.5l5-5M10.5 6.5l1-1a4 4 0 0 1 6 6l-1 1M13.5 17.5l-1 1a4 4 0 0 1-6-6l1-1"/>',
  calendar: '<rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/>',
  home:     '<path d="M3 12L12 3l9 9"/><path d="M5 10v10a1 1 0 0 0 1 1h4v-5h4v5h4a1 1 0 0 0 1-1V10"/>',
  undo:     '<path d="M3 7h10a5 5 0 0 1 0 10H8"/><path d="M3 7l4-4M3 7l4 4"/>',
  redo:     '<path d="M21 7H11a5 5 0 0 0 0 10h5"/><path d="M21 7l-4-4M21 7l-4 4"/>',
  letter:   '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6M3 15l4.5-3M21 15l-4.5-3"/>',
  export:   '<path d="M12 3v9M7 8l5-5 5 5M19 15v3a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3"/>',
  import:   '<path d="M12 16V7M7 12l5 5 5-5M19 21H5"/>',
  keyboard: '<rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M8 14h8"/>',
  lock:     '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
  star:     '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
  signout:  '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>',
  key:      '<circle cx="7.5" cy="15.5" r="4.5"/><path d="M22 8.5H12.5M17.5 8.5v3"/>',
  pen:      '<path d="M17 3a2.8 2.8 0 0 1 4 4L7 21l-4 1 1-4Z"/>',
  chart:    '<path d="M4 20V12M9 20V8M14 20V4M19 20v-8"/>',
  // Pencil with motion lines + sparkle — "AI writing"
  writeai:  '<path d="M14.5 6.5 17 4a2.1 2.1 0 0 1 3 3l-2.5 2.5M14.5 6.5 6 15l-1.5 4.5L9 18l8.5-8.5M14.5 6.5 17.5 9.5"/><path d="M3 7h5M3.5 11h4"/><path d="M19 14.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z"/>',
  // Two overlapping coins/tokens — "credits"
  credits:  '<circle cx="8.5" cy="8.5" r="5"/><path d="M10 5.7 A3 3 0 1 0 5.7 10"/><circle cx="15.5" cy="15.5" r="5"/><path d="M17 12.7 A3 3 0 1 0 12.7 17"/>',
  // Gear with a person inside — "recruitment / candidate screening"
  recruit:  '<circle cx="12" cy="11.5" r="5.8"/><path d="M18 11.5h1.9M16.5 7 17.9 5.6M12 5.7V3.8M7.5 7 6.1 5.6M6 11.5H4.1M7.5 16 6.1 17.4M12 17.3v1.9M16.5 16 17.9 17.4"/><circle cx="12" cy="10" r="1.8"/><path d="M8.9 15a3.2 3.2 0 0 1 6.2 0"/>',
  // Hand holding a stack of coins — "salary"
  salary:   '<ellipse cx="13" cy="5" rx="3.3" ry="1.3"/><path d="M9.7 5v3.3c0 .72 1.48 1.3 3.3 1.3s3.3-.58 3.3-1.3V5"/><path d="M9.7 6.65c0 .72 1.48 1.3 3.3 1.3s3.3-.58 3.3-1.3"/><path d="M3 13.4c.85-.55 1.95-.35 2.7.25l2.1 1.65c.5.4 1.12.6 1.75.6H16a1.45 1.45 0 0 0 0-2.9h-4"/><path d="M2 12.5 4 13.5 4 18.5 2 17.5Z"/>',
};
window.Icon = Icon;

/* RobotFace — friendly AI robot mascot (white head + dark eyes + antennae).
   variant "light" = white robot for colored/gradient backgrounds;
   variant "brand" = blue robot for light backgrounds. */
function RobotFace({ size = 20, variant = "light", style, className }) {
  const head = variant === "brand" ? "#1C9BE6" : "#fff";
  const eye  = variant === "brand" ? "#fff"    : "#0B2C46";
  const acc  = variant === "brand" ? "#1C9BE6" : "#fff";
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
      style={{ flexShrink: 0, display: "block", ...style }}>
      <g stroke={acc} strokeWidth="1.4" strokeLinecap="round">
        <line x1="9.2" y1="6.6" x2="8" y2="3.9" />
        <line x1="14.8" y1="6.6" x2="16" y2="3.9" />
      </g>
      <circle cx="7.7" cy="3.3" r="1.15" fill={acc} />
      <circle cx="16.3" cy="3.3" r="1.15" fill={acc} />
      <rect x="4.3" y="6.2" width="15.4" height="12.4" rx="5.6" fill={head} />
      <ellipse cx="9.6" cy="12.3" rx="1.65" ry="2.2" fill={eye} />
      <ellipse cx="14.4" cy="12.3" rx="1.65" ry="2.2" fill={eye} />
    </svg>
  );
}
window.RobotFace = RobotFace;