// SVG icon set — Alcantara Studio 3D Hi-Fi
// Style: outlined, 1.8 stroke, slightly geometric. Geek/maker vibe.

function Icon({ name, size = 24, stroke = 'currentColor', fill = 'none', strokeWidth = 1.8, ...rest }) {
  const props = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill,
    stroke,
    strokeWidth,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    ...rest,
  };
  switch (name) {
    case 'whatsapp':
      return (
        <svg {...props}>
          <path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21" />
          <path d="M9 10c0 3 2 5 5 5l1.5-1.5-2-1-1 1c-1 0-2.5-1.5-2.5-2.5l1-1-1-2L8.5 8.5C8.5 9 9 10 9 10z" fill={stroke} />
        </svg>
      );
    case 'arrow-right':
      return (
        <svg {...props}>
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case 'arrow-up-right':
      return (
        <svg {...props}>
          <path d="M7 17L17 7M9 7h8v8" />
        </svg>
      );
    case 'star':
      return (
        <svg {...props} fill={stroke}>
          <path d="M12 2l2.5 7h7l-5.5 4.5 2 7L12 16l-6 4.5 2-7L2.5 9h7z" />
        </svg>
      );
    case 'chat':
      return (
        <svg {...props}>
          <path d="M21 12a8 8 0 0 1-12 7l-5 1 1-4a8 8 0 1 1 16-4z" />
          <path d="M8 11h.01M12 11h.01M16 11h.01" strokeWidth="2.4" />
        </svg>
      );
    case 'pencil':
      return (
        <svg {...props}>
          <path d="M16 3l5 5L8 21H3v-5z" />
          <path d="M14 5l5 5" />
        </svg>
      );
    case 'printer':
      return (
        <svg {...props}>
          <path d="M6 9V3h12v6M6 18H3v-7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7h-3" />
          <rect x="6" y="14" width="12" height="8" />
        </svg>
      );
    case 'box':
      return (
        <svg {...props}>
          <path d="M21 8l-9-5-9 5v8l9 5 9-5z" />
          <path d="M3 8l9 5 9-5M12 13v9" />
        </svg>
      );
    case 'sparkle':
      return (
        <svg {...props}>
          <path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4" />
        </svg>
      );
    case 'check-circle':
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M8 12l3 3 5-6" />
        </svg>
      );
    case 'play':
      return (
        <svg {...props} fill={stroke}>
          <path d="M6 4l14 8-14 8z" />
        </svg>
      );
    case 'menu':
      return (
        <svg {...props}>
          <path d="M3 6h18M3 12h18M3 18h18" />
        </svg>
      );
    case 'instagram':
      return (
        <svg {...props}>
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="0.6" fill={stroke} />
        </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 'plus':
      return (
        <svg {...props}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case 'arrow-down':
      return (
        <svg {...props}>
          <path d="M12 5v14M6 13l6 6 6-6" />
        </svg>
      );
    case 'arrow-left':
      return (
        <svg {...props}>
          <path d="M19 12H5M11 18l-6-6 6-6" />
        </svg>
      );
    case 'cube':
      return (
        <svg {...props}>
          <path d="M21 8l-9-5-9 5v8l9 5 9-5z" />
          <path d="M3 8l9 5 9-5M12 13v9" />
        </svg>
      );
    case 'ruler':
      return (
        <svg {...props}>
          <path d="M3 17l4 4L21 7l-4-4z" />
          <path d="M7 12l2 2M10 9l2 2M13 6l2 2" />
        </svg>
      );
    case 'clock':
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5l3 2" />
        </svg>
      );
    case 'palette':
      return (
        <svg {...props}>
          <path d="M12 22a10 10 0 1 1 10-10c0 3-2 4-5 4h-2a2 2 0 0 0-2 2v2c0 1-1 2-1 2z" />
          <circle cx="7" cy="11" r="1" fill={stroke} />
          <circle cx="11" cy="7" r="1" fill={stroke} />
          <circle cx="16" cy="8" r="1" fill={stroke} />
          <circle cx="18" cy="13" r="1" fill={stroke} />
        </svg>
      );
    case 'diamond':
      return (
        <svg {...props}>
          <polygon points="12 2 22 12 12 22 2 12" />
        </svg>
      );
    case 'target':
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="10" />
          <circle cx="12" cy="12" r="6" />
          <circle cx="12" cy="12" r="2" fill={stroke} />
        </svg>
      );
    case 'corner-down-right':
      return (
        <svg {...props}>
          <polyline points="15 10 20 15 15 20" />
          <path d="M4 4v7a4 4 0 0 0 4 4h12" />
        </svg>
      );
    default:
      return <svg {...props} />;
  }
}

const _ICON_MAP = {
  '✦': 'sparkle', '✶': 'sparkle',
  '◆': 'diamond',
  '◉': 'target',
  '★': 'star', '☆': 'star',
  '✏': 'pencil',
  '↪': 'corner-down-right',
};
function resolveIcon(sym) { return _ICON_MAP[sym] || 'sparkle'; }

window.Icon = Icon;
window.resolveIcon = resolveIcon;