// Reusable icon set and small SVG components for Horos

// Estilo dos ícones (2026-10-04, pedido do usuário: "todos bonitos assim como os da tela de Automações"):
// duas camadas — o corpo do ícone com preenchimento suave na cor do traço (D, 18%) + traço 1.7.
// Traços soltos (setas, +, ×, ✓) ficam só no traço. Ícone novo → marcar a forma principal com {...ICON_FILL}.
const ICON_FILL = { fill: 'currentColor', fillOpacity: 0.18 };
const ICON_DOT = { fill: 'currentColor', stroke: 'none' };

const I = {
  // Navegação
  home: <path d="M3.5 10.6 12 3.5l8.5 7.1V19a1.5 1.5 0 0 1-1.5 1.5h-4v-5.5h-6v5.5H5A1.5 1.5 0 0 1 3.5 19Z" {...ICON_FILL} />,
  crm: <g><rect x="3" y="4" width="5" height="16" rx="1.6" {...ICON_FILL} /><rect x="10" y="4" width="5" height="11" rx="1.6" {...ICON_FILL} /><rect x="17" y="4" width="4" height="7" rx="1.6" {...ICON_FILL} /></g>,
  clients: <g><circle cx="9" cy="8" r="3.2" {...ICON_FILL} /><path d="M3 20c.3-3 2.8-5 6-5s5.7 2 6 5Z" {...ICON_FILL} /><circle cx="17" cy="9" r="2.4" /><path d="M15.2 15.4c.6-.3 1.2-.4 1.8-.4 2.4 0 4.3 1.8 4.5 4.6" /></g>,
  msgs: <g><path d="M21 12c0 4.4-4 8-9 8-1.4 0-2.7-.3-3.9-.8L3 21l1.4-4.2A7.7 7.7 0 0 1 3 12c0-4.4 4-8 9-8s9 3.6 9 8Z" {...ICON_FILL} /><circle cx="8.6" cy="12" r="1" {...ICON_DOT} /><circle cx="12" cy="12" r="1" {...ICON_DOT} /><circle cx="15.4" cy="12" r="1" {...ICON_DOT} /></g>,
  ai: <g><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21" /><rect x="6.5" y="6.5" width="11" height="11" rx="3" {...ICON_FILL} /><path d="M10 10.5v3M14 10.5v3" /></g>,
  bolt: <path d="M13 3 4.5 13.5H11L10 21l8.5-10.5H12L13 3Z" {...ICON_FILL} />,
  cal: <g><rect x="3.5" y="5" width="17" height="15" rx="2.2" {...ICON_FILL} /><path d="M3.5 10h17M8 3v4M16 3v4" /></g>,
  heart: <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z" {...ICON_FILL} />,
  social: <g><rect x="3.5" y="3.5" width="17" height="17" rx="5" {...ICON_FILL} /><circle cx="12" cy="12" r="3.8" /><circle cx="16.9" cy="7.1" r="1" {...ICON_DOT} /></g>,
  chart: <g><rect x="4" y="11" width="4" height="9" rx="1.2" {...ICON_FILL} /><rect x="10" y="4" width="4" height="16" rx="1.2" {...ICON_FILL} /><rect x="16" y="14" width="4" height="6" rx="1.2" {...ICON_FILL} /></g>,
  analytics: <g><circle cx="12" cy="12" r="8.5" {...ICON_FILL} /><path d="M12 3.5V12l6 3.5" /></g>,
  link: <g><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></g>,
  settings: <g><path d="M19.4 14.5a7.8 7.8 0 0 0 .1-2.5l2-1.4-2-3.4-2.3.9c-.7-.6-1.5-1.1-2.4-1.4L14.3 4h-4.6l-.5 2.7c-.9.3-1.7.8-2.4 1.4l-2.3-.9-2 3.4 2 1.4a7.8 7.8 0 0 0 .1 2.5l-2 1.4 2 3.4 2.3-.9c.7.6 1.5 1.1 2.4 1.4l.5 2.7h4.6l.5-2.7c.9-.3 1.7-.8 2.4-1.4l2.3.9 2-3.4-2.1-1.4Z" {...ICON_FILL} /><circle cx="12" cy="12" r="2.8" /></g>,
  // Topo
  search: <g><circle cx="11" cy="11" r="6.5" {...ICON_FILL} /><path d="m20 20-4.3-4.3" /></g>,
  bell: <g><path d="M6 10a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4s2-1.5 2-6.5Z" {...ICON_FILL} /><path d="M10 20a2 2 0 0 0 4 0" /></g>,
  user: <g><circle cx="12" cy="8" r="3.6" {...ICON_FILL} /><path d="M5 20.5c.4-3.6 3.3-6 7-6s6.6 2.4 7 6Z" {...ICON_FILL} /></g>,
  plus: <path d="M12 5v14M5 12h14" />,
  arrUp: <path d="m6 14 6-6 6 6" />,
  arrDown: <path d="m6 10 6 6 6-6" />,
  arrRight: <path d="m9 6 6 6-6 6" />,
  dots: <g><circle cx="6" cy="12" r="1.4" {...ICON_DOT} /><circle cx="12" cy="12" r="1.4" {...ICON_DOT} /><circle cx="18" cy="12" r="1.4" {...ICON_DOT} /></g>,
  image: <g><rect x="3" y="3.5" width="18" height="17" rx="2.5" {...ICON_FILL} /><circle cx="8.5" cy="9" r="1.6" {...ICON_DOT} /><path d="m20.5 15.5-4.5-4.5-10.5 9.5" /></g>,
  mic: <g><rect x="9" y="3" width="6" height="12" rx="3" {...ICON_FILL} /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></g>,
  file: <g><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z" {...ICON_FILL} /><path d="M14 3v5h5M9 13h6M9 17h4" /></g>,
  trash: <g><path d="M5.5 7.5h13l-1 11.6a2 2 0 0 1-2 1.9h-7a2 2 0 0 1-2-1.9Z" {...ICON_FILL} /><path d="M3.5 7.5h17M9.5 7.5V4.5h5v3M10 11.5v5M14 11.5v5" /></g>,
  pencil: <g><path d="M5 19l.6-4.1L16.3 4.2a1.8 1.8 0 0 1 2.5 0l1 1a1.8 1.8 0 0 1 0 2.5L9.1 18.4Z" {...ICON_FILL} /><path d="m14 6.5 3.5 3.5" /></g>,
  flame: <g><path d="M12 21a6 6 0 0 0 6-6c0-4.2-3.2-5.8-4.2-10.2C11.2 6.4 9.8 8.8 9.8 11.2c-1-.5-1.6-1.5-1.9-2.6C6.8 10.2 6 12.4 6 15a6 6 0 0 0 6 6Z" {...ICON_FILL} /><path d="M12 21a2.5 2.5 0 0 1-2.5-2.5c0-1.9 2.5-3.6 2.5-3.6s2.5 1.7 2.5 3.6A2.5 2.5 0 0 1 12 21Z" {...ICON_DOT} /></g>,
  drop: <path d="M12 3c3 4 6 7 6 11a6 6 0 1 1-12 0c0-4 3-7 6-11Z" {...ICON_FILL} />,
  snow: <g><path d="M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9" /><path d="m9.5 4.5 2.5 2 2.5-2M9.5 19.5l2.5-2 2.5 2" /></g>,
  filter: <path d="M4 5h16l-6 7v6l-4 2v-8L4 5Z" {...ICON_FILL} />,
  refresh: <g><path d="M21 12a9 9 0 0 1-15.5 6.3L3 16" /><path d="M3 12a9 9 0 0 1 15.5-6.3L21 8" /><path d="M21 3v5h-5M3 21v-5h5" /></g>,
  sparkles: <g><path d="M10 3.5c.6 3.6 2.3 5.4 6 6-3.7.6-5.4 2.4-6 6-.6-3.6-2.3-5.4-6-6 3.7-.6 5.4-2.4 6-6Z" {...ICON_FILL} /><path d="M18 14c.3 1.8 1.1 2.6 2.8 2.9-1.7.3-2.5 1.1-2.8 2.9-.3-1.8-1.1-2.6-2.8-2.9 1.7-.3 2.5-1.1 2.8-2.9Z" {...ICON_FILL} /><circle cx="18.5" cy="5" r="1" {...ICON_DOT} /></g>,
  message: <path d="M21 12c0 4.4-4 8-9 8-1.4 0-2.7-.3-3.9-.8L3 21l1.4-4.2A7.7 7.7 0 0 1 3 12c0-4.4 4-8 9-8s9 3.6 9 8Z" {...ICON_FILL} />,
  phone: <path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A14 14 0 0 1 4 7a2 2 0 0 1 1-3Z" {...ICON_FILL} />,
  whats: <g><path d="M4 20l1.3-3.9A8.2 8.2 0 1 1 8.6 19L4 20Z" {...ICON_FILL} /><path d="M9 9.6c0 2.6 2.4 5.2 5.2 5.4l1.1-1.3-1.8-.9-.8.8a3.2 3.2 0 0 1-1.8-1.8l.8-.8-.9-1.8L9 9.6Z" {...ICON_DOT} /></g>,
  send: <g><path d="M20.5 3.5 3.8 9.6c-.6.2-.6 1-.1 1.3l6.3 3.1 3.1 6.3c.3.5 1.1.5 1.3-.1L20.5 3.5Z" {...ICON_FILL} /><path d="M20.5 3.5 10 14" /></g>,
  trending: <g><path d="M3 17 9 11l4 4 8-9" /><path d="M14 6h7v7" /></g>,
  logout: <g><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4Z" {...ICON_FILL} /><path d="M16 17l5-5-5-5M21 12H9" /></g>,
  lock: <g><rect x="5" y="11" width="14" height="10" rx="2.2" {...ICON_FILL} /><path d="M8 11V7a4 4 0 1 1 8 0v4" /><circle cx="12" cy="16" r="1.2" {...ICON_DOT} /></g>,
  shield: <g><path d="M12 3 4 6.5v5.3c0 4.7 3.3 8.3 8 9.7 4.7-1.4 8-5 8-9.7V6.5L12 3Z" {...ICON_FILL} /><path d="m9 12 2 2 4-4" /></g>,
  // Interface
  check: <polyline points="20 6 9 17 4 12" />,
  close: <path d="M18 6 6 18M6 6l12 12" />,
  tag: <g><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2.5 12.5V3.5a1 1 0 0 1 1-1h9l8.09 8.09a2 2 0 0 1 0 2.82Z" {...ICON_FILL} /><circle cx="7.5" cy="7.5" r="1.5" {...ICON_DOT} /></g>,
  paperclip: <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" />,
  alert: <g><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" {...ICON_FILL} /><path d="M12 9v4" /><circle cx="12" cy="17" r="1" {...ICON_DOT} /></g>,
  ban: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="m5.6 5.6 12.8 12.8" /></g>,
  trophy: <g><path d="M6 9H3.5V4.5H6m12 0h2.5V9H18" /><path d="M6 4h12v6a6 6 0 0 1-12 0V4Z" {...ICON_FILL} /><path d="M9 20.5h6m-3-4.5v4.5" /></g>,
  briefcase: <g><rect x="2.5" y="7" width="19" height="13.5" rx="2.2" {...ICON_FILL} /><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2.5 12.5h19" /></g>,
  sun: <g><circle cx="12" cy="12" r="4.5" {...ICON_FILL} /><path d="M12 1.5v2M12 20.5v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1.5 12h2M20.5 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></g>,
  rocket: <g><path d="M12 13.5 9 15l-1.8-3.5L16.8 2c1-.4 3.3-.4 4.1.6.8.9.7 3 .3 4Z" {...ICON_FILL} /><path d="M5 15.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2" /><path d="M8.5 9.5 5 9l-2 2.5 4.2 1M14.5 15.5l.5 3.5-2.5 2-1-4.2" /></g>,
  star: <polygon points="12 2.5 15 8.6 21.7 9.6 16.8 14.3 18 21 12 17.8 6 21 7.2 14.3 2.3 9.6 9 8.6 12 2.5" {...ICON_FILL} />,
  pin: <g><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" {...ICON_FILL} /><path d="M12 17v5" /></g>,
  building: <g><rect x="4" y="2.5" width="16" height="19" rx="2" {...ICON_FILL} /><path d="M9.5 21.5v-4h5v4" /><path d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 14.5h.01M16 14.5h.01" strokeWidth="2.2" /></g>,
  dollar: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="M15 8.6c-.6-.8-1.7-1.3-3-1.3-1.7 0-3 .9-3 2.2 0 3 6 1.6 6 4.6 0 1.3-1.3 2.3-3 2.3-1.4 0-2.6-.6-3.2-1.5M12 5.5v1.8M12 16.7v1.8" /></g>,
  archive: <g><rect x="3" y="4" width="18" height="4.5" rx="1.2" {...ICON_FILL} /><path d="M4.8 8.5V19a1.5 1.5 0 0 0 1.5 1.5h11.4a1.5 1.5 0 0 0 1.5-1.5V8.5Z" {...ICON_FILL} /><path d="M10 12.5h4" /></g>,
  arrLeft: <path d="m15 6-6 6 6 6" />,
  undo: <g><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></g>,
  expand: <g><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></g>,
  gridView: <g><rect x="4" y="4" width="7" height="7" rx="1.6" {...ICON_FILL} /><rect x="13" y="4" width="7" height="7" rx="1.6" {...ICON_FILL} /><rect x="4" y="13" width="7" height="7" rx="1.6" {...ICON_FILL} /><rect x="13" y="13" width="7" height="7" rx="1.6" {...ICON_FILL} /></g>,
  crown: <g><path d="M3.5 8.5 7.5 12 12 5l4.5 7 4-3.5-1.8 10H5.3Z" {...ICON_FILL} /><path d="M5.5 21h13"/></g>,
  arrRightS: <path d="m9 6 6 6-6 6" />,
  clock: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="M12 7.5V12l3 2" /></g>,
  mapPin: <g><path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z" {...ICON_FILL} /><circle cx="12" cy="9.5" r="2.5" /></g>,
  listView: <g><path d="M9.5 6h10.5M9.5 12h10.5M9.5 18h10.5" /><rect x="3" y="4.5" width="3" height="3" rx=".9" {...ICON_FILL} /><rect x="3" y="10.5" width="3" height="3" rx=".9" {...ICON_FILL} /><rect x="3" y="16.5" width="3" height="3" rx=".9" {...ICON_FILL} /></g>,
  extLink: <g><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /><path d="M14 4h6v6M20 4l-9 9" /></g>,
  cube: <g><path d="M12 2.8 20.5 7.5v9L12 21.2 3.5 16.5v-9Z" {...ICON_FILL} /><path d="M3.5 7.5 12 12l8.5-4.5M12 12v9.2"/></g>,
  play: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="M10 8.6v6.8c0 .5.5.8.9.5l5.2-3.4a.6.6 0 0 0 0-1l-5.2-3.4c-.4-.3-.9 0-.9.5Z" {...ICON_DOT} /></g>,
  split: <g><path d="M8.5 12c3.4 0 3.6-6 7-6M8.5 12c3.4 0 3.6 6 7 6" /><circle cx="6" cy="12" r="2.5" {...ICON_FILL} /><circle cx="18" cy="6" r="2.5" {...ICON_FILL} /><circle cx="18" cy="18" r="2.5" {...ICON_FILL} /></g>,
  power: <g><path d="M12 3v8" /><path d="M6.3 6.8a8 8 0 1 0 11.4 0" /></g>,
  minus: <path d="M5 12h14" />,
  copy: <g><rect x="8" y="8" width="12" height="12" rx="2.2" {...ICON_FILL} /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></g>,
  // Ícones distintos por significado (2026-10-03)
  team: <g><circle cx="12" cy="7.5" r="2.8" {...ICON_FILL} /><path d="M7.5 20v-1.2a4.5 4.5 0 0 1 9 0V20Z" {...ICON_FILL} /><circle cx="5" cy="10" r="2" /><path d="M1.8 19v-.6A3.2 3.2 0 0 1 5 15.2c.7 0 1.4.2 1.9.6" /><circle cx="19" cy="10" r="2" /><path d="M22.2 19v-.6a3.2 3.2 0 0 0-3.2-3.2c-.7 0-1.4.2-1.9.6" /></g>,
  userPlus: <g><circle cx="9.5" cy="8" r="3.6" {...ICON_FILL} /><path d="M3 20.2c.4-3.4 3.1-5.7 6.5-5.7s6.1 2.3 6.5 5.7Z" {...ICON_FILL} /><path d="M19 8.5v6M16 11.5h6" /></g>,
  funnel: <path d="M3 4.5h18l-7 8.5v6l-4 1.5v-7.5Z" {...ICON_FILL} />,
  distribute: <g><circle cx="5.5" cy="12" r="2.8" {...ICON_FILL} /><path d="M8.3 12h3.2M11.5 12c2.6 0 2.8-6 6-6M11.5 12h6M11.5 12c2.6 0 2.8 6 6 6" /><circle cx="19.2" cy="6" r="1.8" {...ICON_FILL} /><circle cx="19.2" cy="12" r="1.8" {...ICON_FILL} /><circle cx="19.2" cy="18" r="1.8" {...ICON_FILL} /></g>,
  key: <g><circle cx="7.5" cy="15.5" r="4" {...ICON_FILL} /><path d="m10.5 12.5 9-9M16.5 6.5l2.5 2.5M14 9l2 2" /></g>,
  wallet: <g><path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H17v3.5h1.5A1.5 1.5 0 0 1 20 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-13A2.5 2.5 0 0 1 3 17.5Z" {...ICON_FILL} /><path d="M3 6.5A2.5 2.5 0 0 0 5.5 9H20" /><circle cx="16.2" cy="14.3" r="1.1" {...ICON_DOT} /></g>,
  banknote: <g><rect x="2.5" y="6" width="19" height="12" rx="2" {...ICON_FILL} /><circle cx="12" cy="12" r="2.6" /><path d="M6 9.5v.01M18 14.5v.01" strokeWidth="2.2" /></g>,
  activity: <path d="M3 12h4l3-8 4 16 3-8h4" />,
  calDay: <g><rect x="3.5" y="5" width="17" height="15" rx="2.2" {...ICON_FILL} /><path d="M3.5 10h17M8 3v4M16 3v4" /><rect x="7.5" y="13" width="3.5" height="3.5" rx=".8" {...ICON_DOT} /></g>,
  calWeek: <g><rect x="3.5" y="5" width="17" height="15" rx="2.2" {...ICON_FILL} /><path d="M3.5 10h17M8 3v4M16 3v4M7 14.5h10" /></g>,
  hourglass: <g><path d="M6.5 3h11M6.5 21h11" /><path d="M7.5 3c0 4.5 4.5 5.5 4.5 9s-4.5 4.5-4.5 9h9c0-4.5-4.5-5.5-4.5-9s4.5-4.5 4.5-9Z" {...ICON_FILL} /></g>,
  calculator: <g><rect x="5" y="2.5" width="14" height="19" rx="2.5" {...ICON_FILL} /><rect x="8" y="5.5" width="8" height="3.5" rx="1" /><path d="M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01" strokeWidth="2.2" /></g>,
  gauge: <g><path d="M4.2 17.5a9 9 0 1 1 15.6 0Z" {...ICON_FILL} /><path d="m12 13 4-5" /><circle cx="12" cy="13.5" r="1.5" {...ICON_DOT} /></g>,
  target: <g><circle cx="12" cy="12" r="8.5" {...ICON_FILL} /><circle cx="12" cy="12" r="4.8" {...ICON_FILL} /><circle cx="12" cy="12" r="1.4" {...ICON_DOT} /></g>,
  layers: <g><path d="m3 13 9 5 9-5" /><path d="m12 3 9 5-9 5-9-5Z" {...ICON_FILL} /></g>,
  magic: <g><path d="m4 20 11-11" /><path d="m13.5 6.5 4 4" /><path d="M18 2.5c.3 1.6 1 2.3 2.5 2.5-1.5.2-2.2.9-2.5 2.5-.3-1.6-1-2.3-2.5-2.5 1.5-.2 2.2-.9 2.5-2.5Z" {...ICON_FILL} /><path d="M9 3.5v2M8 4.5h2M20 10.5v2M19 11.5h2" /></g>,
  smile: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="M8.5 14.5a4.2 4.2 0 0 0 7 0" /><circle cx="9" cy="10" r="1" {...ICON_DOT} /><circle cx="15" cy="10" r="1" {...ICON_DOT} /></g>,
  info: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="M12 11v5.5" /><circle cx="12" cy="7.8" r="1" {...ICON_DOT} /></g>,
  help: <g><circle cx="12" cy="12" r="9" {...ICON_FILL} /><path d="M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.7" /><circle cx="12" cy="16.9" r="1" {...ICON_DOT} /></g>,
  mail: <g><rect x="3" y="5" width="18" height="14" rx="2.2" {...ICON_FILL} /><path d="m3.5 6.5 8.5 6 8.5-6" /></g>,
  sheet: <g><rect x="3.5" y="4" width="17" height="16" rx="2.2" {...ICON_FILL} /><path d="M12 4v16" /><path d="M14.5 8.5h3.5M14.5 12h3.5M14.5 15.5h2" /></g>,
  flow: <g><rect x="2.5" y="9.5" width="6" height="5" rx="1.5" {...ICON_FILL} /><rect x="15.5" y="3.5" width="6" height="5" rx="1.5" {...ICON_FILL} /><rect x="15.5" y="15.5" width="6" height="5" rx="1.5" {...ICON_FILL} /><path d="M8.5 12H12M12 12V7.5A1.5 1.5 0 0 1 13.5 6h2M12 12v4.5a1.5 1.5 0 0 0 1.5 1.5h2" /></g>,
  fit: <g><path d="M4 9V5a1 1 0 0 1 1-1h4M20 9V5a1 1 0 0 0-1-1h-4M4 15v4a1 1 0 0 0 1 1h4M20 15v4a1 1 0 0 1-1 1h-4" /><rect x="9" y="9" width="6" height="6" rx="1.4" {...ICON_FILL} /></g>,
};

function Icon({ name, size = 16, stroke = 1.7, className = "ico", style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
    className={className} style={style}>
      {I[name]}
    </svg>);

}

// Sparkline
function Sparkline({ data, color = '#7EC8FF', area = true, width = 88, height = 32 }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = Math.max(1, max - min);
  const pad = 2;
  const pts = data.map((v, i) => {
    const x = pad + i / (data.length - 1) * (width - pad * 2);
    const y = pad + (1 - (v - min) / range) * (height - pad * 2);
    return [x, y];
  });
  const d = pts.map((p, i) => i ? `L${p[0].toFixed(1)} ${p[1].toFixed(1)}` : `M${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const areaPath = `${d} L${pts[pts.length - 1][0]} ${height} L${pts[0][0]} ${height} Z`;
  const last = pts[pts.length - 1];
  const gradId = `sg-${String(color).replace(/[^a-z0-9]/gi, '')}`;   // aceita também var(--accent)
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className="sparkline">
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" style={{ stopColor: color, stopOpacity: 0.35 }} />
          <stop offset="100%" style={{ stopColor: color, stopOpacity: 0 }} />
        </linearGradient>
      </defs>
      {area && <path d={areaPath} fill={`url(#${gradId})`} />}
      <path d={d} fill="none" style={{ stroke: color }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r="2.5" style={{ fill: color }} />
      <circle cx={last[0]} cy={last[1]} r="5" style={{ fill: color }} fillOpacity="0.2" />
    </svg>);

}

// Score ring (0..100)
function ScoreRing({ score, size = 20, stroke = 2.2 }) {
  const r = (size - stroke) / 2;
  const c = size / 2;
  const circ = 2 * Math.PI * r;
  const offset = circ * (1 - score / 100);
  const color = score >= 85 ? '#059669' : score >= 65 ? '#1F93FF' : score >= 45 ? '#d97706' : '#94a3b8';
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="score-ring">
      <circle cx={c} cy={c} r={r} fill="none" stroke="#e2e8f0" strokeWidth={stroke} />
      <circle cx={c} cy={c} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round"
      strokeDasharray={circ} strokeDashoffset={offset}
      transform={`rotate(-90 ${c} ${c})`} />
    </svg>);

}

// Logo mark using user-provided Horos SVG (horizontal lockup)
function HorosMark({ height = 36 }) {
  return (
    <img src="assets/horos-logo.svg" height={height}
    alt="Horos" style={{ display: 'block', height: height + 'px', width: "108px" }} />);

}

// ── Skeleton (carregando) — usado no app inteiro no lugar de spinner/"Carregando…".
// Refeito 2026-10-05 ("em cada bloco, cada palavra, deixe realmente bonito"): cada linha de
// texto vira PALAVRAS separadas (SkelLine), títulos mais fortes (tone="strong"), textos
// auxiliares mais leves (tone="soft") e os blocos seguem a forma do conteúdo real (KPI,
// painel com gráfico/lista, tabela com cabeçalho, card do Kanban). O brilho é um só para a
// tela toda (camada "SKELETON" de horos-ds.css). Abertura da tela: molde exato em jsx-loader.js.
function Skel({ w, h = 12, r, circle, tone, className = '', style }) {
  const st = { width: w == null ? '100%' : w, height: h, ...(circle ? { borderRadius: '50%', width: w == null ? h : w, flexShrink: 0 } : r != null ? { borderRadius: r } : null), ...style };
  return <span className={`hx-sk${tone ? ' sk-' + tone : ''} ${className}`} style={st} aria-hidden="true" />;
}
// Uma linha de texto = palavras de larguras diferentes (semente fixa → não "pula" a cada render)
const _SKG = [[3, 5, 3], [4, 3, 5], [6, 4], [3, 4, 4, 3], [5, 4], [4, 3, 6], [4, 5, 3], [3, 6, 4]];
function SkelLine({ w = '100%', h = 10, seed = 0, tone, style }) {
  // Uma barra inteira por linha (barrinha por palavra deixava o carregando poluído)
  return (
    <span className="hx-sk-line" style={{ width: w, ...style }} aria-hidden="true">
      <Skel h={h} tone={tone} r={Math.ceil(h / 2)} style={{ flex: '1 1 0', width: 'auto' }} />
    </span>
  );
}
// Parágrafo
function SkelText({ lines = 3, h = 10, gap = 9, last = '60%', tone, style }) {
  return (
    <div className="hx-sk-text" style={{ gap, ...style }} aria-hidden="true">
      {Array.from({ length: lines }, (_, i) => <SkelLine key={i} h={h} seed={i * 3 + 1} tone={tone} w={i === lines - 1 && lines > 1 ? last : '100%'} />)}
    </div>
  );
}
// Lista: avatar + título + linha de apoio (+ hora/valor à direita)
const _SKW = ['72%', '55%', '64%', '48%', '68%', '58%', '76%', '52%'];
function SkelList({ rows = 5, avatar = 36, lines = 2, right = false, pad = '12px 14px', label = 'Carregando', style }) {
  return (
    <div className="hx-sk-list" role="status" aria-label={label} style={style}>
      {Array.from({ length: rows }, (_, i) => (
        <div key={i} className="hx-sk-row" style={{ padding: pad }}>
          {avatar ? <Skel circle h={avatar} /> : null}
          <div className="hx-sk-col">
            <SkelLine h={11} w={_SKW[i % _SKW.length]} seed={i} tone="strong" />
            {lines > 1 && <SkelLine h={8} w={_SKW[(i + 3) % _SKW.length]} seed={i + 4} tone="soft" />}
          </div>
          {right && <Skel h={8} w={34} tone="soft" />}
        </div>
      ))}
    </div>
  );
}
// KPI: rótulo · número grande · rodapé com variação (mesma forma do .kpi)
function SkelKpi({ seed = 0, className = '', style }) {
  return (
    <div className={`hx-sk-card ${className}`} style={{ gap: 0, minHeight: 132, ...style }} aria-hidden="true">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <SkelLine w="52%" h={9} seed={seed} tone="soft" />
        <Skel h={28} w={28} r={7} tone="soft" />
      </div>
      <Skel h={26} w={['38%', '30%', '44%', '34%'][seed % 4]} r={5} tone="strong" style={{ marginTop: 14 }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)' }}>
        <Skel h={9} w={38} />
        <SkelLine w="46%" h={8} seed={seed + 2} tone="soft" />
      </div>
    </div>
  );
}
// Grade de cartões (KPIs)
function SkelCards({ n = 4, h = 110, min = 200, gap = 16, style }) {
  return (
    <div className="hx-sk-cards" role="status" aria-label="Carregando" style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${min}px, 1fr))`, gap, ...style }}>
      {Array.from({ length: n }, (_, i) => <SkelKpi key={i} seed={i} style={{ minHeight: h }} />)}
    </div>
  );
}
// Painel: cabeçalho (título + apoio + selo) e corpo no formato do conteúdo
function SkelPanel({ kind = 'rows', h, rows = 5, title = '38%', className = '', style }) {
  const bars = [46, 62, 38, 74, 56, 88, 64, 70, 52, 80, 60, 92];
  return (
    <div className={`hx-sk-card ${className}`} style={{ gap: 14, minHeight: h, ...style }} role="status" aria-label="Carregando">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <SkelLine w={title} h={12} seed={2} tone="strong" />
          <SkelLine w="58%" h={8} seed={5} tone="soft" />
        </div>
        <Skel h={24} w={72} r={12} tone="soft" />
      </div>
      {kind === 'chart' && (
        <div style={{ flex: 1, minHeight: 140, display: 'flex', alignItems: 'flex-end', gap: 10, paddingTop: 6 }}>
          {bars.map((b, i) => <Skel key={i} h={`${b}%`} r="5px 5px 2px 2px" tone={i % 3 ? 'soft' : undefined} style={{ flex: 1, width: 'auto' }} />)}
        </div>
      )}
      {kind === 'bars' && Array.from({ length: rows }, (_, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <SkelLine w="22%" h={9} seed={i} />
          <Skel h={14} r={4} w={`${70 - i * 11}%`} tone={i ? 'soft' : undefined} style={{ flexShrink: 1 }} />
          <Skel h={9} w={30} tone="strong" style={{ marginLeft: 'auto' }} />
        </div>
      ))}
      {kind === 'rows' && <SkelList rows={rows} avatar={30} right pad="10px 0" />}
      {kind === 'text' && <SkelText lines={rows} />}
    </div>
  );
}
// Tabela: cabeçalho cinza + linhas com avatar, nome/apoio, selo, colunas e ação
function SkelTable({ rows = 6, cols = 5, style }) {
  const mid = Math.max(1, cols - 2);
  const tpl = `32px 1.6fr ${Array.from({ length: mid }, () => '1fr').join(' ')} 24px`;
  return (
    <div className="hx-sk-table" role="status" aria-label="Carregando" style={style}>
      <div className="hx-sk-tr hx-sk-th" style={{ gridTemplateColumns: tpl }}>
        <span />
        <Skel h={7} w={64} tone="soft" />
        {Array.from({ length: mid }, (_, j) => <Skel key={j} h={7} w={[46, 58, 40, 52][j % 4]} tone="soft" />)}
        <span />
      </div>
      {Array.from({ length: rows }, (_, i) => (
        <div key={i} className="hx-sk-tr" style={{ gridTemplateColumns: tpl }}>
          <Skel circle h={32} />
          <div className="hx-sk-col">
            <SkelLine h={10} w={_SKW[i % _SKW.length]} seed={i} tone="strong" />
            <SkelLine h={8} w={_SKW[(i + 3) % _SKW.length]} seed={i + 2} tone="soft" />
          </div>
          {Array.from({ length: mid }, (_, j) => j === 0
            ? <Skel key={j} h={22} w={[64, 78, 56, 70][i % 4]} r={11} tone="soft" />
            : <SkelLine key={j} h={9} w={_SKW[(i + j + 2) % _SKW.length]} seed={i + j} />)}
          <Skel h={22} w={22} r={6} tone="soft" />
        </div>
      ))}
    </div>
  );
}
// Kanban: colunas com cards no formato do card real (chips · nome · contatos · rodapé)
function SkelKanban({ cols = 4, cards = 3 }) {
  return (
    <div className="hx-sk-kanban" role="status" aria-label="Carregando">
      {Array.from({ length: cols }, (_, c) => (
        <div key={c} className="hx-sk-kcol">
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '2px 4px 6px' }}>
            <Skel circle h={8} />
            <SkelLine w="42%" h={10} seed={c} tone="strong" />
            <Skel h={18} w={26} r={9} tone="soft" style={{ marginLeft: 'auto' }} />
          </div>
          {Array.from({ length: Math.max(1, cards - (c % 2)) }, (_, i) => (
            <div key={i} className="hx-sk-card" style={{ padding: 14, gap: 9, borderRadius: 12 }}>
              <div style={{ display: 'flex', gap: 6 }}><Skel h={20} w={54} r={10} tone="soft" /><Skel h={20} w={62} r={10} tone="soft" /><Skel h={20} w={40} r={10} tone="soft" /></div>
              <SkelLine h={12} w={_SKW[(c + i) % _SKW.length]} seed={c * 3 + i} tone="strong" style={{ marginTop: 4 }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Skel h={13} w={13} r={4} tone="soft" /><SkelLine h={8} w="52%" seed={i + 1} tone="soft" /></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Skel h={13} w={13} r={4} tone="soft" /><SkelLine h={8} w="64%" seed={i + 2} tone="soft" /></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 10, marginTop: 2, borderTop: '1px solid var(--line)' }}>
                <SkelLine h={8} w="40%" seed={i + 3} tone="soft" /><Skel circle h={24} style={{ marginLeft: 'auto' }} />
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}
// Bloco de tamanho fixo (gráfico, painel) → painel com cabeçalho e gráfico/texto
function SkelBlock({ h = 200, style, className = '' }) {
  return <SkelPanel kind={typeof h === 'number' && h < 180 ? 'text' : 'chart'} rows={3} className={className} style={{ height: h, ...style }} />;
}

window.Skel = Skel;
window.SkelLine = SkelLine;
window.SkelKpi = SkelKpi;
window.SkelPanel = SkelPanel;
window.SkelText = SkelText;
window.SkelList = SkelList;
window.SkelCards = SkelCards;
window.SkelTable = SkelTable;
window.SkelKanban = SkelKanban;
window.SkelBlock = SkelBlock;

window.Icon = Icon;
window.Sparkline = Sparkline;
window.ScoreRing = ScoreRing;
window.HorosMark = HorosMark;