const ICON_CYCLE = ['drop', 'leaf', 'seed', 'grain', 'root', 'sun', 'crystal', 'sprig', 'berry'];

const ICON_PATHS = {
  drop: <path d="M12 3c4.2 5.1 6.4 8.4 6.4 11.2A6.4 6.4 0 0 1 12 20.6a6.4 6.4 0 0 1-6.4-6.4C5.6 11.4 7.8 8.1 12 3z" />,
  leaf: <path d="M4.5 19.5C4.5 9.5 10.5 4.5 19.5 4.5c0 9.5-6 15-15 15zM4.5 19.5 17 7" />,
  seed: <ellipse cx="12" cy="12" rx="5" ry="9" transform="rotate(24 12 12)" />,
  grain: <path d="M12 3v18M12 6l4-2M12 9l4-2M12 12l4-2M12 6l-4-2M12 9l-4-2M12 12l-4-2" />,
  root: <path d="M12 3v6M12 9 7 14M12 9l5 5M7 14 4 19M17 14l3 5M7 14l-1 6M17 14l1 6" />,
  sun: <React.Fragment><circle cx="12" cy="12" r="4.2" /><path d="M12 3.5v2.4M12 18.1v2.4M4.6 12H7M17 12h2.4M6.6 6.6l1.7 1.7M15.7 15.7l1.7 1.7M6.6 17.4l1.7-1.7M15.7 8.3l1.7-1.7" /></React.Fragment>,
  crystal: <path d="M12 3 5 9l7 12 7-12z M5 9h14M12 3v18" />,
  sprig: <path d="M12 20V6M12 6C9 6 7 8 7 10.5 9.5 10.5 12 9 12 6zM12 10c3 0 5-2 5-4.5-2.5 0-5 1.5-5 4.5z" />,
  berry: <React.Fragment><circle cx="9.5" cy="14" r="3" /><circle cx="14.5" cy="14" r="3" /><circle cx="12" cy="9" r="3" /></React.Fragment>,
  handshake: <React.Fragment><circle cx="8" cy="8" r="2.6" /><circle cx="16" cy="8" r="2.6" /><path d="M3.5 19c0-2.8 2-4.6 4.5-4.6S12.5 16.2 12.5 19M11.5 19c0-2.8 2-4.6 4.5-4.6s4.5 1.8 4.5 4.6" /></React.Fragment>,
  minus: <path d="M5 12h14" />,
  clock: <React.Fragment><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3.5 2" /></React.Fragment>,
  check: <path d="M4.5 12.5l5 5L19.5 7" />,
  flask: <path d="M9 3h6M10 3v5.5L5.5 17a2.5 2.5 0 0 0 2.2 3.6h8.6a2.5 2.5 0 0 0 2.2-3.6L14 8.5V3M7.5 15h9" />,
  compass: <React.Fragment><circle cx="12" cy="12" r="8.5" /><path d="M15 9l-2.2 5.8L7 17l2.2-5.8z" /></React.Fragment>,
  screen: <React.Fragment><rect x="3" y="5" width="18" height="12" rx="1" /><path d="M10 9.5l4 2.5-4 2.5zM9 20h6" /></React.Fragment>,
};

function IconGlyph({ kind, size = 22, color = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {ICON_PATHS[kind] || ICON_PATHS.drop}
    </svg>
  );
}

Object.assign(window, { IconGlyph, ICON_CYCLE });