"use client";
import React from "react";
import Image from "next/image";
import { counterItems3 } from "@/data/facts";
import OdometerComponent from "@/components/common/OdometerComponent";
export default function Brands() {
  return (
    <div className="section-about style-2 tf-spacing-15 pt-0">
      <div className="tf-container">
        <div className="tf-spacing-14">
          <div className="heading-section text-center mb_55">
            <h6 className="title text-uppercase font2 text_mono-gray-4">
              Our clients reflect our expertise
            </h6>
          </div>
          <div className="infiniteslide tf-marquee infiniteSlide">
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-15.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-16.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-17.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-18.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-19.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-20.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-21.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-15.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-16.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-17.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-18.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-19.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-20.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-21.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-15.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-16.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-17.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-18.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-19.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-20.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
            <div
              className="marquee-item infiniteslide_clone"
              style={{ flex: "0 0 auto", display: "block" }}
            >
              <div className="partner style-3">
                <Image
                  alt="brands"
                  src="/images/brands/brand-21.png"
                  width={160}
                  height={120}
                />
              </div>
            </div>
          </div>
        </div>
        <div className="text-with-img-1">
          <div className="row">
            <div className="col-lg-6">
              <div className="left">
                <div className="shape-img-bg">
                  <Image
                    alt="img-with-shape-1"
                    className="img-custom-anim-left wow"
                    src="/images/section/img-with-shape-1.jpg"
                    width={696}
                    height={598}
                  />
                  <div className="img-bg-shape">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      x="0px"
                      y="0px"
                      viewBox="0 0 288 288"
                    >
                      <linearGradient
                        id="imagewave"
                        x1="70.711%"
                        x2="0%"
                        y1="70.711%"
                        y2="0%"
                      >
                        <stop
                          className="stop-color"
                          offset="0%"
                          stopOpacity={1}
                        />
                        <stop
                          className="stop-color"
                          offset="100%"
                          stopOpacity={1}
                        />
                      </linearGradient>
                      <path fill="url(#imagewave)" d="">
                        <animate
                          repeatCount="indefinite"
                          attributeName="d"
                          dur="5s"
                          values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
                              c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
                              c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
                              c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;
                              
                              
                              M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4
                              c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6
                              c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8
                              C48.9,198.6,57.8,191,51,171.3z;
                              
                              M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
                              c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
                              c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
                              c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z  "
                        />
                      </path>
                    </svg>
                  </div>
                </div>
                <div className="item scroll-tranform" data-distance="20%">
                  <div className="text-circle">
                    <svg className="textcircle" viewBox="0 0 500 500">
                      <defs>
                        <path
                          id="textcircle"
                          d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
                        />
                      </defs>
                      <text>
                        <textPath
                          xlinkHref="#textcircle"
                          textLength={900}
                          className="h5"
                        >
                          BUSINESS CONSULTING • ADVITEX •
                        </textPath>
                      </text>
                    </svg>
                  </div>
                  <Image
                    alt="logo"
                    className="logo"
                    src="/images/item/logo-banner-item.png"
                    width={100}
                    height={63}
                  />
                </div>
              </div>
            </div>
            <div className="col-lg-6">
              <div className="content">
                <div className="heading">
                  <h1 className="title split-text effect-right">
                    Our Mission Is Realization <br />
                    Your Dream Into Reality
                  </h1>
                  <div className="description">
                    <p
                      className="text-body-1 text_mono-gray-7 mb_9 wow animate__fadeInUp animate__animated"
                      data-wow-delay="0s"
                    >
                      At Advitex, we are a global consulting firm dedicated to
                      partnering with business and societal leaders to tackle
                      their most critical challenges. With our deep industry
                      expertise and collaborative approach.
                    </p>
                    <p
                      className="text-body-1 text_mono-gray-7 wow animate__fadeInUp animate__animated"
                      data-wow-delay="0s"
                    >
                      Our experienced consultants offer strategic thinking,
                      analytical rigor, and practical implementation skills.
                    </p>
                  </div>
                </div>
                <div
                  className="wrap d-flex wow animate__fadeInUp animate__animated"
                  data-wow-delay="0s"
                >
                  <a
                    href="#"
                    className="tf-btn btn-primary2 height-2 btn-px-28"
                  >
                    <span> Learn more</span>
                    <span className="bg-effect" />
                  </a>
                  <div className="contact d-flex align-items-center gap_12">
                    <div className="icon">
                      <i className="icon-tty-solid" />
                    </div>
                    <p className="font2 text-body-2">
                      24/7 Support: (234) 109-6666
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row wrap-counter">
          {counterItems3.map((item, index) => (
            <div key={index} className="col-md-4">
              <div className="counter-item style-default">
                <div className="sub-heading text_black text-uppercase mb_21">
                  {item.title}
                </div>
                <div className="counter-number mb_15">
                  <div className="odometer text_primary">
                    <OdometerComponent max={item.value} />
                  </div>
                  <span className="sub text_primary">{item.unit}</span>
                </div>
                <p className="sub-heading text_mono-gray-5">
                  {item.description.split("\n").map((line, i) => (
                    <React.Fragment key={i}>
                      {line}
                      {i < item.description.split("\n").length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}