// vendors.jsx — tracker vendor data + simple own-rendered brand monogram badges.
// Simplified, brand-colored glyphs (not exact logo art): recognizable as the
// vendor in a detection list, without reproducing trademarked logo artwork.
// `pill` mirrors the Category column in the real PageScanner panel.

const VENDORS = {
  meta: {
    name: 'Meta Pixel', short: 'Meta', sev: 'critical', bg: '#0866FF',
    reads: 'Captures Social Security field', pill: { label: 'Social media', icon: 'fa-share-nodes' },
  },
  tiktok: {
    name: 'TikTok Pixel', short: 'TikTok', sev: 'critical', bg: '#000000',
    reads: 'Reads date-of-birth input', pill: { label: 'Social media', icon: 'fa-share-nodes' },
  },
  hotjar: {
    name: 'Hotjar', short: 'Hotjar', sev: 'critical', bg: '#FF3C00',
    reads: 'Records keystrokes on diagnosis', pill: { label: 'Session replay', icon: 'fa-film' },
  },
  ga: {
    name: 'Google Analytics 4', short: 'GA4', sev: 'warn', bg: '#F9AB00',
    reads: 'Sends member ID on pageview', pill: { label: 'Analytics', icon: 'fa-chart-simple' },
  },
  quora: {
    name: 'Quora Pixel', short: 'Quora', sev: 'warn', bg: '#B92B27',
    reads: 'Conversion tracking beacon', pill: { label: 'Analytics', icon: 'fa-chart-simple' },
  },
  linkedin: {
    name: 'LinkedIn Insight', short: 'LinkedIn', sev: 'warn', bg: '#0A66C2',
    reads: 'Behavioral retargeting', pill: { label: 'Social media', icon: 'fa-share-nodes' },
  },
  jquery: {
    name: 'jQuery 3.4 (CDN)', short: 'jQuery', sev: 'info', bg: '#0769AD',
    reads: 'Unverified third-party CDN', pill: { label: 'CDN', icon: 'fa-server' },
  },
};

// Simplified glyphs. Each draws inside a 24x24 viewBox in white over the brand bg.
function VendorGlyph({ id }) {
  const common = { fill: '#fff' };
  switch (id) {
    case 'meta': // double-loop infinity-ish mark
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <path d="M6.5 7.5c2 0 3 2 5.5 6s3.5 6 5.5 6c1.6 0 2.5-1.4 2.5-3.2 0-2.2-1.3-5-2.7-7.3C17.6 8 16.2 6.5 14 6.5c-1.7 0-2.9 1-4 2.6"
            fill="none" stroke="#fff" strokeWidth="2.1" strokeLinecap="round" />
          <path d="M17.5 7.5c-2 0-3 2-5.5 6s-3.5 6-5.5 6C4.9 19.5 4 18.1 4 16.3c0-2.2 1.3-5 2.7-7.3C8.4 8 9.8 6.5 12 6.5"
            fill="none" stroke="#fff" strokeWidth="2.1" strokeLinecap="round" opacity="0.55" />
        </svg>
      );
    case 'tiktok': // music note
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <path d="M14 4v9.2a3.3 3.3 0 1 1-2.6-3.23V12a1.5 1.5 0 1 0 1.1 1.45V4h1.5z" {...common} />
          <path d="M14 4c.3 1.9 1.7 3.3 3.6 3.6V5.4C16.4 5.1 15.4 4.2 15.2 3L14 4z" fill="#25F4EE" />
          <path d="M14.6 4.6c.4 1.6 1.6 2.8 3 3.2V6.1C16.6 5.8 15.7 5 15.4 4l-.8.6z" fill="#FE2C55" opacity="0.85" />
        </svg>
      );
    case 'hotjar': // flame
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <path d="M12 3c.5 3-1.5 4.2-2.8 5.7C7.6 10.6 7 12.3 7 14a5 5 0 0 0 10 0c0-2.3-1-3.7-2.2-5 .2 1.3-.3 2.2-1.1 2.2-1.1 0-1.1-1.4-1.1-3.1C12.6 6.2 12.6 4.3 12 3z" {...common} />
        </svg>
      );
    case 'ga': // ascending bars
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <rect x="5" y="13" width="3.6" height="7" rx="1.8" {...common} />
          <rect x="10.2" y="9" width="3.6" height="11" rx="1.8" {...common} />
          <rect x="15.4" y="5" width="3.6" height="15" rx="1.8" fill="#fff" opacity="0.85" />
        </svg>
      );
    case 'quora': // Q
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <text x="12" y="17.5" textAnchor="middle" fontFamily="Georgia, serif" fontWeight="700" fontSize="16" fill="#fff">Q</text>
        </svg>
      );
    case 'linkedin': // in
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <text x="12" y="17" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="800" fontSize="12" fill="#fff">in</text>
        </svg>
      );
    case 'jquery': // jQ
      return (
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <text x="12" y="16.5" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="800" fontSize="10" fill="#fff">jQ</text>
        </svg>
      );
    default:
      return null;
  }
}

// A rounded vendor badge (used on pins + in the panel table).
function VendorBadge({ id, size = 30, ring = false }) {
  const v = VENDORS[id];
  if (!v) return null;
  return (
    <span style={{
      width: size, height: size, borderRadius: 8,
      background: v.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      flex: 'none', padding: size * 0.16,
      boxShadow: ring ? '0 0 0 3px rgba(255,255,255,0.9), 0 4px 12px rgba(0,0,0,0.22)' : '0 1px 3px rgba(0,0,0,0.25)',
    }}>
      <VendorGlyph id={id} />
    </span>
  );
}

Object.assign(window, { VENDORS, VendorGlyph, VendorBadge });