// Lightweight icon set as inline SVGs. Stroke-based; share a Hero/Lucide aesthetic.
const Icon = ({ name, size = 18, stroke = "currentColor", fill = "none", className }) => {
  const s = { width: size, height: size, stroke, fill, strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "arrow-up":   return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M12 19V5M6 11l6-6 6 6"/></svg>;
    case "check":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M5 12l4 4L19 6"/></svg>;
    case "x":          return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "spark":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/></svg>;
    case "bolt":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg>;
    case "chat":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M21 12a8 8 0 1 1-3.1-6.3L21 4l-1 4.2A8 8 0 0 1 21 12z"/></svg>;
    case "users":      return <svg {...s} viewBox="0 0 24 24" className={className}><circle cx="9" cy="8" r="3.2"/><path d="M3 20c.6-3.4 3-5.4 6-5.4s5.4 2 6 5.4"/><circle cx="17" cy="9" r="2.6"/><path d="M21 19c-.5-2.5-2-4-4-4.3"/></svg>;
    case "shield":     return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M12 3 4 6v6c0 4.5 3.2 8.5 8 9 4.8-.5 8-4.5 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>;
    case "cpu":        return <svg {...s} viewBox="0 0 24 24" className={className}><rect x="6" y="6" width="12" height="12" rx="2"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>;
    case "lock":       return <svg {...s} viewBox="0 0 24 24" className={className}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
    case "globe":      return <svg {...s} viewBox="0 0 24 24" className={className}><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 "play":       return <svg {...s} viewBox="0 0 24 24" fill="currentColor" stroke="none" className={className}><path d="M8 5v14l11-7L8 5z"/></svg>;
    case "phone":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "rocket":     return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M5 19c1-3 3-5 6-6l4-4c2-2 5-3 8-3 0 3-1 6-3 8l-4 4c-1 3-3 5-6 6l-2-2-3-3z"/><circle cx="15" cy="9" r="1.5"/></svg>;
    case "qr":         return <svg {...s} viewBox="0 0 24 24" className={className}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3h-3zM18 18h3v3h-3z"/></svg>;
    case "stack":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="m12 3 9 5-9 5-9-5 9-5z"/><path d="m3 13 9 5 9-5"/></svg>;
    case "instagram":  return <svg {...s} viewBox="0 0 24 24" className={className}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor"/></svg>;
    case "whatsapp":   return <svg {...s} viewBox="0 0 24 24" fill="currentColor" stroke="none" className={className}><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.002-5.45 4.437-9.884 9.889-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.892 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413"/></svg>;
    case "meta":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M3 16c2-9 6-10 9-4s5 6 9-1"/></svg>;
    case "linkedin":   return <svg {...s} viewBox="0 0 24 24" className={className}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M7 10v7M11 17v-4a2 2 0 0 1 4 0v4M11 10v7"/><circle cx="7" cy="7" r=".7" fill="currentColor"/></svg>;
    case "youtube":    return <svg {...s} viewBox="0 0 24 24" className={className}><rect x="2" y="6" width="20" height="12" rx="4"/><path d="M10 9.5l5 2.5-5 2.5z" fill="currentColor" stroke="none"/></svg>;
    case "trend":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M3 17l6-6 4 4 8-9M14 6h7v7"/></svg>;
    case "clock":      return <svg {...s} viewBox="0 0 24 24" className={className}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "flag":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M4 21V4M4 4h12l-2 4 2 4H4"/></svg>;
    case "ai":         return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/><circle cx="12" cy="12" r="4"/></svg>;
    case "lightning":  return <svg {...s} viewBox="0 0 24 24" fill="currentColor" stroke="none" className={className}><path d="M13 2 3 14h7l-1 8 11-13h-7l0-7z"/></svg>;
    case "plus":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M12 5v14M5 12h14"/></svg>;
    case "minus":      return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M5 12h14"/></svg>;
    case "star":       return <svg {...s} viewBox="0 0 24 24" fill="currentColor" stroke="none" className={className}><path d="M12 2l3 7 7 .6-5.3 4.7L18.4 22 12 18l-6.4 4 1.7-7.7L2 9.6 9 9z"/></svg>;
    case "send":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M22 2 11 13M22 2 15 22l-4-9-9-4 20-7z"/></svg>;
    case "fire":       return <svg {...s} viewBox="0 0 24 24" className={className}><path d="M12 22c-4 0-7-2.7-7-6.5C5 12 8 11 8 7c2 1 3 3 3 5 1-1 2-2 2-4 3 2 6 5 6 9 0 3.7-3 5.5-7 5.5z"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;