export default function AboutWhyChooseUs() {
  return (
    <div
      className="elementor-element elementor-element-823d3c9 e-flex e-con-boxed e-con e-parent"
      data-id="823d3c9"
      data-element_type="container"
      data-e-type="container"
      data-settings={JSON.stringify({ background_background: "classic" })}
    >
      <div className="e-con-inner">
        <div
          className="elementor-element elementor-element-cb3681b e-con-full e-flex e-con e-child"
          data-id="cb3681b"
          data-element_type="container"
          data-e-type="container"
        >
          {/* Video/Counter section */}
          <div
            className="elementor-element elementor-element-dbfdeb2 e-con-full e-flex e-con e-child"
            data-id="dbfdeb2"
            data-element_type="container"
            data-e-type="container"
          >
            <div
              className="elementor-element elementor-element-a7622f6 elementor-widget elementor-widget-rakarvideo"
              data-id="a7622f6"
              data-element_type="widget"
              data-e-type="widget"
              data-widget_type="rakarvideo.default"
            >
              <div className="elementor-widget-container">
                <div className="video-sec3" data-bg-src="/assets/images/IMG-10.jpg">
                  <div className="container space text-center text-xl-start">
                    <div className="row py-xl-5 flex-row-reverse justify-content-xl-between justify-content-center align-items-center">
                      <div className="col-xl-auto"></div>
                      <div className="col-xl-6">
                        <div className="video-content3">
                          <div className="title-area mb-35"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div className="container">
                      <div className="counter-card-wrap style3">
                        <div className="counter-card">
                          <div className="media-body">
                            <h2 className="box-number"><span className="counter-number">350</span>+</h2>
                            <p className="box-text">PROJECTS FINISHED</p>
                          </div>
                        </div>
                        <div className="divider"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Why Choose Us content */}
          <div
            className="elementor-element elementor-element-82420bf e-con-full e-flex e-con e-child"
            data-id="82420bf"
            data-element_type="container"
            data-e-type="container"
          >
            {/* Section Title */}
            <div
              className="elementor-element elementor-element-f8c143b elementor-widget elementor-widget-rakarsectiontitle"
              data-id="f8c143b"
              data-element_type="widget"
              data-e-type="widget"
              data-widget_type="rakarsectiontitle.default"
            >
              <div className="elementor-widget-container">
                <div className="title-area text-left">
                  <span className="sub-title">
                    <img decoding="async" src="/assets/images/title_icon.svg" alt="Shape" />
                    Why Choose Us
                  </span>
                  <h2 className="sec-title">Why You Choose Our Services</h2>
                  <p>Profen Engineering LLC offers innovative, energy-efficient engineering solutions for cooling, heating, and misting systems, ensuring high performance and customer satisfaction.</p>
                </div>
              </div>
            </div>

            {/* Features */}
            <div
              className="elementor-element elementor-element-c7fe177 elementor-widget elementor-widget-rakarfeatures"
              data-id="c7fe177"
              data-element_type="widget"
              data-e-type="widget"
              data-widget_type="rakarfeatures.default"
            >
              <div className="elementor-widget-container">
                <div className="choose-feature-wrap">
                  <div className="choose-feature">
                    <div className="box-icon">
                      <img decoding="async" src="/assets/images/choose_feature_1.svg" alt="choose_feature_1" />
                    </div>
                    <h3 className="box-title">Certified Expert Workers</h3>
                  </div>
                  <div className="choose-feature">
                    <div className="box-icon">
                      <img decoding="async" src="/assets/images/choose_feature_2.svg" alt="choose_feature_2" />
                    </div>
                    <h3 className="box-title">Fast and Quality Services</h3>
                  </div>
                  <div className="choose-feature">
                    <div className="box-icon">
                      <img decoding="async" src="/assets/images/choose_feature_3.svg" alt="choose_feature_3" />
                    </div>
                    <h3 className="box-title">Best Prices in Town</h3>
                  </div>
                  <div className="choose-feature">
                    <div className="box-icon">
                      <img decoding="async" src="/assets/images/choose_feature_4.svg" alt="choose_feature_4" />
                    </div>
                    <h3 className="box-title">We Have Won Awards</h3>
                  </div>
                </div>
              </div>
            </div>

            {/* Button */}
            <div
              className="elementor-element elementor-element-fe36c58 elementor-widget elementor-widget-rakarbutton"
              data-id="fe36c58"
              data-element_type="widget"
              data-e-type="widget"
              data-widget_type="rakarbutton.default"
            >
              <div className="elementor-widget-container">
                <div className="btn-wrapper">
                  <a className="th-btn th_btn style4" href="/contact">
                    Contact Us<i className="far fa-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}