/* global React */
// Wathiq brand marks — inline so they use currentColor for theming.

const LogoIcon = (props) => (
  <svg viewBox="0 0 66.06 66.06" xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...props}>
    <path d="M35.27,15.92v6.13c-1.09.13-1.79.65-2.01,1.67l-4.89,20.89c-1.1,4.75-4.03,7.1-9.5,7.1-6.37,0-8.65-3.19-9.3-7.95l-2.34-17.74H2.37l3.62-9.44v-.03h7.48l3.06,26.82c.2,1.5.85,2.21,2.48,2.21s2.21-.66,2.54-1.89l4.87-20.82c1.01-4.38,3.76-6.78,8.85-6.95Z"/>
    <path d="M30.78,50.13v-6.13c1.09-.13,1.79-.65,2.01-1.67l4.89-20.89c1.1-4.75,4.03-7.1,9.5-7.1,6.37,0,8.65,3.19,9.3,7.95l2.34,17.74h4.86l-3.62,9.44v.03h-7.48l-3.06-26.82c-.2-1.5-.85-2.21-2.48-2.21s-2.21.66-2.54,1.89l-4.87,20.82c-1.01,4.38-3.76,6.78-8.85,6.95Z"/>
  </svg>
);

const LogoEnglish = (props) => (
  <svg viewBox="0 0 381.08 127.99" xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...props}>
    <path d="M93.16,79.74c-.3,2.31-1.21,3.42-3.62,3.42s-3.62-1.01-4.03-2.92l-7.14-32.2c-1.61-7.04-5.74-10.77-14.19-10.77s-12.98,3.72-14.59,10.77l-7.55,32.2c-.5,1.91-1.51,2.92-3.92,2.92s-3.52-1.11-3.82-3.42l-4.73-41.46h-11.57v.03s-5.61,14.61-5.61,14.61h7.53l3.61,27.42c1.01,7.34,4.53,12.28,14.39,12.28,8.45,0,12.98-3.62,14.69-10.97l7.55-32.31c.4-1.81,1.81-2.62,3.93-2.62s3.52.81,3.92,2.62l7.14,32.31c1.61,7.34,6.04,10.97,14.29,10.97,9.66,0,13.89-4.93,14.89-12.28l5.94-42.07h-11.57l-5.53,41.46Z"/>
    <path d="M151.92,38.28h-31.89v10.26h31.81c5.84,0,8.15,3.24,8.15,7.35v4.01h-25.28c-13.07,0-17.9,5.65-17.9,15.3s5.22,16.2,17.8,16.2h24.87c8.95,0,10.98-3.01,10.98-10.65v-24.97c0-10.06-5.24-17.51-18.54-17.51ZM159.99,78.34c0,1.91-.82,2.7-2.93,2.7h-22.35c-5.33,0-7.43-2.52-7.43-6.43s2.01-6.25,7.64-6.25h25.07v9.97Z"/>
    <path d="M195.2,25.7h-10.77v12.58h-7.25v10.27h7.25v24.55c0,13.89,4.73,18.32,15.7,18.32h9.56v-9.76h-7.35c-5.03,0-7.14-2.01-7.14-7.95v-25.16h14.69v-10.27h-14.69v-12.58Z"/>
    <path d="M246.63,38.28h-18.72V15.24h-10.67v.05l-5.6,14.6h5.6v61.54h10.67v-42.87h18.72c11.07,0,16,4.83,16,12.98v29.89h10.77v-29.89c0-14.59-8.86-23.25-26.77-23.25Z"/>
    <rect x="285.37" y="38.28" width="10.67" height="53.14"/>
    <rect x="285.37" y="18.26" width="10.77" height="12.38"/>
    <path d="M343.53,38.28h-14.69c-14.19,0-23.04,8.66-23.04,26.57s8.85,26.57,23.04,26.57h23.45v21.34h10.77v-51.72c0-15.3-6.86-22.76-19.54-22.76ZM352.3,81.05h-22.45c-9.16,0-13.27-4.73-13.27-16.2s4.12-16.3,13.27-16.3h10.57c8.56,0,11.88,3.83,11.88,12.99v19.52Z"/>
    <polygon points="363.07 112.75 363.07 98.13 368.7 98.13 363.09 112.75 363.07 112.75"/>
  </svg>
);

const LogoArabic = (props) => (
  <svg viewBox="0 0 381.08 127.99" xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...props}>
    <path d="M352.11,41.28h-24.87c-1.78.02-7.26.31-11.88,4.37-4.31,3.8-5.27,8.6-5.92,11.83-.66,3.29-2.05,13.69,4.9,21.75,2.72,3.16,5.88,4.88,8.08,5.82,10.07.02,20.13.04,30.2.06v9.3c0,4.14-2.31,7.35-8.15,7.35h-31.81v10.26h31.89c13.29,0,18.54-7.45,18.54-17.51v-42.58c0-7.64-2.03-10.65-10.98-10.65ZM352.62,76.65h-25.07c-1.25-.7-4.81-2.89-6.45-7.27-1.17-3.11-.78-5.84-.49-7.93.33-2.25.72-4.94,2.85-7.23,1.35-1.45,2.89-2.21,3.89-2.58h22.35c2.11,0,2.93.8,2.93,2.7v22.31Z"/>
    <path d="M291.49,41.26v34.04c0,5.02-2.01,7.13-7.95,7.13H75.26v-20.11c0-15.28-6.84-22.74-19.52-22.74h-14.71c-14.19,0-23.04,8.66-23.04,26.57s8.85,26.57,23.04,26.57h23.45v21.34h10.77v-20.85h207.67c13.89,0,18.33-4.73,18.33-15.71v-36.23h-9.77ZM64.49,82.34h-22.45c-9.16,0-13.27-4.73-13.27-16.2s4.12-16.3,13.27-16.3h10.57c8.56,0,11.88,3.83,11.88,12.99v19.52Z"/>
    <polygon points="291.51 41.25 291.51 55.88 285.87 55.88 291.49 41.25 291.51 41.25"/>
    <polygon points="75.15 114.05 75.15 99.43 80.79 99.43 75.17 114.05 75.15 114.05"/>
    <rect x="177.2" y="34.5" width="40.05" height="11.42"/>
    <rect x="28.77" y="14.42" width="40.05" height="11.42"/>
    <rect x="189.37" y="13.94" width="15.73" height="12.38"/>
  </svg>
);

Object.assign(window, { LogoIcon, LogoEnglish, LogoArabic });
