// Reusable icons + small UI primitives for the Rank Asset Managers page.
// Single-weight 1.5px stroke to match Rank's marketing icon style.

const Arrow = ({ size = 18, color = "currentColor", strokeWidth = 1.8 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className="arr">
    <path d="M5 12h14M13 6l6 6-6 6" stroke={color} strokeWidth={strokeWidth}
          strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Chevron = ({ size = 18, color = "currentColor", strokeWidth = 1.8 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M9 6l6 6-6 6" stroke={color} strokeWidth={strokeWidth}
          strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Check = ({ size = 18, color = "currentColor", strokeWidth = 2 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M5 12l4.5 4.5L19 7" stroke={color} strokeWidth={strokeWidth}
          strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// Glyph set for "What We Do" cards — minimal, line-art on dark
const Glyph = ({ kind, size = 28, color = "currentColor", sw = 1.5 }) => {
  const p = { stroke: color, strokeWidth: sw, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "portfolio":  // four-petal mark, references the Rank flower
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <circle cx="7"  cy="7"  r="3.2" {...p}/>
          <circle cx="17" cy="7"  r="3.2" {...p}/>
          <circle cx="7"  cy="17" r="3.2" {...p}/>
          <circle cx="17" cy="17" r="3.2" {...p}/>
          <rect x="10.4" y="10.4" width="3.2" height="3.2" rx="0.6" {...p}/>
        </svg>
      );
    case "pulse":  // active management — heartbeat line
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M3 12h4l2-6 4 12 2-8 2 2h4" {...p}/>
        </svg>
      );
    case "shield": // risk
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" {...p}/>
          <path d="M9 12l2 2 4-4" {...p}/>
        </svg>
      );
    case "chart":  // performance
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M4 20V8M10 20v-6M16 20v-9M22 20H2" {...p}/>
        </svg>
      );
    case "lock":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <rect x="4" y="11" width="16" height="10" rx="2" {...p}/>
          <path d="M8 11V8a4 4 0 018 0v3" {...p}/>
        </svg>
      );
    case "compass":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" {...p}/>
          <path d="M15.5 8.5L13 13l-4.5 2.5L11 11l4.5-2.5z" {...p}/>
        </svg>
      );
    case "eye":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" {...p}/>
          <circle cx="12" cy="12" r="2.5" {...p}/>
        </svg>
      );
    case "spark":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" {...p}/>
        </svg>
      );
    case "person":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <circle cx="12" cy="8" r="4" {...p}/>
          <path d="M4 21c0-4 4-7 8-7s8 3 8 7" {...p}/>
        </svg>
      );
    case "briefcase":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <rect x="3" y="7" width="18" height="13" rx="2" {...p}/>
          <path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M3 13h18" {...p}/>
        </svg>
      );
    case "bank":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M3 9l9-5 9 5M5 11v8M9 11v8M15 11v8M19 11v8M3 21h18" {...p}/>
        </svg>
      );
    case "trend":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M3 17l6-6 4 4 8-9M21 6v6M21 6h-6" {...p}/>
        </svg>
      );
    default:
      return null;
  }
};

window.Arrow = Arrow;
window.Chevron = Chevron;
window.Check = Check;
window.Glyph = Glyph;