"use client";
import CountUp from "react-countup";
import Factimg from "../../../public/assets/images/resources/fact-one-right-img-1.jpg";

function FactOne() {
  return (
    <div>
      <section className="fact-one">
        <div className="container">
          <div className="row">
            <div className="col-xl-7 col-lg-12 col-md-12 col-sm-12">
              <div className="fact-one-left-box">
                <div
                  className="section-two-title wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="section-two-title-title">
                    <h2>Innovation and Success SEO in business</h2>
                  </div>
                </div>
                <div
                  className="section-two-details wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <p>
                    Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusan doloremque laudantium, totam rem aperiam
                    eaque quae
                  </p>
                </div>
                <div className="fact-one-left-inner-box">
                  <div className="row">
                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                      <div
                        className="fact-one-left-inner-title wow fadeInLeft animated"
                        data-wow-duration="1500ms"
                        data-wow-delay="300ms"
                      >
                        <h5>
                          <i className="icon-arrow-right-up" />
                          <CountUp
                            className="fact-count"
                            start={0}
                            end={256}
                            duration={2.75}
                          ></CountUp>
                          +
                        </h5>
                        <p>Project Complete</p>
                      </div>
                    </div>
                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                      <div
                        className="fact-one-left-inner-title wow fadeInLeft animated"
                        data-wow-duration="1500ms"
                        data-wow-delay="100ms"
                      >
                        <h5>
                          <i className="icon-arrow-right-up" />
                          <CountUp
                            className="fact-count"
                            start={0}
                            end={85}
                            duration={2.75}
                          >
                            85
                          </CountUp>
                          k+
                        </h5>
                        <p>Satisfied Customers</p>
                      </div>
                    </div>
                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                      <div
                        className="fact-one-left-inner-title wow fadeInLeft animated"
                        data-wow-duration="1500ms"
                        data-wow-delay="300ms"
                      >
                        <h5>
                          <i className="icon-arrow-right-up" />
                          <CountUp
                            className="fact-count"
                            start={0}
                            end={95}
                            duration={2.75}
                          >
                            95
                          </CountUp>
                          %
                        </h5>
                        <p>Positive Reviews</p>
                      </div>
                    </div>
                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                      <div
                        className="fact-one-left-inner-title wow fadeInLeft animated"
                        data-wow-duration="1500ms"
                        data-wow-delay="100ms"
                      >
                        <h5>
                          <i className="icon-arrow-right-up" />
                          <CountUp
                            className="fact-count"
                            start={0}
                            end={852}
                            duration={2.75}
                          ></CountUp>
                          +
                        </h5>
                        <p>Awards Winning</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-xl-5 col-lg-12 col-md-12 col-sm-12">
              <div
                className="fact-one-right-box wow fadeInRight animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="fact-one-img-box">
                  <div className="scroll_item_select_img1">
                    <img src={Factimg.src} alt="data" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default FactOne;
