/* Brand logos for connection cards — inline SVGs, no external deps */
const BrandLogos = {
  "google-calendar": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="8" width="40" height="36" rx="4" fill="#fff" stroke="#E4E7EB"/>
      <rect x="4" y="8" width="40" height="8" rx="4" fill="#4285F4"/>
      <rect x="4" y="12" width="40" height="4" fill="#4285F4"/>
      <text x="24" y="36" fontFamily="system-ui" fontWeight="600" fontSize="16" textAnchor="middle" fill="#4285F4">31</text>
      <circle cx="14" cy="12" r="2" fill="#1A73E8"/>
      <circle cx="34" cy="12" r="2" fill="#1A73E8"/>
    </svg>
  ),
  "mpesa": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="10" width="40" height="28" rx="6" fill="#1DB954"/>
      <text x="24" y="29" fontFamily="system-ui" fontWeight="700" fontSize="11" textAnchor="middle" fill="#fff">M-PESA</text>
    </svg>
  ),
  "airtel-money": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="10" width="40" height="28" rx="6" fill="#E40000"/>
      <text x="24" y="29" fontFamily="system-ui" fontWeight="700" fontSize="10" textAnchor="middle" fill="#fff">airtel</text>
    </svg>
  ),
  "google-drive": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <path d="M17 8l-12 22 6 10h24l-6-10L17 8z" fill="#FFD04B"/>
      <path d="M17 8h14l12 22H29L17 8z" fill="#4285F4"/>
      <path d="M11 30l-6 10h24l6-10H11z" fill="#0F9D58"/>
    </svg>
  ),
  "webhook": (
    <svg viewBox="0 0 48 48" width="28" height="28" fill="none" stroke="#6B7280" strokeWidth="3" strokeLinecap="round">
      <circle cx="18" cy="14" r="6" fill="#F27621" stroke="none"/>
      <circle cx="34" cy="32" r="6" fill="#8B5CF6" stroke="none"/>
      <circle cx="14" cy="36" r="6" fill="#0EA5E9" stroke="none"/>
      <path d="M22 18l8 10M20 20l-4 10M28 14l6 12"/>
    </svg>
  ),
  "zapier": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <circle cx="24" cy="24" r="20" fill="#FF4A00"/>
      <path d="M24 10v8M24 30v8M10 24h8M30 24h8M14 14l6 6M28 28l6 6M34 14l-6 6M14 34l6-6" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
    </svg>
  ),
  "hubspot": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <circle cx="32" cy="24" r="8" fill="none" stroke="#FF7A59" strokeWidth="3"/>
      <circle cx="32" cy="24" r="3" fill="#FF7A59"/>
      <path d="M32 16V8M20 24h4" stroke="#FF7A59" strokeWidth="3"/>
      <circle cx="16" cy="24" r="3" fill="#FF7A59"/>
    </svg>
  ),
  "salesforce": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <path d="M10 28c0-5 4-9 9-9 2 0 4 .7 5.5 2 1.5-3 4.5-5 8-5 5 0 9 4 9 9 0 .5 0 1-.1 1.5 2.4.8 4.1 3 4.1 5.5 0 3.3-2.7 6-6 6H10c-3.3 0-6-2.7-6-6s2.7-6 6-6c0 .7 0 1.3 0 2z" fill="#00A1E0"/>
    </svg>
  ),
  "pipedrive": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="4" width="40" height="40" rx="8" fill="#26292C"/>
      <path d="M24 14c4 0 7 3 7 7s-3 7-7 7c-2 0-3-1-3-1v8h-5V14h8z" fill="#6CBE4C"/>
    </svg>
  ),
  "zoho-crm": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="4" width="40" height="40" rx="8" fill="#fff" stroke="#E4E7EB"/>
      <rect x="6" y="12" width="36" height="10" rx="2" fill="#E8403A"/>
      <rect x="6" y="26" width="14" height="14" rx="2" fill="#089949"/>
      <rect x="22" y="26" width="10" height="14" rx="2" fill="#F9B21D"/>
      <rect x="34" y="26" width="8" height="14" rx="2" fill="#226DB4"/>
    </svg>
  ),
  "zoho-mail": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="10" width="40" height="28" rx="4" fill="#fff" stroke="#E4E7EB"/>
      <path d="M4 12l20 14 20-14" fill="none" stroke="#226DB4" strokeWidth="2.5"/>
      <path d="M4 12v2l20 14 20-14v-2" fill="#E8403A"/>
    </svg>
  ),
  "slack": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="8" y="20" width="14" height="6" rx="3" fill="#ECB22E"/>
      <rect x="22" y="8" width="6" height="14" rx="3" fill="#36C5F0"/>
      <rect x="26" y="22" width="14" height="6" rx="3" fill="#2EB67D"/>
      <rect x="20" y="26" width="6" height="14" rx="3" fill="#E01E5A"/>
    </svg>
  ),
  "microsoft-teams": (
    <svg viewBox="0 0 48 48" width="28" height="28">
      <rect x="4" y="12" width="28" height="24" rx="3" fill="#464EB8"/>
      <text x="18" y="30" fontFamily="system-ui" fontSize="16" fontWeight="700" textAnchor="middle" fill="#fff">T</text>
      <circle cx="38" cy="18" r="6" fill="#7B83EB"/>
    </svg>
  ),
};

/* Safe lookup */
const BrandLogo = ({ id, fallback }) => {
  const logo = BrandLogos[id];
  if (logo) return <div className="brand-logo">{logo}</div>;
  return (
    <div className="brand-logo brand-logo-fallback">
      <Icon name={fallback || "link"} size={18}/>
    </div>
  );
};

Object.assign(window, { BrandLogos, BrandLogo });
