/* Inline-style icon set, stroked, 24x24 viewBox */
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const props = {
    width: size, height: size,
    viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "arrow-right": return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "arrow-down": return (<svg {...props}><path d="M12 5v14M5 13l7 7 7-7"/></svg>);
    case "check": return (<svg {...props}><path d="M5 12.5l4.5 4.5L20 6"/></svg>);
    case "plus": return (<svg {...props}><path d="M12 5v14M5 12h14"/></svg>);
    case "minus": return (<svg {...props}><path d="M5 12h14"/></svg>);
    case "mic": return (<svg {...props}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>);
    case "play": return (<svg {...props}><path d="M6 4l14 8L6 20V4z" fill="currentColor"/></svg>);
    case "send": return (<svg {...props}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>);
    case "camera": return (<svg {...props}><path d="M5 7h3l2-2h4l2 2h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.5"/></svg>);
    case "card": return (<svg {...props}><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 14h4M7 10h10"/></svg>);
    case "spark": return (<svg {...props}><path d="M12 3l1.8 5.5L19 10l-5.2 1.5L12 17l-1.8-5.5L5 10l5.2-1.5L12 3zM19 17l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9.9-2.1z"/></svg>);
    case "radar": return (<svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><path d="M12 3v9l6 6"/></svg>);
    case "target": return (<svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>);
    case "calendar": return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg>);
    case "mail": return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>);
    case "whatsapp": return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.92.5 3.78 1.45 5.42L2 22l4.79-1.55a9.96 9.96 0 0 0 5.25 1.49h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.86 9.86 0 0 0 12.04 2zm0 1.65a8.26 8.26 0 0 1 8.27 8.27 8.27 8.27 0 0 1-8.27 8.27 8.2 8.2 0 0 1-4.36-1.25l-.31-.18-3.15 1.02 1.03-3.08-.2-.32a8.2 8.2 0 0 1-1.26-4.46c0-4.57 3.72-8.27 8.25-8.27zm4.93 11.04c-.27-.13-1.59-.78-1.83-.87-.25-.09-.43-.13-.6.14-.18.27-.7.87-.85 1.05-.16.18-.32.2-.59.07-.27-.13-1.13-.42-2.15-1.33-.8-.71-1.33-1.59-1.49-1.86-.16-.27-.02-.41.12-.55.12-.12.27-.32.4-.48.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.48-.07-.13-.6-1.45-.83-1.99-.22-.52-.44-.45-.6-.46l-.51-.01a.98.98 0 0 0-.71.33c-.25.27-.94.92-.94 2.24 0 1.32.96 2.6 1.1 2.78.13.18 1.9 2.9 4.6 4.06.64.28 1.14.44 1.53.57.64.2 1.23.18 1.69.11.51-.08 1.59-.65 1.81-1.28.22-.63.22-1.17.16-1.28-.07-.11-.25-.18-.51-.31z"/>
      </svg>
    );
    case "shield": return (<svg {...props}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>);
    case "lock": return (<svg {...props}><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>);
    case "users": return (<svg {...props}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M22 21a7 7 0 0 0-8-7"/><circle cx="17" cy="9" r="3"/></svg>);
    case "globe": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "clock": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "voicewave": return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <path d="M3 12h2M7 8v8M11 5v14M15 8v8M19 11v2"/>
      </svg>
    );
    default: return null;
  }
};

window.Icon = Icon;