/* Brand icons — real platform marks (inline SVG) =====================
   Recognizable logos used purely as integration/source identifiers.
   Each returns a <svg>; pass size. Main glyphs that must invert in dark
   mode (TikTok, X) use fill="currentColor" + a tone class on the wrapper.
=================================================================== */

function BrandIcon({ name, size=18, className='' }){
  const s = size;
  const base = { width:s, height:s, viewBox:'0 0 24 24', className };
  /* Unique per-instance gradient ids — fixed ids collide when the icon
     renders multiple times (or inside hidden nodes), which blanked the
     Instagram / Meta / Pipeboard marks. (Hook must run before any return.) */
  const uid = React.useMemo(()=>Math.random().toString(36).slice(2,8), []);
  /* Official platform logo PNGs (report_assets/platforms/, user-supplied)
     take precedence everywhere; the inline SVGs below remain the fallback
     for providers without a PNG (pipeboard, mysql, relay, ga, …). */
  const png = (window.R_PLATFORM_LOGOS || {})[name];
  if (png) return <img src={png} alt={name} width={s} height={s} className={className}
    style={{ width:s, height:s, objectFit:'contain', display:'inline-block', verticalAlign:'middle' }}/>;
  switch(name){

    case 'facebook':
      return (
        <svg {...base}><circle cx="12" cy="12" r="12" fill="#1877F2"/>
          <path fill="#fff" d="M15.6 8.6h-1.7c-.35 0-.62.3-.62.7V11h2.3l-.33 2.35h-1.97V20h-2.45v-6.65H8.7V11h2.16V9.03c0-1.74 1.03-2.93 2.93-2.93h1.81v2.5z"/>
        </svg>
      );

    case 'instagram':
      return (
        <svg {...base}>
          <defs><radialGradient id={`ig-g-${uid}`} cx="0.3" cy="1.05" r="1.25">
            <stop offset="0" stopColor="#FFD776"/><stop offset="0.28" stopColor="#F3736B"/>
            <stop offset="0.62" stopColor="#DA22A7"/><stop offset="1" stopColor="#7A2FE0"/>
          </radialGradient></defs>
          <rect x="1" y="1" width="22" height="22" rx="7" fill={`url(#ig-g-${uid})`}/>
          <rect x="5.6" y="5.6" width="12.8" height="12.8" rx="4.4" fill="none" stroke="#fff" strokeWidth="1.8"/>
          <circle cx="12" cy="12" r="3.2" fill="none" stroke="#fff" strokeWidth="1.8"/>
          <circle cx="16.3" cy="7.7" r="1.15" fill="#fff"/>
        </svg>
      );

    case 'meta':
      return (
        <svg {...base}>
          <defs><linearGradient id={`meta-g-${uid}`} x1="0" y1="0.5" x2="1" y2="0.5">
            <stop offset="0" stopColor="#0064E1"/><stop offset="0.5" stopColor="#0080FF"/><stop offset="1" stopColor="#0064E1"/>
          </linearGradient></defs>
          <path fill="none" stroke={`url(#meta-g-${uid})`} strokeWidth="3.1" strokeLinecap="round" strokeLinejoin="round"
            d="M4 16.2c0-4.6 2.2-8.4 5-8.4 1.7 0 3 1.5 4.1 3.3l.9 1.5.9-1.5c1.1-1.8 2.4-3.3 4.1-3.3 2.8 0 5 3.8 5 8.4 0 2-1 3.2-2.6 3.2-1.5 0-2.5-1-3.9-3.3L18 12c-1.3-2.1-2.4-3.6-4-3.6s-2.7 1.5-4 3.6l-1.5 2.4C7.1 16.7 6.1 19.4 4.6 19.4 3.4 19.4 4 17 4 16.2z"/>
        </svg>
      );

    case 'google':
      return (
        <svg {...base}>
          <path fill="#4285F4" d="M23.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h6.47c-.28 1.48-1.13 2.73-2.4 3.58v3h3.88c2.27-2.09 3.55-5.17 3.55-8.82z"/>
          <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.94-2.91l-3.88-3c-1.08.72-2.45 1.16-4.06 1.16-3.13 0-5.78-2.11-6.73-4.96H1.26v3.09C3.24 21.3 7.31 24 12 24z"/>
          <path fill="#FBBC05" d="M5.27 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62H1.26C.46 8.24 0 10.06 0 12s.46 3.76 1.26 5.38l4.01-3.09z"/>
          <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.24 2.7 1.26 6.62l4.01 3.09C6.22 6.86 8.87 4.75 12 4.75z"/>
        </svg>
      );

    case 'ga': /* Google Analytics */
      return (
        <svg {...base}>
          <path fill="#F9AB00" d="M16.4 3.2c-1.7 0-3 1.3-3 3v11.5c0 2 1.4 3.1 2.8 3.1 1.3 0 2.8-.9 2.8-3.1V6.3c0-1.7-1.3-3.1-2.6-3.1z"/>
          <circle cx="7.1" cy="17.9" r="2.9" fill="#E37400"/>
          <path fill="#F9AB00" d="M9.95 11.1c-1.6 0-2.9 1.3-2.9 2.9v.05c.02 0 1.45-.05 2.07.62.6.55.62 1.4.62 1.43h.2c1.6 0 2.9-1.3 2.9-2.9v-.2c0-1.6-1.3-1.9-2.89-1.9z" opacity="0"/>
        </svg>
      );

    case 'tiktok':
      return (
        <svg {...base}>
          <path fill="#25F4EE" d="M15.3 2h2.2c.2 1.6 1 2.9 2.3 3.6-.9.3-1.6.3-2.5 0v6.6a5.05 5.05 0 1 1-5.05-5.05c.27 0 .54.02.8.07v2.78a2.27 2.27 0 1 0 1.45 2.12V2z" transform="translate(-1.3,1)"/>
          <path fill="#FE2C55" d="M15.3 2h2.2c.2 1.6 1 2.9 2.3 3.6-.9.3-1.6.3-2.5 0v6.6a5.05 5.05 0 1 1-5.05-5.05c.27 0 .54.02.8.07v2.78a2.27 2.27 0 1 0 1.45 2.12V2z" transform="translate(1,-1)"/>
          <path fill="currentColor" d="M15.3 2h2.2c.2 1.6 1 2.9 2.3 3.6-.9.3-1.6.3-2.5 0v6.6a5.05 5.05 0 1 1-5.05-5.05c.27 0 .54.02.8.07v2.78a2.27 2.27 0 1 0 1.45 2.12V2z"/>
        </svg>
      );

    case 'snapchat':
      return (
        <svg {...base}><rect x="0.5" y="0.5" width="23" height="23" rx="6.5" fill="#FFFC00"/>
          <path fill="#fff" stroke="#111" strokeWidth="0.4" d="M12 4.4c1.9 0 3.3 1.5 3.4 3.4.04.7-.02 1.3-.05 1.8.18.1.42.16.66.12.4-.07.85-.34 1.1-.34.32 0 .63.22.66.55.03.36-.28.55-.66.7-.3.12-.86.24-.95.5-.06.18.07.42.2.64.02.03 1.06 1.8 2.7 2.07.22.04.38.23.37.45-.02.5-1.27.85-1.86.98-.1.02-.16.1-.18.27-.02.13-.06.36-.1.5-.05.2-.2.25-.4.22-.3-.05-.7-.16-1.3-.06-.55.1-1 .55-1.6.9-.55.32-1.18.5-1.85.5s-1.3-.18-1.85-.5c-.6-.35-1.05-.8-1.6-.9-.6-.1-1 .01-1.3.06-.2.03-.35-.02-.4-.22-.04-.14-.08-.37-.1-.5-.02-.17-.08-.25-.18-.27-.6-.13-1.84-.48-1.86-.98-.01-.22.15-.41.37-.45 1.64-.27 2.68-2.04 2.7-2.07.13-.22.26-.46.2-.64-.09-.26-.65-.38-.95-.5-.38-.15-.69-.34-.66-.7.03-.33.34-.55.66-.55.25 0 .7.27 1.1.34.24.04.48-.02.66-.12-.03-.5-.09-1.1-.05-1.8C8.7 5.9 10.1 4.4 12 4.4z"/>
        </svg>
      );

    case 'x':
      return (
        <svg {...base}>
          <path fill="currentColor" d="M14.23 10.62 21.4 2.25h-2.06l-6.05 7.04-4.83-7.04H2l7.53 10.96L2 21.75h2.06l6.32-7.35 5.05 7.35H22l-7.77-11.13zm-2.24 2.6-.73-1.05L4.8 3.5h2.93l4.7 6.73.73 1.05 6.1 8.73h-2.93l-5.04-7.2z"/>
        </svg>
      );

    case 'linkedin':
      return (
        <svg {...base}>
          <rect x="1" y="1" width="22" height="22" rx="4" fill="#0A66C2"/>
          <path fill="#fff" d="M7.6 9.4H4.9v9.3h2.7V9.4zM6.25 8.2a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2zM12.2 13.8c0-1.1.5-1.9 1.6-1.9 1 0 1.5.7 1.5 1.9v4.9H18v-5.3c0-2.5-1.3-3.7-3.1-3.7-1.5 0-2.2.8-2.6 1.4h-.1V9.4h-2.7v9.3h2.7v-4.9z"/>
        </svg>
      );

    case 'pipeboard':
      return (
        <svg {...base}>
          <defs><linearGradient id={`pb-g-${uid}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#7C5CFF"/><stop offset="1" stopColor="#4F46E5"/>
          </linearGradient></defs>
          <rect x="1" y="1" width="22" height="22" rx="6.5" fill={`url(#pb-g-${uid})`}/>
          <circle cx="7" cy="8" r="2" fill="#fff"/>
          <circle cx="7" cy="16" r="2" fill="#fff"/>
          <circle cx="16.5" cy="12" r="2.3" fill="#fff"/>
          <path d="M9 8h3.5a2 2 0 0 1 2 2v.5M9 16h3.5a2 2 0 0 0 2-2v-.5" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round"/>
        </svg>
      );

    case 'zernio':
      return (
        <svg {...base}>
          <defs><linearGradient id={`zn-g-${uid}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#9A6BFF"/><stop offset="1" stopColor="#6D28D9"/>
          </linearGradient></defs>
          <rect x="1" y="1" width="22" height="22" rx="6.5" fill={`url(#zn-g-${uid})`}/>
          <path d="M7.5 7.5h9l-9 9h9" fill="none" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      );

    case 'claude':
      return (
        <svg {...base} viewBox="0 0 24 24">
          <rect x="1" y="1" width="22" height="22" rx="6.5" fill="#0E0E0E"/>
          <g stroke="#D97757" strokeWidth="1.5" strokeLinecap="round">
            {Array.from({length:12}).map((_,i)=>{
              const a = (i*Math.PI*2)/12;
              const r0 = 2.2, r1 = 6.6;
              return <line key={i} x1={12+Math.cos(a)*r0} y1={12+Math.sin(a)*r0} x2={12+Math.cos(a)*r1} y2={12+Math.sin(a)*r1}/>;
            })}
          </g>
        </svg>
      );

    case 'mysql':
      return (
        <svg {...base}>
          <rect x="1" y="1" width="22" height="22" rx="6.5" fill="#00618A"/>
          <g fill="none" stroke="#fff" strokeWidth="1.6">
            <ellipse cx="12" cy="7.5" rx="6" ry="2.4"/>
            <path d="M6 7.5v9c0 1.33 2.69 2.4 6 2.4s6-1.07 6-2.4v-9" strokeLinecap="round"/>
            <path d="M6 12c0 1.33 2.69 2.4 6 2.4s6-1.07 6-2.4"/>
          </g>
        </svg>
      );

    case 'custom':
      return (
        <svg {...base}>
          <rect x="1" y="1" width="22" height="22" rx="6.5" fill="#3F3F39"/>
          <path d="M9 9.5 6.5 12 9 14.5M15 9.5 17.5 12 15 14.5M13 7.5l-2 9" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      );

    case 'analytics_alt':
    case 'relay':
    default:
      return <RelayMark size={s} tone="#8351ff"/>;
  }
}

/* platform id / provider → brand icon name */
const PLATFORM_ICON = {
  overview:'relay', meta:'meta', facebook:'facebook', instagram:'instagram',
  google:'google', google_analytics:'ga', tiktok:'tiktok', snapchat:'snapchat', x:'x',
  twitter:'x', linkedin:'linkedin',
};
const PROVIDER_ICON = {
  pipeboard:'pipeboard', zernio:'zernio', meta:'meta', google:'google', ga:'ga', tiktok:'tiktok',
  snapchat:'snapchat', x:'x', linkedin:'linkedin', mysql:'mysql', custom:'custom', claude:'claude',
  facebook:'facebook', instagram:'instagram',
};
function platformIcon(id){ return PLATFORM_ICON[id] || 'relay'; }

Object.assign(window, { BrandIcon, PLATFORM_ICON, PROVIDER_ICON, platformIcon });