"use client";
import Link from "next/link";
import Service1 from "../../../public/assets/images/services/service-three-img-1.jpg";
import Service2 from "../../../public/assets/images/services/service-three-img-2.jpg";
import Service3 from "../../../public/assets/images/services/service-three-img-3.jpg";
import Service4 from "../../../public/assets/images/services/service-three-img-4.jpg";
import Service5 from "../../../public/assets/images/services/service-three-img-5.jpg";
import Service6 from "../../../public/assets/images/services/service-three-img-6.jpg";

function ServiceThree() {
  return (
    <div>
      <section className="service-three">
        <div className="container">
          <div className="service-three-title-box">
            <div className="section-three-title text-center">
              <div
                className="section-three-title-text wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Services We Provide</p>
              </div>
              <div
                className="section-three-title-title wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>Quality Product Marketing Services</h2>
              </div>
            </div>
          </div>
          <div className="service-three-tabs-box">
            <div className="row align-items-center">
              <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                <div className="service-three-tabs-left">
                  <div
                    className="service-three-img-box tab-content wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                  >
                    <div
                      className="service-three-img tab-pane fade show active"
                      id="pills-digital"
                      role="tabpanel"
                      aria-labelledby="pills-digital-tab"
                    >
                      <img src={Service1.src} alt="service-three-img-1" />
                      <div className="service-three-detail">
                        <p className="service-three-detail-text">
                          Sudantium totame aperiam quinve
                        </p>
                        <Link href="/service" className="read-more-btn">
                          Read More
                          <i className="icon-right-arrow" />
                        </Link>
                      </div>
                    </div>
                    <div
                      className="service-three-img tab-pane fade"
                      id="pills-email"
                      role="tabpanel"
                      aria-labelledby="pills-email-tab"
                    >
                      <img src={Service3.src} alt="service-three-img-3" />
                      <div className="service-three-detail">
                        <p className="service-three-detail-text">
                          Sudantium totame aperiam quinve
                        </p>
                        <Link href="/service" className="read-more-btn">
                          Read More
                          <i className="icon-right-arrow" />
                        </Link>
                      </div>
                    </div>
                    <div
                      className="service-three-img tab-pane fade"
                      id="pills-contact"
                      role="tabpanel"
                      aria-labelledby="pills-contact-tab"
                    >
                      <img src={Service4.src} alt="service-three-img-4" />
                      <div className="service-three-detail">
                        <p className="service-three-detail-text">
                          Sudantium totame aperiam quinve
                        </p>
                        <Link href="/service" className="read-more-btn">
                          Read More
                          <i className="icon-right-arrow" />
                        </Link>
                      </div>
                    </div>
                  </div>
                  <ul
                    className="service-three-link nav wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                    role="tablist"
                  >
                    <li>
                      <span>Services 01</span>
                      <button
                        className="service-three-nav-link active"
                        data-bs-toggle="pill"
                        id="pills-digital-tab"
                        data-bs-target="#pills-digital"
                        type="button"
                        role="tab"
                        aria-controls="pills-digital"
                        aria-selected="true"
                      >
                        Digital Marketing
                      </button>
                    </li>
                    <li>
                      <span>Services 02</span>
                      <button
                        className="service-three-nav-link"
                        data-bs-toggle="pill"
                        id="pills-email-tab"
                        data-bs-target="#pills-email"
                        type="button"
                        role="tab"
                        aria-controls="pills-email"
                        aria-selected="false"
                      >
                        Email Marketing
                      </button>
                    </li>
                    <li>
                      <span>Services 03</span>
                      <button
                        className="service-three-nav-link"
                        data-bs-toggle="pill"
                        id="pills-contact-tab"
                        data-bs-target="#pills-contact"
                        type="button"
                        role="tab"
                        aria-controls="pills-contact"
                        aria-selected="false"
                      >
                        Content Marketing
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
              <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                <div className="service-three-tabs-right">
                  <div
                    className="service-three-img-box tab-content wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <div
                      className="service-three-img tab-pane fade show active"
                      id="pills-social"
                      role="tabpanel"
                      aria-labelledby="pills-social-tab"
                    >
                      <img src={Service2.src} alt="service-three-img-2" />
                      <div className="service-three-detail">
                        <p className="service-three-detail-text">
                          Sudantium totame aperiam quinve
                        </p>
                        <Link href="/service" className="read-more-btn">
                          Read More
                          <i className="icon-right-arrow" />
                        </Link>
                      </div>
                    </div>
                    <div
                      className="service-three-img tab-pane fade"
                      id="pills-web"
                      role="tabpanel"
                      aria-labelledby="pills-web-tab"
                    >
                      <img src={Service5.src} alt="service-three-img-5" />
                      <div className="service-three-detail">
                        <p className="service-three-detail-text">
                          Sudantium totame aperiam quinve
                        </p>
                        <Link href="/service" className="read-more-btn">
                          Read More
                          <i className="icon-right-arrow" />
                        </Link>
                      </div>
                    </div>
                    <div
                      className="service-three-img tab-pane fade"
                      id="pills-product"
                      role="tabpanel"
                      aria-labelledby="pills-product-tab"
                    >
                      <img src={Service6.src} alt="service-three-img-6" />
                      <div className="service-three-detail">
                        <p className="service-three-detail-text">
                          Sudantium totame aperiam quinve
                        </p>
                        <Link href="/service" className="read-more-btn">
                          Read More
                          <i className="icon-right-arrow" />
                        </Link>
                      </div>
                    </div>
                  </div>
                  <ul
                    className="service-three-link nav wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                    role="tablist"
                  >
                    <li>
                      <span>Services 04</span>
                      <button
                        className="service-three-nav-link active"
                        data-bs-toggle="pill"
                        id="pills-social-tab"
                        data-bs-target="#pills-social"
                        type="button"
                        role="tab"
                        aria-controls="pills-social"
                        aria-selected="true"
                      >
                        Social Marketing
                      </button>
                    </li>
                    <li>
                      <span>Services 05</span>
                      <button
                        className="service-three-nav-link"
                        data-bs-toggle="pill"
                        id="pills-web-tab"
                        data-bs-target="#pills-web"
                        type="button"
                        role="tab"
                        aria-controls="pills-web"
                        aria-selected="false"
                      >
                        Web Optimization
                      </button>
                    </li>
                    <li>
                      <span>Services 06</span>
                      <button
                        className="service-three-nav-link"
                        data-bs-toggle="pill"
                        id="pills-product-tab"
                        data-bs-target="#pills-product"
                        type="button"
                        role="tab"
                        aria-controls="pills-product"
                        aria-selected="false"
                      >
                        Product Marketing
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ServiceThree;
