/* Icon set — small, gold-friendly inline SVG components */
const Icon = ({ name, size = 24, stroke = 1.6 }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  const paths = {
    star: <polygon points="12 2 14.9 8.6 22 9.3 16.7 14 18.2 21 12 17.4 5.8 21 7.3 14 2 9.3 9.1 8.6 12 2" />,
    masks: (
      <g>
        <path d="M5 6c0 5 2 9 5 9s5-4 5-9c-2 0-4 1-5 1s-3-1-5-1z" />
        <path d="M10 18c0 3 2 5 5 5s5-2 5-5c0-4-2-7-5-7" />
        <circle cx="8" cy="9" r="0.6" fill="currentColor" />
        <circle cx="12" cy="9" r="0.6" fill="currentColor" />
        <circle cx="14" cy="14" r="0.6" fill="currentColor" />
        <circle cx="18" cy="14" r="0.6" fill="currentColor" />
      </g>
    ),
    users: (
      <g>
        <circle cx="9" cy="8" r="3.5" />
        <path d="M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5" />
        <circle cx="17" cy="9" r="2.8" />
        <path d="M21.5 19c0-2.6-1.9-4.8-4.5-5.4" />
      </g>
    ),
    ticket: (
      <g>
        <path d="M3 8.5A1.5 1.5 0 0 1 4.5 7H19.5A1.5 1.5 0 0 1 21 8.5V11a2 2 0 0 0 0 4v2.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5V15a2 2 0 0 0 0-4V8.5z" />
        <path d="M14 7v12" strokeDasharray="2 2" />
      </g>
    ),
    heart: <path d="M12 21s-7-4.5-9.5-9.3C1 9 2.5 5 6.5 5c2 0 3.5 1.2 4.5 2.6C12 6.2 13.5 5 15.5 5c4 0 5.5 4 4 6.7C19 16.5 12 21 12 21z" />,
    arrowRight: <g><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></g>,
    chevronRight: <polyline points="9 6 15 12 9 18" />,
    close: <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>,
    plus: <g><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
    calendar: <g><rect x="3" y="5" width="18" height="16" rx="2" /><line x1="3" y1="10" x2="21" y2="10" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="16" y1="3" x2="16" y2="7" /></g>,
    clock: <g><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 16 14" /></g>,
    pin: <g><path d="M12 22s-7-7.2-7-12a7 7 0 0 1 14 0c0 4.8-7 12-7 12z" /><circle cx="12" cy="10" r="2.5" /></g>,
    phone: <path d="M5 4h3l2 5-2 1a12 12 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z" />,
    mail: <g><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></g>,
    facebook: <path d="M16 8h-2.5c-.5 0-.5.5-.5 1v2h3l-.5 3H13v7h-3v-7H8v-3h2V8.5C10 6 11 4 13.5 4H16v4z" fill="currentColor" stroke="none" />,
    instagram: <g><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="1" fill="currentColor" stroke="none" /></g>,
    youtube: <g><rect x="3" y="6" width="18" height="12" rx="3" /><polygon points="10 9 16 12 10 15" fill="currentColor" stroke="none" /></g>,
    sparkle: (
      <g>
        <path d="M12 3 L13.5 10.5 L21 12 L13.5 13.5 L12 21 L10.5 13.5 L3 12 L10.5 10.5 Z" fill="currentColor" stroke="none" />
      </g>
    ),
    columns: <g><path d="M4 21V8L12 4l8 4v13" /><path d="M9 21V10M15 21V10" /></g>,
    pavilion: <g><path d="M3 10 12 4l9 6" /><path d="M5 10v11h14V10" /><path d="M9 21V14h6v7" /></g>,
    check: <polyline points="5 12 10 17 19 7" />,
  };
  return <svg {...props}>{paths[name]}</svg>;
};

window.Icon = Icon;