// Icons.jsx — minimal stroke iconography (Lucide-style, ~1.5px stroke)
// Substitute for Linear's proprietary icon set.

const Icon = ({ name, size = 16, color = 'currentColor', strokeWidth = 1.5, style = {} }) => {
  const paths = {
    // Service icons
    target: <><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" fill={color} stroke="none" /></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
    siren: <><path d="M7 18v-6a5 5 0 0 1 10 0v6" /><path d="M5 21h14" /><path d="M21 12h1" /><path d="M2 12h1" /><path d="M12 2v1" /><path d="M4.6 5.6l.7.7" /><path d="M18.7 6.3l.7-.7" /></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></>,
    cloud: <><path d="M17.5 19a4.5 4.5 0 1 0-1.5-8.74A6 6 0 1 0 6.5 19h11z" /></>,
    network: <><rect x="3" y="3" width="6" height="6" rx="1" /><rect x="15" y="3" width="6" height="6" rx="1" /><rect x="9" y="15" width="6" height="6" rx="1" /><path d="M6 9v3h12V9" /><path d="M12 12v3" /></>,
    refresh: <><path d="M21 12a9 9 0 0 1-15 6.7L3 16" /><path d="M3 12a9 9 0 0 1 15-6.7L21 8" /><path d="M21 3v5h-5" /><path d="M3 21v-5h5" /></>,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></>,

    // Generic UI
    arrowRight: <path d="M5 12h14M13 5l7 7-7 7" />,
    arrowUpRight: <path d="M7 17L17 7M7 7h10v10" />,
    check: <path d="M4 12l5 5L20 6" />,
    chevronDown: <path d="M6 9l6 6 6-6" />,
    chevronRight: <path d="M9 6l6 6-6 6" />,
    plus: <><path d="M12 5v14" /><path d="M5 12h14" /></>,
    minus: <path d="M5 12h14" />,
    sparkle: <><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3z" /></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>,
    code: <><path d="M16 18l6-6-6-6" /><path d="M8 6l-6 6 6 6" /></>,
    terminal: <><path d="M5 8l4 4-4 4" /><path d="M11 16h6" /></>,
    bug: <><rect x="8" y="6" width="8" height="14" rx="4" /><path d="M12 6V3" /><path d="M8 10l-4-2" /><path d="M16 10l4-2" /><path d="M8 14H4" /><path d="M16 14h4" /><path d="M8 18l-4 2" /><path d="M16 18l4 2" /></>,
    globe: <><circle cx="12" cy="12" r="10" /><path d="M2 12h20" /><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z" /></>,
    server: <><rect x="3" y="4" width="18" height="6" rx="1" /><rect x="3" y="14" width="18" height="6" rx="1" /><circle cx="7" cy="7" r="0.5" fill={color} stroke="none" /><circle cx="7" cy="17" r="0.5" fill={color} stroke="none" /></>,
    fingerprint: <><path d="M5 12a7 7 0 0 1 14 0" /><path d="M9 12a3 3 0 0 1 6 0v3" /><path d="M12 12v8" /><path d="M9 18c0 2 0 3 0 3" /><path d="M5 16v3" /></>,
    flame: <path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5s-3 3.5-3 5.5a7 7 0 0 0 7 7z" />,
    radar: <><circle cx="12" cy="12" r="10" /><path d="M12 12L19 5" /><path d="M12 12a4 4 0 1 1-4-4" /></>,
    layers: <><path d="M12 2l10 6-10 6L2 8l10-6z" /><path d="M2 16l10 6 10-6" /><path d="M2 12l10 6 10-6" /></>,
    activity: <path d="M3 12h4l3-9 4 18 3-9h4" />,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></>,
    phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 13 13 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 13 13 0 0 0 2.8.7 2 2 0 0 1 1.7 2z" />,
    chat: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
    download: <><path d="M12 3v12" /><path d="M7 10l5 5 5-5" /><path d="M5 21h14" /></>,
    menu: <><path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" /></>,
    close: <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>,
    aws: <path d="M3 17l9-12 9 12-9-3z" />,
    azure: <path d="M3 19l7-14 5 8-4 6z" />,
    gcp: <><circle cx="12" cy="12" r="9" /><path d="M12 3v18" /></>,
    docker: <><rect x="2" y="11" width="4" height="4" /><rect x="7" y="11" width="4" height="4" /><rect x="12" y="11" width="4" height="4" /><rect x="7" y="6" width="4" height="4" /><path d="M2 17h17a3 3 0 0 0 3-3" /></>,
    kubernetes: <><path d="M12 2l9 4v8l-9 8-9-8V6l9-4z" /><circle cx="12" cy="12" r="3" /></>,
  };
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke={color} strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, ...style }}
    >
      {paths[name] || null}
    </svg>
  );
};

// Logo mark — diamond/G shape, lavender
const GsMark = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" style={{ flexShrink: 0 }}>
    <path d="M16 2L29 9V23L16 30L3 23V9L16 2Z" fill="#5e6ad2" />
    <path d="M16 2L29 9L16 16L3 9L16 2Z" fill="#828fff" opacity="0.55" />
    <path d="M16 16L16 30L3 23L16 16Z" fill="#3a44a8" opacity="0.7" />
  </svg>
);

const GsWordmark = ({ height = 18 }) => (
  <span style={{
    fontFamily: 'var(--font-display)',
    fontSize: height * 0.85,
    fontWeight: 600,
    color: '#f7f8f8',
    letterSpacing: '-0.4px',
    lineHeight: 1,
  }}>
    GreySurface
  </span>
);

Object.assign(window, { Icon, GsMark, GsWordmark });