// icons.jsx — V1.2 icon registry (replaces emoji rendering for KDP/PDF stability)
// Use <Icon k="icon-ampoule" /> in components; pass `iconKey` prop to blocks.
// All icons are 1em-sized monochrome SVGs that inherit `currentColor`.

const ICON_PATHS = {
  // Pédago / contenu
  "icon-ampoule":   <path d="M9 21h6m-5 3h4M12 3a7 7 0 0 0-4 12.7c.7.5 1 1.3 1 2.1V19h6v-1.2c0-.8.3-1.6 1-2.1A7 7 0 0 0 12 3z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />,
  "icon-crayon":    <path d="M3 21l3.8-1 11-11-2.8-2.8-11 11L3 21zM14 7l3 3M16 5l3 3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />,
  "icon-check":     <path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />,
  "icon-etoile":    <path d="M12 3l2.5 5.5 6 .8-4.4 4.1 1.1 6L12 16.6 6.8 19.4l1.1-6L3.5 9.3l6-.8L12 3z" fill="currentColor" />,
  "icon-livre":     <path d="M4 5a2 2 0 0 1 2-2h4v16H6a2 2 0 0 0-2 2V5zm16 0a2 2 0 0 0-2-2h-4v16h4a2 2 0 0 1 2 2V5z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />,
  "icon-cible":     <g fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></g>,
  "icon-attention": <path d="M12 3 1.5 21h21L12 3zm0 6v6m0 3v.01" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />,
  "icon-info":      <g fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 11v6m0-9v.01" strokeLinecap="round"/></g>,
  "icon-loupe":     <g fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5" strokeLinecap="round"/></g>,
  "icon-question":  <g fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7V14m0 3v.01" strokeLinecap="round" strokeLinejoin="round"/></g>,
  "icon-fleche":    <path d="M5 12h14m-5-5 5 5-5 5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />,
  "icon-trophee":   <path d="M8 4h8v3a4 4 0 0 1-8 0V4zm-3 1h3v2a3 3 0 0 1-3 0V5zm14 0h-3v2a3 3 0 0 0 3 0V5zM10 14h4v3l1 4h-6l1-4v-3z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>,
  "icon-horloge":   <g fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" strokeLinecap="round"/></g>,
  "icon-section":   <path d="M14 6c-2.5 0-4 1.3-4 3 0 3.5 7 2.5 7 6 0 1.7-1.5 3-4 3m0-12c-1.3 0-2.5.4-3.4 1M14 18c1.3 0 2.5-.4 3.4-1" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>,
  "icon-sigma":     <path d="M6 4h12l-3.5 4M6 4l6 8-6 8h12l-1-3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>,
};

function Icon({ k, size = "1em", className = "", style = {}, title }) {
  const node = ICON_PATHS[k];
  if (!node) {
    // fallback square — never crash a page over a missing icon
    return (
      <svg viewBox="0 0 24 24" width={size} height={size} className={className} style={style} aria-hidden="true">
        <rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeDasharray="2 2"/>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
         className={className} style={{ display: "inline-block", verticalAlign: "-0.12em", ...style }}
         role={title ? "img" : "presentation"} aria-label={title}>
      {node}
    </svg>
  );
}

const ICON_KEYS = Object.keys(ICON_PATHS);

Object.assign(window, { Icon, ICON_PATHS, ICON_KEYS });