// Thin-line custom SVG icons (1.5 stroke) — matches design system iconography rules
function Icon({ name, size = 24, color = 'currentColor', strokeWidth = 1.4, style = {} }) {
  const p = {
    fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  const paths = {
    // Compass — for "Exigence de sélection"
    compass: (
      <>
        <circle cx="12" cy="12" r="9" {...p} />
        <path d="M16 8l-2.5 5.5L8 16l2.5-5.5L16 8z" {...p} />
      </>
    ),
    // Lens / magnifier — for "Transparence totale"
    lens: (
      <>
        <circle cx="11" cy="11" r="6.5" {...p} />
        <path d="M16 16l5 5" {...p} />
        <path d="M11 8.5v5M8.5 11h5" {...p} opacity="0.5" />
      </>
    ),
    // Handshake — for "Service sur mesure"
    handshake: (
      <>
        <path d="M3 10l4-3 5 2 5-2 4 3" {...p} />
        <path d="M7 7v7l4 4 1.5-1.5L11 15l3 3 2-2-3-3 2-2" {...p} />
        <path d="M17 7v8" {...p} />
      </>
    ),
    // Hourglass / time — for "Valeur préservée"
    hourglass: (
      <>
        <path d="M6 3h12M6 21h12" {...p} />
        <path d="M7 3v3l5 6 5-6V3" {...p} />
        <path d="M7 21v-3l5-6 5 6v3" {...p} />
      </>
    ),
    // Diamond / spade
    diamond: <path d="M12 3l8 9-8 9-8-9 8-9z" {...p} />,
    // Chevron down
    chevronDown: <path d="M6 9l6 6 6-6" {...p} />,
    // Chevron right
    chevronRight: <path d="M9 6l6 6-6 6" {...p} />,
    // Arrow right (long)
    arrowRight: (
      <>
        <path d="M5 12h14" {...p} />
        <path d="M14 6l6 6-6 6" {...p} />
      </>
    ),
    // External link
    externalLink: (
      <>
        <path d="M14 4h6v6" {...p} />
        <path d="M20 4l-9 9" {...p} />
        <path d="M19 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V6a1 1 0 011-1h5" {...p} />
      </>
    ),
    // Menu / hamburger
    menu: (
      <>
        <path d="M3 7h18M3 12h18M3 17h18" {...p} />
      </>
    ),
    // Close X
    close: <path d="M6 6l12 12M18 6L6 18" {...p} />,
    // Plus / minus markers
    plus: <path d="M12 5v14M5 12h14" {...p} />,
    // Phone
    phone: <path d="M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z" {...p} />,
    // Mail
    mail: (
      <>
        <rect x="3" y="5" width="18" height="14" rx="1" {...p} />
        <path d="M3 7l9 7 9-7" {...p} />
      </>
    ),
    // Pin
    pin: (
      <>
        <path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z" {...p} />
        <circle cx="12" cy="9" r="2.5" {...p} />
      </>
    ),
    // Instagram
    instagram: (
      <>
        <rect x="3" y="3" width="18" height="18" rx="4" {...p} />
        <circle cx="12" cy="12" r="4" {...p} />
        <circle cx="17.5" cy="6.5" r="0.7" fill={color} stroke="none" />
      </>
    ),
    // Award / certificate ribbon
    award: (
      <>
        <circle cx="12" cy="10" r="6" {...p} />
        <path d="M8.5 14L7 21l5-3 5 3-1.5-7" {...p} />
      </>
    ),
    // Checkmark — thin, single stroke
    check: <path d="M4 12l5 5L20 6" {...p} />,
    // Quotation marks — opening pair, decorative
    quote: (
      <>
        <path d="M7 7h3v6H5v-3a3 3 0 013-3z" {...p} />
        <path d="M16 7h3v6h-5v-3a3 3 0 013-3z" {...p} />
      </>
    ),
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0, ...style }} aria-hidden="true">
      {paths[name]}
    </svg>
  );
}

window.Icon = Icon;