/* global React */
// Custom monoline icon set — lifted verbatim from components/Icon.jsx in the repo.
// 24px viewBox, fill:none, stroke:currentColor, stroke-width 1.8, round joins.
function Icon({ name, size = 20, color }) {
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    brain: <path d="M12 5a3 3 0 0 0-6 0 3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 6 0Zm0 0a3 3 0 0 1 6 0 3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-6 0Z" />,
    chart: <path d="M3 3v18h18M7 15l3-4 4 3 5-8" />,
    check: <path d="m20 6-11 11-5-5" />,
    database: <><ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" /></>,
    menu: <path d="M4 7h16M4 12h16M4 17h16" />,
    phone: <><rect x="6" y="2.5" width="12" height="19" rx="3" /><path d="M10 18h4" /></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />,
    signal: <><path d="M3 12h4l3 8 4-16 3 8h4" /><path d="M18 5h3v3" /></>,
    target: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.4" /></>,
    zap: <path d="M13 2 3 14h8l-1 8 10-12h-8l1-8Z" />,
    "chevron-down": <path d="M6 9l6 6 6-6" />,
    "chevron-right": <path d="M9 6l6 6-6 6" />,
    wallet: <><path d="M3 7a2 2 0 0 1 2-2h13v3" /><path d="M3 7v10a2 2 0 0 0 2 2h14a1 1 0 0 0 1-1v-3" /><path d="M21 11v3h-4a2 2 0 0 1 0-4h4a1 1 0 0 1 0 1Z" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    bell: <><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></>,
    sun: <><circle cx="12" cy="12" r="4.2" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></>,
    moon: <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />,
    filter: <path d="M3 5h18l-7 8v6l-4 2v-8L3 5Z" />,
    layers: <><path d="m12 2 9 5-9 5-9-5 9-5Z" /><path d="m3 12 9 5 9-5M3 17l9 5 9-5" /></>,
    grid: <><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" /><rect x="14" y="14" width="7" height="7" rx="1" /></>,
    users: <><circle cx="9" cy="8" r="3.2" /><path d="M3.5 20a5.5 5.5 0 0 1 11 0M16 5.2a3.2 3.2 0 0 1 0 5.6M20.5 20a5.5 5.5 0 0 0-4-5.3" /></>,
    box: <><path d="M21 8 12 3 3 8v8l9 5 9-5V8Z" /><path d="M3 8l9 5 9-5M12 13v8" /></>,
    doc: <><path d="M14 3v5h5" /><path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8l-5-5Z" /></>,
    settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 6.6 19l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 13.4H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 6.6l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 3.6V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.7H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color || "currentColor"} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] || paths.signal}
    </svg>
  );
}

function BrandMark({ size = 22, animated = true }) {
  const d = "M2.6 14.4H7l2.5-6.6 3.4 9.6 1.9-4.4h2.2";
  return (
    <span className={"brand-mark" + (animated ? " is-pulse" : "")} aria-hidden="true" style={{ display: "inline-flex" }}>
      <svg width={size} height={size} viewBox="0 0 24 24" role="img">
        <path className="sig-base" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" d={d} />
        <path className="sig-run" pathLength="100" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" d={d} />
        <circle cx="9.5" cy="7.8" r="2.05" fill="currentColor" />
        <circle cx="20.4" cy="13" r="2.05" fill="currentColor" opacity=".55" />
      </svg>
    </span>
  );
}

window.Icon = Icon;
window.BrandMark = BrandMark;