// urlapi.me — Stylised brand glyphs for integrations.
// Replace any of these with the real brand SVG (drop into BL.<Name>) later.
// Each glyph: <svg viewBox="0 0 24 24"> with a single icon at size prop.

const BL = {
  // Google G (multicolour)
  Google: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <path fill="#4285F4" d="M22 12.2c0-.8-.1-1.6-.2-2.3H12v4.3h5.6c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.7Z"/>
      <path fill="#34A853" d="M12 22c2.8 0 5.2-.9 6.9-2.5l-3.4-2.6c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.8-4.2H2.7v2.7C4.4 19.7 7.9 22 12 22Z"/>
      <path fill="#FBBC05" d="M6.2 13.7c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V7.2H2.7C2 8.6 1.6 10.2 1.6 12c0 1.8.4 3.4 1.1 4.8l3.5-3.1Z"/>
      <path fill="#EA4335" d="M12 5.9c1.5 0 2.9.5 3.9 1.5l3-3C17.2 2.8 14.8 1.8 12 1.8 7.9 1.8 4.4 4.1 2.7 7.2l3.5 2.7C7 7.7 9.3 5.9 12 5.9Z"/>
    </svg>
  ),
  // GA4 — orange analytics bars
  GA4: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <rect x="14" y="3" width="6" height="18" rx="3" fill="#F9AB00"/>
      <rect x="9"  y="9" width="6" height="12" rx="3" fill="#E37400"/>
      <circle cx="7" cy="18" r="3" fill="#E37400"/>
    </svg>
  ),
  // Meta — infinity loop
  Meta: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id="bl-meta" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#0064E0"/>
          <stop offset="50%" stopColor="#0866FF"/>
          <stop offset="100%" stopColor="#46BCFC"/>
        </linearGradient>
      </defs>
      <path d="M3 12c0-3.6 2-6 4.7-6 1.7 0 3 .9 4.1 2.2.4.5.8 1 1.2 1.7.4-.7.8-1.2 1.2-1.7C15.3 6.9 16.6 6 18.3 6 21 6 23 8.4 23 12s-2 6-4.7 6c-1.7 0-3-.9-4.1-2.2-.4-.5-.8-1-1.2-1.7-.4.7-.8 1.2-1.2 1.7C10.7 17.1 9.4 18 7.7 18 5 18 3 15.6 3 12Zm9 1.2c.6 1 1.2 1.8 1.8 2.4.8.8 1.6 1.2 2.5 1.2 1.7 0 2.9-1.6 2.9-3.8 0-3.7-2-7-4.7-7-.8 0-1.6.3-2.3 1-.5.5-1 1.2-1.4 2.1.4.9.8 1.7 1.2 2.4Zm-1.7-1.4c-.5-.9-1.1-1.7-1.6-2.3-.8-.8-1.6-1.2-2.5-1.2-1.6 0-2.7 1.6-2.7 3.7 0 3.7 2 7 4.5 7 .8 0 1.6-.3 2.3-1 .4-.4.7-.9 1-1.5-.4-.8-.8-1.6-1-2.7Z" fill="url(#bl-meta)"/>
    </svg>
  ),
  // LINE — green chat bubble with LINE feel
  LINE: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <path d="M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.1 8.3 7.8.3.1.7.2.8.5.1.3 0 .8-.1 1.1l-.1.6c-.1.3-.3 1.3 1.1.7 1.4-.6 7.7-4.6 10.5-7.8C24 12.2 24 11.6 24 11c0-4.4-4.5-8-10-8Z" fill="#06C755"/>
      <path d="M7 10.5h-.6c-.1 0-.2.1-.2.2v3.7c0 .1.1.2.2.2h.6c.1 0 .2-.1.2-.2v-3.7c0-.1-.1-.2-.2-.2Zm5.7 0H12c-.1 0-.2.1-.2.2v2.2L10 10.6c0-.1-.1-.1-.2-.1h-.6c-.1 0-.2.1-.2.2v3.7c0 .1.1.2.2.2h.6c.1 0 .2-.1.2-.2v-2.2l1.8 2.4.1.1h.7c.1 0 .2-.1.2-.2v-3.7c0-.2-.1-.3-.2-.3Zm-7.2 3h-1.6v-2.8c0-.1-.1-.2-.2-.2h-.6c-.1 0-.2.1-.2.2v3.7c0 .1.1.2.2.2h2.4c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.3-.2-.3Zm12.6-2h-2.4c-.1 0-.2.1-.2.2v3.7c0 .1.1.2.2.2h2.4c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2h-1.6v-.6h1.6c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2h-1.6v-.6h1.6c.1 0 .2-.1.2-.2v-.5c0-.2-.1-.2-.2-.2Z" fill="#fff"/>
    </svg>
  ),
  // TikTok — note with offset
  TikTok: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <path d="M16 3v2.1c.7 1.4 2.1 2.4 3.7 2.6V10c-1.4 0-2.7-.4-3.7-1.2v6.5a5.7 5.7 0 1 1-5.7-5.7v2.5a3.2 3.2 0 1 0 3.2 3.2V3H16Z" fill="#00F2EA"/>
      <path d="M17 3v2.1c.7 1.4 2.1 2.4 3.7 2.6V10c-1.4 0-2.7-.4-3.7-1.2v6.5a5.7 5.7 0 1 1-5.7-5.7v2.5a3.2 3.2 0 1 0 3.2 3.2V3H17Z" fill="#FF004F" opacity="0.85" transform="translate(-1 1)"/>
      <path d="M16.5 3v2.1c.7 1.4 2.1 2.4 3.7 2.6V10c-1.4 0-2.7-.4-3.7-1.2v6.5a5.7 5.7 0 1 1-5.7-5.7v2.5a3.2 3.2 0 1 0 3.2 3.2V3h2.5Z" fill="#fff"/>
    </svg>
  ),
  // X (Twitter)
  X: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <path d="M18.2 2H21.5l-7.2 8.2L23 22h-6.7l-5.2-6.8L5 22H1.7l7.7-8.8L1 2h6.9l4.7 6.2L18.2 2Zm-1.2 18h1.8L7.1 4H5.2l11.8 16Z" fill="#fff"/>
    </svg>
  ),
  // Shopify
  Shopify: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <path d="M15.5 4.2c0-.2-.2-.3-.4-.3l-1.5.1S12.5 3 12.4 2.9c-.1-.1-.4-.1-.5-.1l-.5.2c-.2-.5-.6-1.1-1.4-1.1h-.1c-.2-.3-.5-.4-.7-.4-1.9.1-2.8 2.5-3.1 3.6l-2 .6c-.6.2-.6.2-.7.8L2 18.7l11 2.1V3.8c-.1.1-.2.2-.4.2-.4 0-1-.4-1-.4-.1.6-.4 2-.4 2l-1.6.5c.3-1.2.8-2.4 1.5-2.4h.1c-.3.4-.4 1-.4 1.4h.1Z" fill="#95BF47"/>
      <path d="M15.1 3.9 13 4.5s-.2-1.1-.3-1.1c.1 0 .2 0 .3-.1l.2-.2 1.9-.1c.1.1.4.5.4.9 0 .1-.1.2-.1.3 0-.1-.2-.3-.3-.3Z" fill="#5E8E3E"/>
      <path d="M15.1 3.9c.2 0 .4.1.4.3l1.5 12.6c0 .2-.1.4-.3.4l-3.7.8V3.7l.2.2 1.9-.1Z" fill="#5E8E3E"/>
      <path d="m10.4 8.4-.5 1.4s-.6-.3-1.4-.3c-1.2 0-1.2.7-1.2.9 0 1 2.7 1.4 2.7 3.8 0 1.9-1.2 3.1-2.8 3.1-2 0-3-1.2-3-1.2l.5-1.8s1 .9 1.9.9c.6 0 .8-.5.8-.8 0-1.4-2.2-1.4-2.2-3.6 0-1.8 1.3-3.6 4-3.6 1 .1 1.2.2 1.2.2Z" fill="#fff"/>
    </svg>
  ),
  // BASE — circle B
  BASE: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <circle cx="12" cy="12" r="10" fill="#3E8CFE"/>
      <path d="M9 7h4.2c1.6 0 2.8 1.1 2.8 2.6 0 1-.5 1.7-1.3 2 1 .3 1.6 1.2 1.6 2.3 0 1.6-1.3 2.8-3 2.8H9V7Zm1.8 4h2.2c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2h-2.2V11Zm0 4.2h2.5c.8 0 1.3-.5 1.3-1.3 0-.7-.5-1.3-1.3-1.3h-2.5v2.6Z" fill="#fff"/>
    </svg>
  ),
  // WordPress — circle W
  WordPress: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <circle cx="12" cy="12" r="10" fill="#21759B"/>
      <path d="m6 9 2.6 7L10 12l-1.4-3H6Zm6 7 2.4-7H12L9.6 16H12Zm6 0c.4-1 .8-2.6.8-4.2 0-1.6-.6-2.8-.6-2.8l-2 7h1.8Z" fill="#fff"/>
    </svg>
  ),
  // Slack — for AI integrations
  Slack: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <rect x="2" y="14" width="6" height="3" rx="1.5" fill="#36C5F0"/>
      <rect x="2" y="7"  width="3" height="6" rx="1.5" fill="#2EB67D"/>
      <rect x="14" y="2" width="3" height="6" rx="1.5" fill="#ECB22E"/>
      <rect x="7" y="2"  width="6" height="3" rx="1.5" fill="#E01E5A"/>
      <rect x="14" y="14" width="3" height="6" rx="1.5" fill="#E01E5A"/>
      <rect x="14" y="7"  width="6" height="3" rx="1.5" fill="#ECB22E"/>
      <rect x="7"  y="14" width="3" height="6" rx="1.5" fill="#2EB67D"/>
      <rect x="7"  y="7"  width="6" height="3" rx="1.5" fill="#36C5F0"/>
    </svg>
  ),
  // Claude
  Claude: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <circle cx="12" cy="12" r="10" fill="#CC785C"/>
      <path d="M8.5 9.5 6 16h1.4l.5-1.4h2.5L11 16h1.4l-2.5-6.5H8.5Zm0 4 .7-2.4.8 2.4H8.5Zm5 1.5V8h1.2v7H17v1h-3.5V9.5Z" fill="#fff"/>
    </svg>
  ),
  // OpenAI / ChatGPT
  OpenAI: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <path d="M22 10.1a5.4 5.4 0 0 0-.5-4.4 5.5 5.5 0 0 0-5.9-2.6 5.5 5.5 0 0 0-9.3 2 5.4 5.4 0 0 0-3.6 2.6 5.5 5.5 0 0 0 .7 6.4 5.4 5.4 0 0 0 .4 4.5 5.5 5.5 0 0 0 5.9 2.6 5.4 5.4 0 0 0 4.1 1.8 5.5 5.5 0 0 0 5.2-3.8 5.4 5.4 0 0 0 3.6-2.6 5.5 5.5 0 0 0-.6-6.5Zm-8.2 11.5a4.1 4.1 0 0 1-2.6-.9l.1-.1 4.4-2.5c.2-.1.4-.4.4-.7v-6.2l1.8 1.1v5.2a4.1 4.1 0 0 1-4.1 4.1Zm-8.8-3.7a4.1 4.1 0 0 1-.5-2.7v-5.4l1.8 1v5.4a3 3 0 0 0 1.4 2.6l4.4 2.5-1.8 1-4.4-2.5a4.1 4.1 0 0 1-.9-1.9Zm-1.1-9.5a4.1 4.1 0 0 1 2.1-1.8v5.5c0 .3.1.6.4.7l5.4 3.1-1.8 1-4.4-2.5a4.1 4.1 0 0 1-1.7-5.9Zm15.2 3.5L13.7 8.7 15.5 7.6l4.4 2.5a4.1 4.1 0 0 1-.6 7.4v-5.5c0-.3-.2-.6-.4-.7Zm1.8-2.7-.1-.1L16.4 6.6c-.2-.1-.5-.1-.8 0L10.2 9.7V7.6l4.4-2.5a4.1 4.1 0 0 1 6.2 4.3Zm-11.7 3.7-1.8-1.1V6.6a4.1 4.1 0 0 1 6.7-3.2l-.1.1-4.4 2.5c-.2.1-.4.4-.4.7v6.2Zm1-2.1L12 9.5l2.4 1.4v2.8L12 15.1l-2.4-1.4v-2.8Z" fill="#10A37F"/>
    </svg>
  ),
  // MCP — generic protocol mark
  MCP: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
      <rect x="2" y="2" width="20" height="20" rx="5" fill="#7C5CFF"/>
      <path d="M6 9v6m12-6v6M6 9l6 3 6-3M6 15l6-3 6 3" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  ),
};

// Map brand string → component, plus an accent colour for chart/bar use
const BRAND = {
  "Meta":          { L: BL.Meta,     c: "#0866FF" },
  "Meta CAPI":     { L: BL.Meta,     c: "#0866FF" },
  "Google":        { L: BL.Google,   c: "#EA4335" },
  "Google ECV":    { L: BL.Google,   c: "#EA4335" },
  "GA4":           { L: BL.GA4,      c: "#F9AB00" },
  "LINE":          { L: BL.LINE,     c: "#06C755" },
  "LINE Tag":      { L: BL.LINE,     c: "#06C755" },
  "TikTok":        { L: BL.TikTok,   c: "#FF0050" },
  "TikTok Events": { L: BL.TikTok,   c: "#FF0050" },
  "X":             { L: BL.X,        c: "#FFFFFF" },
  "X CAPI":        { L: BL.X,        c: "#FFFFFF" },
  "Shopify":       { L: BL.Shopify,  c: "#95BF47" },
  "BASE":          { L: BL.BASE,     c: "#3E8CFE" },
  "WordPress":     { L: BL.WordPress,c: "#21759B" },
  "Slack":         { L: BL.Slack,    c: "#E01E5A" },
  "Claude":        { L: BL.Claude,   c: "#CC785C" },
  "ChatGPT":       { L: BL.OpenAI,   c: "#10A37F" },
  "MCP":           { L: BL.MCP,      c: "#7C5CFF" },
};

window.BL = BL;
window.BRAND = BRAND;