"use client"
import Counter from "@/components/Counter";

const HomeCounterSection = () => {
  return (
    <div
        className="counter-area-four bgs-cover pt-100"
        style={{ backgroundImage: "url(/assets/images/home/bg-image.jpg)" }}
      >
        <div className="container">
          <div className="row justify-content-end">
            <div className="col-xl-7 col-lg-9">
              <div className="row no-gap">

                <div className="col-lg-4 col-sm-6">
                  <div
                    className="counter-item style-four bgc-secondary counter-text-wrap"
                    data-aos="fade-down"
                    data-aos-delay={50}
                    data-aos-duration={1500}
                    data-aos-offset={50}
                  >
                    <span
                      className="count-text plus"
                      data-speed={3000}
                      data-stop={20}
                    >
                      <Counter end={20} />
                    </span>
                    <div className="wave">
                      <img
                        src="/assets/images/shapes/counter-wave.png"
                        alt="Shape"
                      />
                    </div>
                    <h6 className="counter-title">Experience Chefs</h6>
                  </div>
                </div>
                <div className="col-lg-4 col-sm-6">
                  <div
                    className="counter-item text-white style-four counter-text-wrap"
                    data-aos="fade-up"
                    data-aos-duration={1500}
                    data-aos-offset={50} style={{ backgroundColor: "#222222" }}
                  >
                    <span
                      className="count-text k-plus"
                      data-speed={3000}
                      data-stop={2}
                    >
                      <Counter end={2} />
                    </span>
                    <div className="wave">
                      <img
                        src="/assets/images/shapes/counter-wave-white.png"
                        alt="Shape"
                      />
                    </div>
                    <h6 className="counter-title">Happy Customers</h6>
                  </div>
                </div>
                <div className="col-lg-4 col-sm-6">
                  <div
                    className="counter-item style-four bgc-primary counter-text-wrap"
                    data-aos="fade-down"
                    data-aos-delay={100}
                    data-aos-duration={1500}
                    data-aos-offset={50}
                  >
                    <span
                      className="count-text plus"
                      data-speed={3000}
                      data-stop={40}
                    >
                      <Counter end={40} />
                    </span>
                    <div className="wave">
                      <img
                        src="/assets/images/shapes/counter-wave.png"
                        alt="Shape"
                      />
                    </div>
                    <h6 className="counter-title">Favorite Dishes</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  );
};
export default HomeCounterSection;