"use client";
import Link from "next/link";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import aboutTwoLeftImg1 from "../../../public/assets/images/about/about-two-left-img-1.jpg";
import experienceImg1 from "../../../public/assets/images/resources/experience-img-1.jpg";
import experienceImg2 from "../../../public/assets/images/resources/experience-img-2.jpg";
import experienceImg3 from "../../../public/assets/images/resources/experience-img-3.jpg";
import experienceImg4 from "../../../public/assets/images/resources/experience-img-4.jpg";
import aboutCategoryTwoImg1 from "../../../public/assets/images/about/about-two-category-img-1.jpg";
import aboutCategoryTwoImg2 from "../../../public/assets/images/about/about-two-category-img-2.jpg";
import aboutCategoryTwoImg3 from "../../../public/assets/images/about/about-two-category-img-3.jpg";
import aboutTwoCategoryImg4 from "../../../public/assets/images/about/about-two-category-img-4.jpg";
import aboutTwoCategoryImg5 from "../../../public/assets/images/about/about-two-category-img-5.jpg";
import aboutTwoCategoryImg6 from "../../../public/assets/images/about/about-two-category-img-6.jpg";

const Abtslider2 = {
  loop: true,
  autoplay: {
    delay: 1500,
  },
  slidesPerView: 3,
  spaceBetween: 0,
  slidesPerGroup: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 2,
        slidesToScroll: 3,
        arrows: true,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 2,
        slidesToScroll: 3,
        arrows: false,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        slidesToScroll: 3,
        arrows: false,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        slidesToScroll: 3,
        arrows: false,
      },
    },
  ],
};

function AboutTwo() {
  return (
    <div>
      <section className="about-two">
        <div className="container">
          <div className="about-two-box">
            <div className="row">
              <div className="col-xl-5 col-lg-12 col-md-12 col-sm-12">
                <div className="about-two-left">
                  <div
                    className="about-two-left-img-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <div className="about-two-left-img">
                      <div className="scroll_item_select_img">
                        <img src={aboutTwoLeftImg1.src} alt="data" />
                      </div>
                    </div>
                  </div>
                  <div
                    className="about-two-left-inner-clients-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <h4>Global Clients</h4>
                    <ul className="about-two-left-inner-clients-list">
                      <li>
                        <img src={experienceImg1.src} alt="experience-img-1" />
                      </li>
                      <li>
                        <img src={experienceImg2.src} alt="experience-img-2" />
                      </li>
                      <li>
                        <img src={experienceImg3.src} alt="experience-img-3" />
                      </li>
                      <li>
                        <img src={experienceImg4.src} alt="experience-img-4" />
                      </li>
                      <li>
                        <img src={experienceImg4.src} alt="experience-img-4" />
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div className="col-xl-7 col-lg-12 col-md-12 col-sm-12">
                <div className="about-two-right">
                  <div className="section-three-title">
                    <div
                      className="section-three-title-text wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="100ms"
                    >
                      <p>Welcome to Digital Agency</p>
                    </div>
                    <div
                      className="section-three-title-title wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <h2>
                        Our Focuses Delivering Superior Quality Product For your
                        business
                      </h2>
                    </div>
                  </div>
                  <div
                    className="section-three-details wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                  >
                    <p>
                      Sed perspiciatis unde omnis natus voluptatem accusantiuc
                      doloremue laudantium totamem aperiam eaque quinventore
                      veritatis quasi architecto beatae vitae dicta ways.
                    </p>
                  </div>
                  <div
                    className="about-two-right-list-box wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="700ms"
                  >
                    <div className="about-two-right-list-detali">
                      <i className="icon-check" />
                      <p>Product Design &amp; Development</p>
                    </div>
                    <div className="about-two-right-list-detali">
                      <i className="icon-check" />
                      <p>Digital Marketing Solutions</p>
                    </div>
                  </div>
                  <div
                    className="section-three-btn wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="900ms"
                  >
                    <Link href="/about" className="main-btn-three thm-btn">
                      Learn More
                      <i className="icon-right-arrow" />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="container-fluid">
          <div className="about-two-bottom-box-one">
            <Swiper
              className="swiper-wrapper"
              {...Abtslider2}
              slidesPerView={2.5}
              autoplay={true}
              autoplayspeed={1000}
            >
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Product Design</h2>
                <img
                  className="about-two-category-img"
                  src={aboutCategoryTwoImg1.src}
                  alt="about-two-category-img-1"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Digital Marketing</h2>
                <img
                  className="about-two-category-img"
                  src={aboutCategoryTwoImg2.src}
                  alt="about-two-category-img-2"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Branding Design</h2>
                <img
                  className="about-two-category-img"
                  src={aboutCategoryTwoImg3.src}
                  alt="about-two-category-img-3"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Product Design</h2>
                <img
                  className="about-two-category-img"
                  src={aboutCategoryTwoImg1.src}
                  alt="about-two-category-img-1"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Digital Marketing</h2>
                <img
                  className="about-two-category-img"
                  src={aboutCategoryTwoImg2.src}
                  alt="about-two-category-img-2"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Branding Design</h2>
                <img
                  className="about-two-category-img"
                  src={aboutCategoryTwoImg3.src}
                  alt="about-two-category-img-3"
                />
              </SwiperSlide>
            </Swiper>
          </div>
          <div className="about-two-bottom-box-two">
            <Swiper
              className="swiper-wrapper"
              {...Abtslider2}
              slidesPerView={2.5}
              autoplay={true}
              autoplayspeed={1000}
            >
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Saas Landing</h2>
                <img
                  className="about-two-category-img"
                  src={aboutTwoCategoryImg4.src}
                  alt="about-two-category-img-4"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Web Development</h2>
                <img
                  className="about-two-category-img"
                  src={aboutTwoCategoryImg5.src}
                  alt="about-two-category-img-5"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">UX/UI Design</h2>
                <img
                  className="about-two-category-img"
                  src={aboutTwoCategoryImg6.src}
                  alt="about-two-category-img-6"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Saas Landing</h2>
                <img
                  className="about-two-category-img"
                  src={aboutTwoCategoryImg4.src}
                  alt="about-two-category-img-4"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">Web Development</h2>
                <img
                  className="about-two-category-img"
                  src={aboutTwoCategoryImg5.src}
                  alt="about-two-category-img-5"
                />
              </SwiperSlide>
              <SwiperSlide className="about-two-category-box">
                <h2 className="about-two-category-title">UX/UI Design</h2>
                <img
                  className="about-two-category-img"
                  src={aboutTwoCategoryImg6.src}
                  alt="about-two-category-img-6"
                />
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </section>
    </div>
  );
}

export default AboutTwo;
