"use client";
import Link from "next/link";
import CountUp from "react-countup";
import featureONeShapeImg2 from "../../../public/assets/images/shapes/features-one-shape-2.png";
import featureONeShapeImg3 from "../../../public/assets/images/shapes/features-one-shape-3.png";
import serviceONeImg1 from "../../../public/assets/images/resources/service-one-img-1.png";
import serviceONeImg2 from "../../../public/assets/images/resources/service-one-img-2.png";
import serviceONeImg3 from "../../../public/assets/images/resources/service-one-img-3.png";
import serviceONeImg4 from "../../../public/assets/images/resources/service-one-img-4.png";
import serviceONeImg5 from "../../../public/assets/images/resources/service-one-img-5.png";
import serviceONeImg6 from "../../../public/assets/images/resources/service-one-img-6.png";

function ServiceOne() {
  return (
    <section className="service-one">
      <div
        className="service-one-shape-1 wow fadeInLeft animated"
        data-wow-duration="1500ms"
        data-wow-delay="100ms"
      >
        <div className="animation_image_zoom">
          <div className="service-one-shape-1-img">
            <img src={featureONeShapeImg2.src} alt="features-one-shape-2" />
          </div>
        </div>
      </div>
      <div
        className="service-one-shape-2 wow fadeInLeft animated"
        data-wow-duration="1500ms"
        data-wow-delay="200ms"
      >
        <div className="animation_image_zoom">
          <div className="service-one-shape-2-img">
            <img src={featureONeShapeImg2.src} alt="service-one-shape-2" />
          </div>
        </div>
      </div>
      <div
        className="service-one-shape-3 wow fadeInRight animated"
        data-wow-duration="1500ms"
        data-wow-delay="300ms"
      >
        <div className="animation_image_zoom">
          <div className="service-one-shape-3-img">
            <img src={featureONeShapeImg3.src} alt="service-one-shape-3" />
          </div>
        </div>
      </div>
      <div
        className="service-one-shape-4 wow fadeInRight animated"
        data-wow-duration="1500ms"
        data-wow-delay="400ms"
      >
        <div className="animation_image_zoom">
          <div className="service-one-shape-4-img">
            <img src={featureONeShapeImg3.src} alt="service-one-shape-4" />
          </div>
        </div>
      </div>
      <div className="container">
        <div
          className="section-title text-center wow fadeInUp animated"
          data-wow-duration="1500ms"
          data-wow-delay="200ms"
        >
          <h2>Effective Marketing and Generate more leads than ever</h2>
        </div>
        <div
          className="section-details text-center wow fadeInUp animated"
          data-wow-duration="1500ms"
          data-wow-delay="100ms"
        >
          <p>
            Digital marketing &amp; advertising approach focuses on capturing
            the essential
          </p>
        </div>
        <div className="service-one-info">
          <div className="row">
            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12">
              <div
                className="service-one-box service-one-box-1 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="service-one-img-box">
                  <img src={serviceONeImg1.src} alt="service-one-img-1" />
                </div>
                <div className="service-one-title-box">
                  <h3>Increase Marketing and Add Chat List</h3>
                </div>
                <div className="service-one-btn-box">
                  <Link href="/services-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12">
              <div
                className="service-one-box service-one-box-2 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="200ms"
              >
                <div className="service-one-img-box">
                  <img src={serviceONeImg2.src} alt="service-one-img-2" />
                </div>
                <div className="service-one-title-box">
                  <h3>Increase Marketing and Add Chat List</h3>
                </div>
                <div className="service-one-btn-box">
                  <Link href="/services-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12">
              <div
                className="service-one-box service-one-box-3 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="service-one-img-box">
                  <img src={serviceONeImg3.src} alt="service-one-img-3" />
                </div>
                <div className="service-one-title-box">
                  <h3>Increase Marketing and Add Chat List</h3>
                </div>
                <div className="service-one-btn-box">
                  <Link href="/services-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12">
              <div
                className="service-one-box service-one-box-4 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="400ms"
              >
                <div className="service-one-img-box">
                  <img src={serviceONeImg4.src} alt="service-one-img-4" />
                </div>
                <div className="service-one-title-box">
                  <h3>Increase Marketing and Add Chat List</h3>
                </div>
                <div className="service-one-btn-box">
                  <Link href="/services-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12">
              <div
                className="service-one-box service-one-box-5 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="500ms"
              >
                <div className="service-one-img-box">
                  <img src={serviceONeImg5.src} alt="service-one-img-5" />
                </div>
                <div className="service-one-title-box">
                  <h3>Increase Marketing and Add Chat List</h3>
                </div>
                <div className="service-one-btn-box">
                  <Link href="/services-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12">
              <div
                className="service-one-box service-one-box-6 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="600ms"
              >
                <div className="service-one-img-box">
                  <img src={serviceONeImg6.src} alt="service-one-img-6" />
                </div>
                <div className="service-one-title-box">
                  <h3>Increase Marketing and Add Chat List</h3>
                </div>
                <div className="service-one-btn-box">
                  <Link href="/services-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="service-one-bottom">
          <div className="row">
            <div className="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
              <div
                className="service-one-bottom-inner service-one-bottom-inner-1 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="service-one-bottom-icon-box">
                  <i className="icon-check" />
                  <h2>
                    <CountUp
                      className="service-one-count"
                      start={0}
                      end={5}
                      duration={2.75}
                    >
                      5
                    </CountUp>
                    k+
                  </h2>
                </div>
                <p>Project Complete</p>
              </div>
            </div>
            <div className="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
              <div
                className="service-one-bottom-inner service-one-bottom-inner-2 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="service-one-bottom-icon-box">
                  <i className="icon-check" />
                  <h2>
                    <CountUp
                      className="service-one-count"
                      start={0}
                      end={85}
                      duration={2.75}
                    >
                      85
                    </CountUp>
                    k+
                  </h2>
                </div>
                <p>Satisfied Customers</p>
              </div>
            </div>
            <div className="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
              <div
                className="service-one-bottom-inner service-one-bottom-inner-3 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="500ms"
              >
                <div className="service-one-bottom-icon-box">
                  <i className="icon-check" />
                  <h2>
                    <CountUp
                      className="service-one-count"
                      start={0}
                      end={95}
                      duration={2.75}
                    >
                      95
                    </CountUp>
                    %
                  </h2>
                </div>
                <p>Positive Clients Reviews</p>
              </div>
            </div>
            <div className="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
              <div
                className="service-one-bottom-inner service-one-bottom-inner-4 wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="700ms"
              >
                <div className="service-one-bottom-icon-box">
                  <i className="icon-check" />
                  <h2>
                    <CountUp
                      className="service-one-count"
                      start={0}
                      end={52}
                      duration={2.75}
                    >
                      52
                    </CountUp>
                    +
                  </h2>
                </div>
                <p>Awards Winning</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default ServiceOne;
