// Icons + brand mark — original SVGs (linear stroke style)
const Icon = ({ name, className = "ic" }) => {
  const paths = {
    shield: <><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z"/></>,
    cloud: <><path d="M7 18h10a4 4 0 0 0 .8-7.9A6 6 0 0 0 6.3 9.4 4 4 0 0 0 7 18z"/></>,
    network: <><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v3a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V8"/><path d="M12 14v2"/></>,
    chip: <><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 6V3M15 6V3M9 21v-3M15 21v-3M3 9h3M3 15h3M21 9h-3M21 15h-3"/><rect x="10" y="10" width="4" height="4"/></>,
    backup: <><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></>,
    server: <><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><circle cx="7" cy="7" r="0.6"/><circle cx="7" cy="17" r="0.6"/></>,
    wifi: <><path d="M5 12.5a10 10 0 0 1 14 0"/><path d="M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="19" r="0.8"/><path d="M2 9a14 14 0 0 1 20 0"/></>,
    badge: <><path d="M12 2l9 4-1.5 8L12 22l-7.5-8L3 6l9-4z"/><path d="M9 12l2 2 4-4"/></>,
    lock: <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    flame: <><path d="M12 3c2 4 5 5 5 9a5 5 0 1 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3-1-3 0-5 1-8z"/></>,
    key: <><circle cx="8" cy="14" r="4"/><path d="M11 13l9-9M16 8l3 3M14 6l3 3"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    phone: <><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    health: <><path d="M12 21s-7-4.5-7-11a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 6.5-7 11-7 11z"/><path d="M9 11h2v-2h2v2h2v2h-2v2h-2v-2H9z"/></>,
    finance: <><path d="M3 21h18"/><path d="M5 21V10M9 21V10M15 21V10M19 21V10"/><path d="M3 9l9-6 9 6"/></>,
    factory: <><path d="M3 21V10l5 3V10l5 3V10l5 3v8z"/><path d="M7 21v-4M12 21v-4M17 21v-4"/></>,
    cap: <><path d="M3 9l9-4 9 4-9 4-9-4z"/><path d="M7 11v4c2 2 8 2 10 0v-4"/><path d="M21 9v5"/></>,
    scales: <><path d="M12 4v16"/><path d="M5 8h14"/><path d="M5 8l-3 6c0 2 2 3 3 3s3-1 3-3z"/><path d="M19 8l-3 6c0 2 2 3 3 3s3-1 3-3z"/></>,
    work: <><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 12h18"/></>,
    layers: <><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/><path d="M3 17l9 5 9-5"/></>,
    consult: <><path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0z"/><path d="M9 10a3 3 0 1 1 4.5 2.6c-.7.4-1.5 1-1.5 1.9V15"/><circle cx="12" cy="17.5" r="0.6"/></>,
    hotel: <><path d="M3 21h18M5 21V7l7-4 7 4v14"/><path d="M9 10h2M13 10h2M9 14h2M13 14h2"/><path d="M10 21v-4h4v4"/></>,
  };
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

// Brand V mark — original SVG abstraction (circuit traces meeting an upward chevron arrow)
const VMark = ({ size = 32, className = "vmark" }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 64 64" fill="none">
    <defs>
      <linearGradient id="vmGrad" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stopColor="#5B2BD5"/>
        <stop offset="55%" stopColor="#1E6EFA"/>
        <stop offset="100%" stopColor="#00C8D4"/>
      </linearGradient>
      <linearGradient id="vmGrad2" x1="32" y1="0" x2="64" y2="32" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stopColor="#1E6EFA"/>
        <stop offset="100%" stopColor="#00C8D4"/>
      </linearGradient>
    </defs>
    {/* circuit traces (left side) */}
    <g stroke="url(#vmGrad)" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 18 L12 18 L16 22"/>
      <path d="M4 28 L14 28"/>
      <path d="M8 38 L18 38 L22 34"/>
    </g>
    <g fill="url(#vmGrad)">
      <circle cx="6" cy="18" r="2"/>
      <circle cx="4" cy="28" r="1.6"/>
      <circle cx="8" cy="38" r="2"/>
      <circle cx="20" cy="14" r="2.4"/>
    </g>
    {/* V body */}
    <path d="M14 14 L30 50 L34 50 L24 14 Z" fill="url(#vmGrad)"/>
    {/* upward arrow stroke (right side of V) */}
    <path d="M30 50 L52 14 L46 14 L28 44 Z" fill="url(#vmGrad2)"/>
    <path d="M52 14 L52 28 L46 22 Z" fill="url(#vmGrad2)"/>
  </svg>
);

window.Icon = Icon;
window.VMark = VMark;