// Brand logos for the integrations grid.
// Simple Icons-style monochrome SVGs (currentColor) for big names; serif wordmarks for niche ones.

const Logo = {
  google: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
    </svg>
  ),
  microsoft: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z"/>
    </svg>
  ),
  slack: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
    </svg>
  ),
  notion: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/>
    </svg>
  ),
  github: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
    </svg>
  ),
  quickbooks: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M12 0C5.378 0 0 5.378 0 12s5.378 12 12 12 12-5.378 12-12S18.622 0 12 0zm-1.332 5.33h.666c1.836 0 3.332 1.495 3.332 3.33v8.01a3.34 3.34 0 0 1-3.332 3.33h-.666zm-5.336 3.33h3.336v8.01A3.34 3.34 0 0 1 5.332 20H4V11.996a3.34 3.34 0 0 1 1.332-3.336zm13.336 0V20h-1.332a3.34 3.34 0 0 1-3.336-3.33V8.66z"/>
    </svg>
  ),
  procore: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.8a7.2 7.2 0 1 1 0 14.4 7.2 7.2 0 0 1 0-14.4zm0 2.4a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6zm0 2.4a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8z"/>
    </svg>
  ),
  zoom: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M0 13.875A10.125 10.125 0 0 0 10.125 24h9.75A4.125 4.125 0 0 0 24 19.875v-9.75A10.125 10.125 0 0 0 13.875 0h-9.75A4.125 4.125 0 0 0 0 4.125zm15.45-4.2 3.9-2.85c.338-.281.6-.21.6.3v9.75c0 .582-.323.514-.6.3l-3.9-2.85v1.8a2.25 2.25 0 0 1-2.25 2.25H4.35a2.25 2.25 0 0 1-2.25-2.25v-7.2A2.25 2.25 0 0 1 4.35 6.675h8.85A2.25 2.25 0 0 1 15.45 8.925z"/>
    </svg>
  ),
  stripe: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z"/>
    </svg>
  ),
  zapier: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M19.442 12.006a7.96 7.96 0 0 1-.488 2.772 7.96 7.96 0 0 1-2.775.487h-.015a7.94 7.94 0 0 1-2.772-.487 7.98 7.98 0 0 1-.488-2.77v-.014a7.94 7.94 0 0 1 .485-2.771 7.943 7.943 0 0 1 2.772-.487h.015a7.94 7.94 0 0 1 2.775.487 7.966 7.966 0 0 1 .487 2.771v.014zM23.86 9.767h-7.215l5.102-5.101a12.057 12.057 0 0 0-2.713-2.715l-5.102 5.102V-.14A11.927 11.927 0 0 0 12.017-.2h-.033c-.646 0-1.282.054-1.902.14v7.197L4.98 2.035A12.033 12.033 0 0 0 3.618 3.13c-.422.42-.79.873-1.116 1.35L7.61 9.582H.42s-.056.62-.056 1.904v.028c0 .64.057 1.268.142 1.887h7.21l-5.108 5.102a11.999 11.999 0 0 0 2.71 2.713l5.107-5.103v7.199c.62.086 1.247.142 1.89.142h.048c.644 0 1.27-.055 1.89-.141v-7.2l5.103 5.102a12.012 12.012 0 0 0 2.714-2.714l-5.103-5.103h7.197c.085-.619.141-1.245.141-1.886v-.036c0-.641-.056-1.267-.141-1.886z"/>
    </svg>
  ),
  hubspot: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M18.164 7.93V5.084a2.198 2.198 0 0 0 1.267-1.978v-.067A2.2 2.2 0 0 0 17.238.845h-.067a2.2 2.2 0 0 0-2.193 2.194v.067a2.196 2.196 0 0 0 1.252 1.973l.013.005v2.852a6.22 6.22 0 0 0-2.969 1.31L5.656 3.212a2.46 2.46 0 1 0-2.25 1.52c.496 0 .962-.15 1.35-.41l-.009.006 7.485 5.83A6.241 6.241 0 0 0 12 17.892l2.357 2.358a2.037 2.037 0 1 0 1.435-1.44l-2.363-2.358a6.239 6.239 0 0 0 4.735-6.06 6.195 6.195 0 0 0-1.3-3.808l.014.015zM12 14.19a3.209 3.209 0 1 1 0-6.417 3.209 3.209 0 0 1 0 6.417z"/>
    </svg>
  ),
  twilio: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fill="currentColor" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm0 20.34c-4.62 0-8.34-3.72-8.34-8.34S7.38 3.66 12 3.66s8.34 3.72 8.34 8.34-3.72 8.34-8.34 8.34zm5.16-10.8c0 1.44-1.14 2.64-2.64 2.64-1.44 0-2.64-1.14-2.64-2.64 0-1.44 1.14-2.64 2.64-2.64 1.5-.06 2.64 1.14 2.64 2.64zm0 4.92c0 1.44-1.14 2.64-2.64 2.64-1.44 0-2.64-1.14-2.64-2.64 0-1.44 1.14-2.64 2.64-2.64 1.5 0 2.64 1.2 2.64 2.64zm-5.1 0c0 1.44-1.14 2.64-2.64 2.64-1.44 0-2.64-1.14-2.64-2.64 0-1.44 1.14-2.64 2.64-2.64 1.5 0 2.64 1.2 2.64 2.64zm0-4.92c0 1.44-1.14 2.64-2.64 2.64-1.44 0-2.64-1.14-2.64-2.64 0-1.44 1.14-2.64 2.64-2.64 1.5 0 2.64 1.14 2.64 2.64z"/>
    </svg>
  ),
};

function Wordmark({ text }) {
  return <span className="wordmark">{text}</span>;
}

window.Logo = Logo;
window.Wordmark = Wordmark;
