// ============================================================
// Cacyli — Icon set (inline SVG, 24x24)
// All icons are decorative unless used in alt context.
// ============================================================
const Icon = ({ name, size = 20, className = '' }) => {
  const props = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 1.6,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    className,
    'aria-hidden': 'true',
    focusable: 'false',
  };
  switch (name) {
    case 'arrow-right':
      return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-down':
      return <svg {...props}><path d="M12 5v14M6 13l6 6 6-6"/></svg>;
    case 'plus':
      return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'check':
      return <svg {...props}><path d="M5 13l4 4L19 7"/></svg>;
    case 'area':
      return <svg {...props}><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg>;
    case 'bed':
      return <svg {...props}><path d="M3 18v-7a3 3 0 013-3h12a3 3 0 013 3v7M3 14h18M7 8V5"/></svg>;
    case 'calendar':
      return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case 'star':
      return <svg {...props}><path d="M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.8 1-6.1L3.2 9.4l6.1-.9z"/></svg>;
    case 'sparkles':
      return <svg {...props}><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5zM19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z"/></svg>;
    case 'shield':
      return <svg {...props}><path d="M12 3l8 3v6c0 4.5-3.5 8.5-8 9-4.5-.5-8-4.5-8-9V6z"/></svg>;
    case 'trending':
      return <svg {...props}><path d="M3 17l6-6 4 4 8-8M14 7h7v7"/></svg>;
    case 'map':
      return <svg {...props}><path d="M9 20l-6-3V4l6 3 6-3 6 3v13l-6-3-6 3zM9 4v16M15 4v16"/></svg>;
    case 'pin':
      return <svg {...props}><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'menu':
      return <svg {...props}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case 'close':
      return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'play':
      return <svg {...props}><path d="M7 4l13 8-13 8z" fill="currentColor"/></svg>;
    case 'phone':
      return <svg {...props}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>;
    case 'mail':
      return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'link':
      return <svg {...props}><path d="M14 5h5v5M19 5l-7 7M10 19H5v-5M5 19l7-7"/></svg>;
    default:
      return null;
  }
};

window.Icon = Icon;