// Icon.jsx — inline SVG icons (Lucide-style 1.75px stroke).
// Centralized so we don't pull a CDN runtime that delays render.

const ICONS = {
  zap: <polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
  clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" /></>,
  'arrow-right': <path d="M5 12h14M13 5l7 7-7 7" />,
  'arrow-up': <path d="M12 19V5M5 12l7-7 7 7" />,
  check: <polyline points="20 6 9 17 4 12" />,
  'check-circle': <><circle cx="12" cy="12" r="9" /><polyline points="9 12 11 14 15 10" /></>,
  calendar: <><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 10h18M8 2v4M16 2v4" /></>,
  search: <><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></>,
  menu: <path d="M3 6h18M3 12h18M3 18h18" />,
  plus: <path d="M12 5v14M5 12h14" />,
  minus: <path d="M5 12h14" />,
  x: <path d="M18 6 6 18M6 6l12 12" />,
  'chevron-down': <polyline points="6 9 12 15 18 9" />,
  'alert-triangle': <><path d="m10.29 3.86-8.18 14.14A2 2 0 0 0 3.82 21h16.36a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" /><path d="M12 9v4M12 17h.01" /></>,
  'mail': <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></>,
  'message-square': <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
  workflow: <><rect x="3" y="3" width="8" height="8" rx="2" /><rect x="13" y="13" width="8" height="8" rx="2" /><path d="M7 11v2a2 2 0 0 0 2 2h4" /></>,
  database: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v6c0 1.7 4 3 9 3s9-1.3 9-3V5" /><path d="M3 11v6c0 1.7 4 3 9 3s9-1.3 9-3v-6" /></>,
  sparkles: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4" /><path d="m6 6 2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6" /></>,
  layers: <><path d="m12 3 9 5-9 5-9-5 9-5z" /><path d="m3 13 9 5 9-5" /></>,
  'trending-up': <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>,
  briefcase: <><rect x="2" y="7" width="20" height="14" rx="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /></>,
  'map-pin': <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></>,
  linkedin: <><rect x="2" y="2" width="20" height="20" rx="2" /><path d="M6 9h2v8H6zM7 6.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zM11 9h2v1.3c.4-.7 1.3-1.5 2.7-1.5 2 0 3.3 1.3 3.3 4V17h-2v-3.8c0-1.2-.5-2-1.6-2s-1.7.7-2 1.4c-.1.2-.1.5-.1.8V17h-2z" /></>,
  globe: <><circle cx="12" cy="12" r="9" /><path d="M12 3a13.5 13.5 0 0 0 0 18 13.5 13.5 0 0 0 0-18" /><path d="M3 12h18" /></>,
  link: <><path d="M9 17H7a5 5 0 0 1 0-10h2" /><path d="M15 7h2a5 5 0 0 1 0 10h-2" /><path d="M8 12h8" /></>,
  shield: <path d="M12 3 4 6v6c0 5 3.4 7.5 8 9 4.6-1.5 8-4 8-9V6l-8-3Z" />,
  smartphone: <><rect x="6" y="2" width="12" height="20" rx="2" /><path d="M12 18h.01" /></>,
};

const Icon = ({ name, size = 20, stroke = 1.75, color = 'currentColor', style }) => {
  const inner = ICONS[name];
  if (!inner) return null;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      style={style}
      aria-hidden="true"
    >
      {inner}
    </svg>
  );
};

// The signature animated "working" hex glyph.
const WorkingGlyph = ({ size = 36, color = '#2A1A07', dot = '#B8702A' }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path d="M20 3 L34 11 L34 29 L20 37 L6 29 L6 11 Z"
          stroke={color} strokeWidth="1.5" />
    <circle cx="13" cy="20" r="2.5" fill={dot} className="b2a-working-dot-1" />
    <circle cx="20" cy="20" r="2.5" fill={dot} opacity=".55" className="b2a-working-dot-2" />
    <circle cx="27" cy="20" r="2.5" fill={dot} opacity=".25" className="b2a-working-dot-3" />
  </svg>
);

window.Icon = Icon;
window.WorkingGlyph = WorkingGlyph;