// Minimal line icons for site type cards. 28x28 viewBox, currentColor stroke.
const SiteIcon = ({ id, size = 32 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (id) {
    case 'landing':
      return (
        <svg viewBox="0 0 28 28" {...s}>
          <rect x="5" y="3" width="18" height="22" rx="2" />
          <path d="M9 8h10M9 12h7M9 16h10M9 20h5" />
        </svg>
      );
    case 'card':
      return (
        <svg viewBox="0 0 28 28" {...s}>
          <rect x="3" y="6" width="22" height="16" rx="2" />
          <circle cx="10" cy="13" r="2.5" />
          <path d="M16 11h6M16 15h4M6 19h16" />
        </svg>
      );
    case 'corporate':
      return (
        <svg viewBox="0 0 28 28" {...s}>
          <rect x="3" y="5" width="22" height="18" rx="2" />
          <path d="M3 10h22M7 7.5h.01M10 7.5h.01M13 7.5h.01" />
          <path d="M7 14h6M7 17h8M7 20h4M17 14h4v6h-4z" />
        </svg>
      );
    case 'shop':
      return (
        <svg viewBox="0 0 28 28" {...s}>
          <path d="M4 7h20l-2 11H6L4 7z" />
          <path d="M9 7V5a5 5 0 0 1 10 0v2" />
          <circle cx="10" cy="22" r="1.5" />
          <circle cx="18" cy="22" r="1.5" />
        </svg>
      );
    case 'framework':
      return (
        <svg viewBox="0 0 28 28" {...s}>
          <path d="m10 8-6 6 6 6M18 8l6 6-6 6M15 5l-2 18" />
        </svg>
      );
    default:
      return null;
  }
};

const Glyph = ({ name, size = 18 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'check':
      return <svg viewBox="0 0 20 20" {...s}><path d="m4 10 4 4 8-9" /></svg>;
    case 'plus':
      return <svg viewBox="0 0 20 20" {...s}><path d="M10 4v12M4 10h12" /></svg>;
    case 'minus':
      return <svg viewBox="0 0 20 20" {...s}><path d="M4 10h12" /></svg>;
    case 'clock':
      return <svg viewBox="0 0 20 20" {...s}><circle cx="10" cy="10" r="7" /><path d="M10 6v4l2.5 2.5" /></svg>;
    case 'wallet':
      return <svg viewBox="0 0 20 20" {...s}><rect x="2.5" y="5" width="15" height="11" rx="2" /><path d="M14 10.5h2" /></svg>;
    case 'spark':
      return <svg viewBox="0 0 20 20" {...s}><path d="M10 2v4M10 14v4M2 10h4M14 10h4M5 5l2.5 2.5M12.5 12.5 15 15M5 15l2.5-2.5M12.5 7.5 15 5" /></svg>;
    case 'arrow':
      return <svg viewBox="0 0 20 20" {...s}><path d="M5 10h10M11 6l4 4-4 4" /></svg>;
    case 'cog':
      return <svg viewBox="0 0 20 20" {...s}><circle cx="10" cy="10" r="3" /><path d="M10 1v3M10 16v3M1 10h3M16 10h3M3.5 3.5l2 2M14.5 14.5l2 2M3.5 16.5l2-2M14.5 5.5l2-2" /></svg>;
    case 'info':
      return <svg viewBox="0 0 20 20" {...s}><circle cx="10" cy="10" r="7.5" /><path d="M10 9.5v4M10 7v.01" /></svg>;
    case 'phone':
      return <svg viewBox="0 0 20 20" {...s}><path d="M4 3h3l2 5-2.5 1.5a10 10 0 0 0 4 4L12 11l5 2v3a1 1 0 0 1-1.1 1A14 14 0 0 1 3 4.1 1 1 0 0 1 4 3z" /></svg>;
    case 'mail':
      return <svg viewBox="0 0 20 20" {...s}><rect x="2" y="4" width="16" height="12" rx="2" /><path d="m3 6 7 5 7-5" /></svg>;
    case 'doc':
      return <svg viewBox="0 0 20 20" {...s}><path d="M5 2h7l4 4v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z" /><path d="M12 2v4h4M7 11h6M7 14h6M7 8h3" /></svg>;
    default:
      return null;
  }
};

Object.assign(window, { SiteIcon, Glyph });