import React from "react";
import CountUp from "react-countup";
import "./Counter.css";

const Counter = () => {
  return (
    <>
      <section className="counter_section">

        <div className="container">
          <div className="counter_heading_box">

            <h2 className="counter_heading">
              Our Achievements
            </h2>

            <p className="counter_subheading">
              Trusted quality, authentic taste, and customer satisfaction define our journey.
            </p>

          </div>
        </div>


        <div className="container-fluid p-0">
          <div className="counter-bg">

            <div className="row rowwidth">

              <div className="col-lg-3 col-sm-6 col-6 mb-3">
                <div className="counter-box bd-right">

                  <h2 className="number">
                    <CountUp 
                      start={0}
                      end={5000}
                      duration={3}
                      suffix="+"
                    />
                  </h2>

                  <p className="text">
                    Happy Customer
                  </p>

                </div>
              </div>



              <div className="col-lg-3 col-sm-6 col-6 mb-3">
                <div className="counter-box bd-right">

                  <h2 className="number">
                    <CountUp 
                      start={0}
                      end={50}
                      duration={3}
                      suffix="+"
                    />
                  </h2>

                  <p className="text">
                    Cities Served
                  </p>

                </div>
              </div>



              <div className="col-lg-3 col-sm-6 col-6 mb-3">
                <div className="counter-box bd-right">

                  <h2 className="number">
                    <CountUp 
                      start={0}
                      end={10}
                      duration={3}
                      suffix="+"
                    />
                  </h2>

                  <p className="text">
                    Years Of Trust
                  </p>

                </div>
              </div>



              <div className="col-lg-3 col-sm-6 col-6 mb-3">
                <div className="counter-box">

                  <h2 className="number">
                    <CountUp 
                      start={0}
                      end={100}
                      duration={3}
                      suffix="%"
                    />
                  </h2>

                  <p className="text">
                    Quality Commitment
                  </p>

                </div>
              </div>


            </div>

          </div>
        </div>

      </section>
    </>
  );
};

export default Counter;