/* global React */

/* Inline SVG client-logo components.
   They use `fill="currentColor"` so the parent's `color:` styles them.
   That's the *only* way to recolor an SVG without redrawing it. */

const FRANKE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.5 242.5" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" overflow="visible"><path d="m-264.51 0.000003675v242.5h251.88v-242.5l-251.88 0.000003675zm12.78 68.667h104.65v32.893h-27.01v-11.757h-24.54v21.547h18.56v20.83h-18.56v21.14h10.93v21.23h-64.03v-21.23h8.56v-63.517h-8.56v-21.136zm109.29 0h63.411c20.743 0 35.527 2.355 44.438 7.114 8.88 4.788 13.3 12.62 13.3 23.611 0 5.708-1.342 10.728-4.124 14.848-2.753 4.12-6.929 7.48-12.579 10.21l17.322 28.87h6.701v21.23h-42.066l-22.992-43.71h-13.403v22.48h11.65v21.23h-61.658v-21.23h8.87v-63.517h-8.87v-21.136zm52.07 21.033c-0.87 0.05-1.555 0.103-2.062 0.103v22.477h3.608c6.969 0 12.102-0.98 15.363-2.78 3.26-1.81 4.845-4.59 4.845-8.46 0-3.788-1.66-6.646-4.949-8.556-3.288-1.885-8.261-2.784-14.95-2.784-0.391 0-1.011-0.053-1.855 0zm87.019-89.7v242.5h251.88v-242.5l-251.88 0.000003675zm23.714 68.667h79.081v21.033h-8.764l22.37 63.62h6.29v21.23h-56.704v-21.23h8.454l-4.64-15.68h-28.044l-5.361 15.68h7.526v21.23h-40.313l-0.00023-21.23h6.1862l22.477-63.62h-8.558v-21.033zm100.84 0h51.03l37.53 61.653v-40.62h-10v-21.033h43.41v21.033h-8.45v84.85h-39.7l-40.62-65.78v44.55h10.31v21.23h-43.51v-21.23h8.45v-63.517h-8.45v-21.136zm-67.534 26.395l-10.826 30.208h20.002l-9.176-30.208zm201.46-95.062v242.5h251.88v-242.5l-251.88 0.000003675zm3.4 68.667h60.73v21.136h-8.45v63.517h8.45v21.23h-60.73v-21.23h8.46v-63.517h-8.46v-21.136zm72.9 0h51.34v21.033h-6.8l-21.24 21.76 35.78 41.86h2.47v21.23h-60.21v-21.23h7.83l-27.53-33.41 29.49-30.21h-11.13v-21.033zm62.37 0h103.01v32.893h-26.61v-11.757h-24.12v21.547h20.72v20.83h-20.72v21.14h24.12v-13.41h26.61v34.64h-103.01v-21.23h8.46v-63.517h-8.46v-21.136z" fill-rule="evenodd" fill="currentColor"/></svg>`;

const BLANCO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 186" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><path fill="currentColor" d="M61.175,139.752h7.404c10.702,0,26.202-0.252,26.202-15.008c0-15.034-16.683-14.782-27.159-14.782h-6.447V139.752 M67.143,72.063c9.531,0,20.259-0.932,20.259-13.347c0-13.321-12.163-12.364-21.682-12.364h-4.545v25.711H67.143z M0.663,2.989h76.012c34.789,0,70.296,8.31,70.296,49.785c0,15.739-7.857,32.082-23.596,37.068c19.554,6.925,31.931,21.783,31.931,43.238c0,36.917-34.323,49.558-65.763,49.558H0.663V2.989z"/><polyline fill="currentColor" points="161.727,2.989 227.011,2.989 227.011,124.971 281.807,124.971 281.807,182.637 161.727,182.637 161.727,2.989 "/><path fill="currentColor" d="M491.346,2.989h62.678l58.599,99.57h1.889c-2.569-15.009-5.439-30.496-5.439-45.731V2.989h62.4v179.648h-62.4l-57.44-94.356h-1.889c2.115,12.39,4.029,24.049,4.029,35.96v58.396h-62.426V2.989"/><path fill="currentColor" d="M819.392,75.865c-10.476-9.771-23.57-18.081-38.327-18.081c-19.541,0-35.506,15.487-35.506,35.003c0,19.793,16.922,35.053,36.463,35.053c15.009,0,26.895-6.446,37.37-16.695l-1.914,67.211c-10.45,4.985-34.751,7.126-46.436,7.126c-51.22,0-91.259-39.787-91.259-91.008c0-52.429,41.223-94.356,93.878-94.356c14.757,0,30.042,2.594,43.816,7.378L819.392,75.865"/><path fill="currentColor" d="M891.715,94.248c0,20.474,13.799,34.55,33.593,34.55c19.793,0,33.593-14.076,33.593-34.55c0-19.063-12.844-35.053-33.593-35.053C904.558,59.195,891.715,75.186,891.715,94.248 M1024.676,93.291c0,57.642-44.572,92.191-99.368,92.191s-99.368-34.55-99.368-92.191c0-56.483,44.799-93.173,99.368-93.173S1024.676,36.808,1024.676,93.291z"/><path fill="currentColor" d="M386.061,62.721c0,7.554-13.221,54.846-13.221,54.846h26.214C399.054,117.566,386.061,70.729,386.061,62.721 M355.917,182.637h-69.087L349.244,2.989h72.197l64.101,179.648h-69.099l-5.956-22.412h-49.306L355.917,182.637z"/></svg>`;

function ClientLogos({ theme = "light" }) {
  return (
    <div className={"client-logos client-logos--" + theme}>
      <span
        className="client-logos__logo client-logos__franke"
        role="img"
        aria-label="Franke"
        dangerouslySetInnerHTML={{ __html: FRANKE_SVG }}
      ></span>
      <span
        className="client-logos__logo client-logos__blanco"
        role="img"
        aria-label="Blanco"
        dangerouslySetInnerHTML={{ __html: BLANCO_SVG }}
      ></span>
      <span className="client-logos__logo client-logos__onyx" role="img" aria-label="Onyx Designs">
        <img src="assets/logo-onyx-white.png" alt="" />
      </span>
      <span className="client-logos__logo client-logos__osc" role="img" aria-label="Organic Supply Co.">
        <img src="assets/logo-osc-white.png" alt="" />
      </span>
    </div>
  );
}

window.ClientLogos = ClientLogos;
