/* global React */
// Brand mark SVGs for the integration strip.
// Sized to 16×16 viewBox, color-accurate where the brand color is iconic,
// monochrome-on-dark where the wordmark is the primary identifier.

const S = ({ children, w = 16, h = 16 }) => (
  <svg width={w} height={h} viewBox="0 0 16 16" fill="none" aria-hidden="true" style={{ display: "block", flex: "0 0 auto" }}>
    {children}
  </svg>
);

const BrandSlack = () => (
  <S>
    <rect x="6.4" y="0.5" width="3.2" height="9" rx="1.6" fill="#36C5F0" />
    <rect x="0.5" y="6.4" width="9" height="3.2" rx="1.6" fill="#E01E5A" />
    <rect x="6.4" y="6.5" width="3.2" height="9" rx="1.6" fill="#2EB67D" />
    <rect x="6.5" y="6.4" width="9" height="3.2" rx="1.6" fill="#ECB22E" />
  </S>
);

const BrandNotion = () => (
  <S>
    <rect x="1" y="1" width="14" height="14" rx="1.5" fill="#fff" stroke="#111" strokeWidth="0.8" />
    <path d="M4.6 4.2v7.6M4.6 4.4l6 7.2M10.6 4v7.6" stroke="#111" strokeWidth="1.2" strokeLinecap="round" />
  </S>
);

const BrandShopify = () => (
  <S>
    <path d="M3.2 4.4c.6-.2 1.5-.5 2.2-.5 0 0 .2-1.5 1.4-1.6.7-.1 1.2.3 1.4.5.4-.2.9-.3 1.5-.2 1.3.2 1.7 1.6 1.7 1.6l1.5.6c.3.1.4.4.5.6L13.6 14H5.4L3.7 5c0-.3.1-.5.5-.6Z" fill="#95BF47" />
    <path d="M8.2 2.8c-.6 0-1 .5-1.2 1 .3-.1.6-.2 1-.2.5 0 .7.2.7.2s.1-.5-.1-.8c-.1-.2-.3-.2-.4-.2Z" fill="#fff" />
    <path d="M8.7 7.2c-.3-.2-.7-.3-1.1-.3-.9 0-.9.5-.9.6 0 .5.7.7 1.4 1.1.7.4 1 .8 1 1.5 0 1-.7 1.6-1.7 1.6-1.1 0-1.7-.7-1.7-.7l.3-1s.6.5 1.3.5c.4 0 .5-.3.5-.5 0-.5-.6-.6-1.2-1-.6-.3-1.2-.7-1.2-1.6 0-1 .7-2.1 2.4-2.1.6 0 1.2.2 1.2.2l-.3.7Z" fill="#fff" />
  </S>
);

const BrandKlaviyo = () => (
  <S>
    <path d="M2 8c2.2-3 4.5-4.5 6-4.5 1.6 0 3.6 1.5 6 4.5-1.4 1.8-2.4 2.4-3.5 2.4-1 0-1.7-.4-2.5-1.4-.8.9-1.5 1.4-2.5 1.4-1 0-2-.6-3.5-2.4Z" fill="#16110C" />
    <circle cx="8" cy="8.2" r="1.1" fill="#fff" />
  </S>
);

const BrandGmail = () => (
  <S>
    <path d="M2.2 4.2v7.4h2V7.5l3.8 2.9 3.8-2.9v4.1h2V4.2l-1.4-.9L8 7.6 3.6 3.3l-1.4.9Z" fill="#fff" />
    <path d="M2.2 4.2v7.4h2V7.5l-2-3.3Z" fill="#4285F4" />
    <path d="M11.8 7.5v4.1h2V4.2l-2 3.3Z" fill="#34A853" />
    <path d="M2.2 4.2 8 8.6l5.8-4.4-1.4-.9L8 6.7 3.6 3.3l-1.4.9Z" fill="#EA4335" />
    <path d="M11.8 7.5 8 4.4 4.2 7.5v.1l3.8 2.9 3.8-2.9V7.5Z" fill="#FBBC04" />
  </S>
);

const BrandGoogle = () => (
  <S>
    <path d="M14.5 8.2c0-.5 0-.9-.1-1.3H8v2.6h3.7c-.2.9-.7 1.6-1.4 2.1v1.7h2.2c1.3-1.2 2-3 2-5.1Z" fill="#4285F4" />
    <path d="M8 14.5c1.9 0 3.5-.6 4.7-1.7l-2.2-1.7c-.6.4-1.4.7-2.5.7-1.9 0-3.5-1.3-4.1-3H1.6v1.8C2.8 12.9 5.2 14.5 8 14.5Z" fill="#34A853" />
    <path d="M3.9 8.8c-.1-.4-.2-.9-.2-1.3s.1-.9.2-1.3V4.4H1.6c-.5.9-.7 1.9-.7 3s.3 2.1.7 3l2.3-1.6Z" fill="#FBBC04" />
    <path d="M8 3.7c1 0 2 .4 2.7 1.1l2-2C11.5 1.6 9.9 1 8 1 5.2 1 2.8 2.6 1.6 4.9l2.3 1.8c.6-1.7 2.2-3 4.1-3Z" fill="#EA4335" />
  </S>
);

const BrandMeta = () => (
  <S>
    <path d="M2 6.4c.5-1.7 1.7-2.9 3.4-2.9 1.4 0 2.4 1 3.2 2.4l.6 1c-.3.5-.6.9-.8 1.3-.6-1.2-1.5-2.7-2.5-2.7-1 0-1.8.9-2.2 2.3-.4 1.3-.2 2.5.5 2.7.7.3 1.5-.3 2.5-1.5.6-.7 1-1.3 1.5-2.2.7-1 1.7-2.4 3.3-2.4 1.7 0 2.7 1.4 3 2.9.3 1.5-.1 3.3-1.4 3.9-1.2.5-2.4-.1-3.4-1.4l-.5-.7c.3-.4.6-.9.8-1.4.7 1.1 1.3 1.7 2 1.7.7 0 1.1-.8.9-1.7-.2-1-.7-1.8-1.5-1.8-.8 0-1.4.5-2.4 2-.4.6-.9 1.5-1.5 2.4-.7 1.2-1.8 2.4-3.4 2.4-1.5 0-2.4-1-2.7-2.4-.3-1.3 0-2.6.6-3.9Z" fill="#0866FF" />
  </S>
);

const BrandGA4 = () => (
  <S>
    <rect x="11" y="2.5" width="3" height="11" rx="1.5" fill="#F9AB00" />
    <rect x="6.5" y="6" width="3" height="7.5" rx="1.5" fill="#E37400" />
    <circle cx="3.5" cy="12" r="1.6" fill="#E37400" />
  </S>
);

const BrandGorgias = () => (
  <S>
    <rect x="1.5" y="1.5" width="13" height="13" rx="3" fill="#fff" />
    <path d="M8 4.5c2 0 3.5 1.5 3.5 3.6 0 2-1.5 3.4-3.4 3.4-.7 0-1.4-.2-1.9-.5L4.8 12l.5-1.4c-.7-.6-1.1-1.5-1.1-2.5C4.2 6 5.9 4.5 8 4.5Zm.6 2.4H7.2v3h1.5c.8 0 1.4-.6 1.4-1.5s-.6-1.5-1.5-1.5Z" fill="#111" />
  </S>
);

const BrandTelegram = () => (
  <S>
    <circle cx="8" cy="8" r="7.5" fill="#229ED9" />
    <path d="M3.6 7.7 L12.6 4.1 Q13 4 12.9 4.5 L11.4 11.7 Q11.3 12.1 10.9 11.9 L8 9.7 L6.7 11 Q6.3 11.4 6.2 10.9 L6 9 L11 5.4 L6 8.4 L3.6 7.7 Z" fill="#fff" />
  </S>
);

const BrandWhatsApp = () => (
  <S>
    <path d="M2 14 L3.2 10.3 A6 6 0 1 1 5.6 12.7 Z" fill="#25D366" />
    <path d="M5.8 5.5 Q5.2 5.5 5 6 Q4.7 6.7 5 7.6 Q5.6 9.4 7.4 10.4 Q8.6 11 9.5 10.8 Q10.2 10.6 10.4 10 Q10.5 9.6 10.2 9.4 L9.2 8.8 Q8.9 8.7 8.7 9 L8.4 9.4 Q8.3 9.5 8.1 9.5 Q7.4 9.2 6.9 8.5 Q6.5 8 6.4 7.6 Q6.4 7.4 6.5 7.3 L6.8 7 Q7 6.8 6.9 6.5 L6.4 5.8 Q6.2 5.5 5.8 5.5 Z" fill="#fff" />
  </S>
);

const BrandX = () => (
  <S>
    <rect width="16" height="16" rx="2.5" fill="#0F1419" />
    <path d="M3.4 3.6 L7.4 8 L3.3 12.5 H4.7 L8 8.8 L10.7 12.5 H12.7 L8.5 7.8 L12.4 3.6 H11 L7.9 6.9 L5.4 3.6 Z" fill="#fff" />
  </S>
);

window.BRAND_LOGOS = {
  Slack: BrandSlack,
  Notion: BrandNotion,
  Shopify: BrandShopify,
  Klaviyo: BrandKlaviyo,
  Gmail: BrandGmail,
  "Google Workspace": BrandGoogle,
  "Meta Ads": BrandMeta,
  GA4: BrandGA4,
  Gorgias: BrandGorgias,
  Telegram: BrandTelegram,
  WhatsApp: BrandWhatsApp,
  X: BrandX,
};
