import React, { useState } from "react";
import aboutImgLeft1 from "../../../public/assets/images/about/about-three-left-img-1.jpg";
import aboutImgLeft2 from "../../../public/assets/images/about/about-three-left-img-2.jpg";

function AboutFive() {
  const [marketingStrategy1, setMarketingStrategy1] = useState(95);
  const [marketingStrategy2, setMarketingStrategy2] = useState(83);

  const handleRangeChange = (event, setValueFunction) => {
    setValueFunction(parseInt(event.target.value));
  };

  return (
    <div>
      <section className="about-three">
        <div className="container">
          <div className="about-three-title-box">
            <div className="section-five-title">
              <div
                className="section-five-title-text text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Welcome to SEO Agency</p>
              </div>
              <div
                className="section-five-title-title text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>
                  Our Focuses Delivering Superior Quality Product For growth
                  business
                </h2>
              </div>
            </div>
          </div>
          <div className="about-three-info">
            <div className="row align-items-center">
              <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                <div
                  className="about-three-left-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="about-three-left-box-shape-1" />
                  <div className="about-three-left-box-shape-2" />
                  <div
                    className="about-three-left-img-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <div className="about-three-left-img-1">
                      <img
                        src={aboutImgLeft1.src}
                        alt="about-three-left-img-1"
                      />
                    </div>
                  </div>
                  <div
                    className="about-three-left-img-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <div className="about-three-left-img-2">
                      <img
                        src={aboutImgLeft2.src}
                        alt="about-three-left-img-2"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                <div className="about-three-right-box">
                  <div
                    className="section-five-title wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <div className="section-five-title-title">
                      <h3>
                        Best SEO Experience &amp; Professional Team To Grow Your
                        Business
                      </h3>
                    </div>
                  </div>
                  <div
                    className="section-five-details wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <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-three-right-range-box wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                  >
                    <div className="about-three-right-range-detail">
                      <h4>Marketing Strategy</h4>
                      <div className="range-wrap">
                        <input
                          type="range"
                          value={marketingStrategy1}
                          onChange={(e) =>
                            handleRangeChange(e, setMarketingStrategy1)
                          }
                          className="range"
                        />
                        <output className="bubble">{marketingStrategy1}</output>
                      </div>
                    </div>
                    <div className="about-three-right-range-detail">
                      <h4>Marketing Strategy</h4>
                      <div className="range-wrap">
                        <input
                          type="range"
                          value={marketingStrategy2}
                          onChange={(e) =>
                            handleRangeChange(e, setMarketingStrategy2)
                          }
                          className="range"
                        />
                        <output className="bubble">{marketingStrategy2}</output>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default AboutFive;
