import svgPaths from "./svg-wv5wqovq7z";
import { imgGroup, imgGroup1, imgGroup2, imgGroup3, imgGroup4 } from "./svg-qfwrc";

function Group() {
  return (
    <div className="absolute bottom-[2.06%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[96.34px_29.005px] right-[0.6%] top-[1.25%]" data-name="Group" style={{ maskImage: `url('${imgGroup}')` }}>
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 97 29">
        <g id="Group">
          <path clipRule="evenodd" d={svgPaths.p2796bcf0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector" />
          <path clipRule="evenodd" d={svgPaths.p248a1d00} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_2" />
          <path clipRule="evenodd" d={svgPaths.p337ab80} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_3" />
        </g>
      </svg>
    </div>
  );
}

function ClipPathGroup() {
  return (
    <div className="absolute bottom-[2.06%] contents left-0 right-[0.6%] top-[1.25%]" data-name="Clip path group">
      <Group />
    </div>
  );
}

function Component1Svg() {
  return (
    <div className="absolute h-[30px] overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[96.923px]" data-name="1.svg" style={{ left: "calc(50% + 0.001px)" }}>
      <ClipPathGroup />
    </div>
  );
}

function Component1SvgFill() {
  return (
    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="1.svg fill">
      <Component1Svg />
    </div>
  );
}

function Component1Svg1() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="1.svg">
      <Component1SvgFill />
    </div>
  );
}

function DivDFlex() {
  return (
    <div className="absolute h-[30px] left-0 right-[1100px] top-0" data-name="div.d-flex">
      <Component1Svg1 />
    </div>
  );
}

function Group1() {
  return (
    <div className="absolute bottom-[0.18%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[99.2px_23.66px] right-[0.8%] top-[1.63%]" data-name="Group" style={{ maskImage: `url('${imgGroup1}')` }}>
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 100 24">
        <g id="Group">
          <path d={svgPaths.p3f7f9b00} fill="var(--fill-0, #6B6B6B)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ClipPathGroup1() {
  return (
    <div className="absolute bottom-[0.18%] contents left-0 right-[0.8%] top-[1.63%]" data-name="Clip path group">
      <Group1 />
    </div>
  );
}

function Component2Svg() {
  return (
    <div className="absolute h-[24.096px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="2.svg">
      <ClipPathGroup1 />
    </div>
  );
}

function Component2SvgFill() {
  return (
    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="2.svg fill">
      <Component2Svg />
    </div>
  );
}

function Component2Svg1() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="2.svg">
      <Component2SvgFill />
    </div>
  );
}

function DivDFlex1() {
  return (
    <div className="absolute h-[30px] left-[220px] right-[880px] top-0" data-name="div.d-flex">
      <Component2Svg1 />
    </div>
  );
}

function Group2() {
  return (
    <div className="absolute bottom-[3.72%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[99.603px_19.461px] right-[0.4%] top-[1.3%]" data-name="Group" style={{ maskImage: `url('${imgGroup2}')` }}>
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 100 20">
        <g id="Group">
          <path clipRule="evenodd" d={svgPaths.p2a71dac0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector" />
          <path clipRule="evenodd" d={svgPaths.p2cdc9c00} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_2" />
          <path clipRule="evenodd" d={svgPaths.p18ffe400} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_3" />
          <path clipRule="evenodd" d={svgPaths.p272a6dc0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_4" />
          <path clipRule="evenodd" d={svgPaths.p1fd6d500} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_5" />
          <path clipRule="evenodd" d={svgPaths.p35ba2b80} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_6" />
          <path clipRule="evenodd" d={svgPaths.pa9dd680} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_7" />
          <path clipRule="evenodd" d={svgPaths.p18a70300} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_8" />
        </g>
      </svg>
    </div>
  );
}

function ClipPathGroup2() {
  return (
    <div className="absolute bottom-[3.73%] contents left-0 right-[0.4%] top-[1.3%]" data-name="Clip path group">
      <Group2 />
    </div>
  );
}

function Component4Svg() {
  return (
    <div className="absolute h-[20.492px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="4.svg">
      <ClipPathGroup2 />
    </div>
  );
}

function Component4SvgFill() {
  return (
    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="4.svg fill">
      <Component4Svg />
    </div>
  );
}

function Component4Svg1() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="4.svg">
      <Component4SvgFill />
    </div>
  );
}

function DivDFlex2() {
  return (
    <div className="absolute h-[30px] left-[440px] right-[660px] top-0" data-name="div.d-flex">
      <Component4Svg1 />
    </div>
  );
}

function Group3() {
  return (
    <div className="absolute bottom-[3.19%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[94.418px_28.667px] right-[0.21%] top-[1.25%]" data-name="Group" style={{ maskImage: `url('${imgGroup3}')` }}>
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 95 29">
        <g id="Group">
          <path d={svgPaths.p1159e100} fill="var(--fill-0, #6B6B6B)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ClipPathGroup3() {
  return (
    <div className="absolute bottom-[3.19%] contents left-0 right-[0.21%] top-[1.25%]" data-name="Clip path group">
      <Group3 />
    </div>
  );
}

function Component5Svg() {
  return (
    <div className="absolute h-[30px] overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[94.615px]" data-name="5.svg" style={{ left: "calc(50% - 0.001px)" }}>
      <ClipPathGroup3 />
    </div>
  );
}

function Component5SvgFill() {
  return (
    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="5.svg fill">
      <Component5Svg />
    </div>
  );
}

function Component5Svg1() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="5.svg">
      <Component5SvgFill />
    </div>
  );
}

function DivDFlex3() {
  return (
    <div className="absolute h-[30px] left-[660px] right-[440px] top-0" data-name="div.d-flex">
      <Component5Svg1 />
    </div>
  );
}

function Group4() {
  return (
    <div className="absolute bottom-[0.54%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[98.4px_29.512px] right-[0.61%] top-[1.09%]" data-name="Group" style={{ maskImage: `url('${imgGroup4}')` }}>
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 99 30">
        <g id="Group">
          <path d={svgPaths.p21cb4200} fill="var(--fill-0, #6B6B6B)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ClipPathGroup4() {
  return (
    <div className="absolute bottom-[0.54%] contents left-0 right-[0.61%] top-[1.09%]" data-name="Clip path group">
      <Group4 />
    </div>
  );
}

function Component6Svg() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[99px]" data-name="6.svg">
      <ClipPathGroup4 />
    </div>
  );
}

function Component6SvgFill() {
  return (
    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="6.svg fill">
      <Component6Svg />
    </div>
  );
}

function Component6Svg1() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="6.svg">
      <Component6SvgFill />
    </div>
  );
}

function DivDFlex4() {
  return (
    <div className="absolute h-[30px] left-[880px] right-[220px] top-0" data-name="div.d-flex">
      <Component6Svg1 />
    </div>
  );
}

function Group5() {
  return (
    <div className="absolute bottom-[2.06%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[96.34px_29.005px] right-[0.6%] top-[1.25%]" data-name="Group" style={{ maskImage: `url('${imgGroup}')` }}>
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 97 29">
        <g id="Group">
          <path clipRule="evenodd" d={svgPaths.p2796bcf0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector" />
          <path clipRule="evenodd" d={svgPaths.p248a1d00} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_2" />
          <path clipRule="evenodd" d={svgPaths.p337ab80} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_3" />
        </g>
      </svg>
    </div>
  );
}

function ClipPathGroup5() {
  return (
    <div className="absolute bottom-[2.06%] contents left-0 right-[0.6%] top-[1.25%]" data-name="Clip path group">
      <Group5 />
    </div>
  );
}

function Component1Svg2() {
  return (
    <div className="absolute h-[30px] overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[96.923px]" data-name="1.svg" style={{ left: "calc(50% + 0.001px)" }}>
      <ClipPathGroup5 />
    </div>
  );
}

function Component1SvgFill1() {
  return (
    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="1.svg fill">
      <Component1Svg2 />
    </div>
  );
}

function Component1Svg3() {
  return (
    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="1.svg">
      <Component1SvgFill1 />
    </div>
  );
}

function DivDFlex5() {
  return (
    <div className="absolute h-[30px] left-[1100px] right-0 top-0" data-name="div.d-flex">
      <Component1Svg3 />
    </div>
  );
}

function DivSwiperWrapper() {
  return (
    <div className="absolute inset-[88.12px_15px_0.01px_15px] overflow-clip" data-name="div.swiper-wrapper">
      <DivDFlex />
      <DivDFlex1 />
      <DivDFlex2 />
      <DivDFlex3 />
      <DivDFlex4 />
      <DivDFlex5 />
    </div>
  );
}

export default function TrustedByCompanies() {
  return (
    <div className="relative size-full !bg-transparent" data-name="trusted by companies" style={{ background: 'transparent' }}>
      <div className="absolute flex flex-col font-['Merchant:Medium',_sans-serif] font-medium h-[28.13px] justify-center leading-[0] text-[14.531px] text-black text-center top-[14.06px] translate-x-[-50%] translate-y-[-50%] w-[193.62px]" style={{ left: "calc(50% + 0.091px)", fontVariationSettings: "'wdth' 87.5" }}>
      </div>
      <DivSwiperWrapper />
    </div>
  );
}