export default function HomeProjects() {
  return (
    <div
      className="elementor-element elementor-element-46cde4a e-flex e-con-boxed e-con e-parent"
      data-id="46cde4a"
      data-element_type="container"
      data-e-type="container"
      data-settings={JSON.stringify({ background_background: "classic" })}
    >
      <div className="e-con-inner">
        {/* Section Title */}
        <div
          className="elementor-element elementor-element-7f42902 elementor-widget__width-initial elementor-widget elementor-widget-rakarsectiontitle"
          data-id="7f42902"
          data-element_type="widget"
          data-e-type="widget"
          data-widget_type="rakarsectiontitle.default"
        >
          <div className="elementor-widget-container">
            <div className="title-area text-center">
              <span className="sub-title2">
                <img decoding="async" src="/assets/images/title_icon5.svg" alt="Shape" />
                Our Projects
              </span>
              <h2 className="sec-title">Explore Latest Projects</h2>
              <p>Our team of experts is equipped to assist you with a variety of pipe repair needs. Please share your email address to connect with us.</p>
            </div>
          </div>
        </div>

        {/* Tab Builder */}
        <div
          className="elementor-element elementor-element-d967b8b elementor-widget elementor-widget-rakartabbuilder"
          data-id="d967b8b"
          data-element_type="widget"
          data-e-type="widget"
          data-widget_type="rakartabbuilder.default"
        >
          <div className="elementor-widget-container">
            <div className="text-center">
              <div className="nav tab-menu2 indicator-active" id="tab-menu1" role="tablist">
                <button className="tab-btn active" id="nav-1-tab" data-bs-toggle="tab" data-bs-target="#nav-1" type="button" role="tab" aria-controls="nav-1" aria-selected="true">Heating Solution</button>
                <button className="tab-btn" id="nav-2-tab" data-bs-toggle="tab" data-bs-target="#nav-2" type="button" role="tab" aria-controls="nav-2" aria-selected="true">Cooling Solution</button>
                <button className="tab-btn" id="nav-3-tab" data-bs-toggle="tab" data-bs-target="#nav-3" type="button" role="tab" aria-controls="nav-3" aria-selected="true">Misting Solution</button>
              </div>
            </div>
            <div className="tab-content">
              {/* Tab 1: Heating Solution */}
              <div className="tab-pane fade active show" id="nav-1" role="tabpanel" aria-labelledby="nav-1-tab">
                <style>{`.elementor-1171 .elementor-element.elementor-element-84548b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}`}</style>
                <div data-elementor-type="wp-post" data-elementor-id="1171" className="elementor elementor-1171">
                  <div className="elementor-element elementor-element-84548b2 e-con-full e-flex e-con e-parent" data-id="84548b2" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-33d6d1d elementor-widget elementor-widget-rakarproject" data-id="33d6d1d" data-element_type="widget" data-e-type="widget" data-widget_type="rakarproject.default">
                      <div className="elementor-widget-container">
                        <div className="slider-wrap text-center">
                          <div className="swiper th-slider project-slider5" id="projectSlider50" data-slider-options={JSON.stringify({ paginationType: "fraction", centeredSlides: true, centeredSlidesBounds: true, breakpoints: { 0: { slidesPerView: 1 }, 576: { slidesPerView: 1 }, 768: { slidesPerView: 1 }, 992: { slidesPerView: 2 }, 1200: { slidesPerView: 2 } } })}>
                            <div className="swiper-wrapper">
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/Insights-Swimming-Pool-Heat-Pumps.jpg" alt="Insights Swimming Pool Heat Pumps" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Heating Solution</p>
                                    <h3 className="box-title"><a href="/project">Swimming Pool Heating</a></h3>
                                    <p className="box-text">Heat Pumps – Energy-efficient heating for year-round pool comfort, Electric Heaters – Fast and precise temperature control,Solar Pool Heaters – Eco-friendly and cost-saving solutions</p>
                                  </div>
                                </div>
                              </div>
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/commercial-heating.jpg" alt="commercial heating" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Heating Solution</p>
                                    <h3 className="box-title"><a href="/project">Commercial &amp; Industrial Heating</a></h3>
                                    <p className="box-text">Boilers &amp; Water Heaters – High-performance solutions for hotels, hospitals, and factories, Radiant Heating Systems – Ideal for warehouses, greenhouses, and industrial spaces, Steam Heating Systems – Efficient thermal solutions for manufacturing and processing industries</p>
                                  </div>
                                </div>
                              </div>
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/outdoor-heating.jpg" alt="outdoor heating" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Heating Solution</p>
                                    <h3 className="box-title"><a href="/project">Outdoor &amp; Space Heating</a></h3>
                                    <p className="box-text">Patio Heaters – Infrared and gas heaters for outdoor comfort, Radiant Floor Heating – Efficient underfloor heating for homes and commercial spaces, Industrial Space Heating – High-capacity heaters for large facilities and warehouses</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div className="slider-controller">
                            <button data-slider-prev="#projectSlider50" className="slider-arrow default"><i className="far fa-arrow-left"></i></button>
                            <div className="slider-pagination" data-slider-id="#projectSlider50"></div>
                            <button data-slider-next="#projectSlider50" className="slider-arrow default"><i className="far fa-arrow-right"></i></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Tab 2: Cooling Solution */}
              <div className="tab-pane fade" id="nav-2" role="tabpanel" aria-labelledby="nav-2-tab">
                <style>{`.elementor-1185 .elementor-element.elementor-element-c197f94{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}`}</style>
                <div data-elementor-type="wp-post" data-elementor-id="1185" className="elementor elementor-1185">
                  <div className="elementor-element elementor-element-c197f94 e-con-full e-flex e-con e-parent" data-id="c197f94" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-20f24c9 elementor-widget elementor-widget-rakarproject" data-id="20f24c9" data-element_type="widget" data-e-type="widget" data-widget_type="rakarproject.default">
                      <div className="elementor-widget-container">
                        <div className="slider-wrap text-center">
                          <div className="swiper th-slider project-slider5" id="projectSlider51" data-slider-options={JSON.stringify({ paginationType: "fraction", centeredSlides: true, centeredSlidesBounds: true, breakpoints: { 0: { slidesPerView: 1 }, 576: { slidesPerView: 1 }, 768: { slidesPerView: 1 }, 992: { slidesPerView: 2 }, 1200: { slidesPerView: 2 } } })}>
                            <div className="swiper-wrapper">
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/outdoorcooling.webp" alt="outdoorcooling" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Cooling Solution</p>
                                    <h3 className="box-title"><a href="/project">Outdoor Cooling Solutions</a></h3>
                                    <p className="box-text">Misting Systems – Reduces outdoor temperatures by 10-15°C, perfect for gardens, patios, and outdoor restaurants, Evaporative Cooling – Ideal for open-air spaces and commercial venues, Patio &amp; Terrace Cooling Fans – Enhances comfort for outdoor seating areas</p>
                                  </div>
                                </div>
                              </div>
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/images.jpeg" alt="images" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Cooling Solution</p>
                                    <h3 className="box-title"><a href="/project">Swimming Pool Cooling</a></h3>
                                    <p className="box-text">Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control,Energy-Efficient Pool Cooling Systems</p>
                                  </div>
                                </div>
                              </div>
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/cooling.jpeg" alt="cooling" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Cooling Solution</p>
                                    <h3 className="box-title"><a href="/project">Industrial &amp; Commercial Cooling</a></h3>
                                    <p className="box-text">HVAC Systems – Centralized cooling solutions for commercial buildings, Evaporative Cooling – Cost-effective cooling for warehouses and factories, Chiller Systems – High-capacity cooling for industrial processes and Data Centers</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div className="slider-controller">
                            <button data-slider-prev="#projectSlider51" className="slider-arrow default"><i className="far fa-arrow-left"></i></button>
                            <div className="slider-pagination" data-slider-id="#projectSlider51"></div>
                            <button data-slider-next="#projectSlider51" className="slider-arrow default"><i className="far fa-arrow-right"></i></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Tab 3: Misting Solution */}
              <div className="tab-pane fade" id="nav-3" role="tabpanel" aria-labelledby="nav-3-tab">
                <style>{`.elementor-1186 .elementor-element.elementor-element-c26e3b3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}`}</style>
                <div data-elementor-type="wp-post" data-elementor-id="1186" className="elementor elementor-1186">
                  <div className="elementor-element elementor-element-c26e3b3 e-con-full e-flex e-con e-parent" data-id="c26e3b3" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-f6690c5 elementor-widget elementor-widget-rakarproject" data-id="f6690c5" data-element_type="widget" data-e-type="widget" data-widget_type="rakarproject.default">
                      <div className="elementor-widget-container">
                        <div className="slider-wrap text-center">
                          <div className="swiper th-slider project-slider5" id="projectSlider52" data-slider-options={JSON.stringify({ paginationType: "fraction", centeredSlides: true, centeredSlidesBounds: true, breakpoints: { 0: { slidesPerView: 1 }, 576: { slidesPerView: 1 }, 768: { slidesPerView: 1 }, 992: { slidesPerView: 2 }, 1200: { slidesPerView: 2 } } })}>
                            <div className="swiper-wrapper">
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/outdoormist.webp" alt="outdoormist" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Misting Solution</p>
                                    <h3 className="box-title"><a href="/project">Outdoor Cooling Misting Systems</a></h3>
                                    <p className="box-text">Patio &amp; Garden Misting – Perfect for homes, villas, cafés, and restaurants, Resort &amp; Poolside Cooling – Enhances guest comfort in hot climates, Event &amp; Festival Misting – Creates a cooling and refreshing atmosphere for outdoor gatherings</p>
                                  </div>
                                </div>
                              </div>
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/mistingindus.jpg" alt="mistingindus" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Misting Solution</p>
                                    <h3 className="box-title"><a href="/project">Industrial &amp; Commercial Misting</a></h3>
                                    <p className="box-text">Warehouse &amp; Factory Cooling – Reduces heat in large workspaces, Greenhouse Humidification – Maintains optimal humidity for plant growth, Dust &amp; Odor Control – Suppresses airborne particles in construction and waste management sites</p>
                                  </div>
                                </div>
                              </div>
                              <div className="swiper-slide">
                                <div className="project-element">
                                  <div className="box-img"><img decoding="async" src="/assets/images/fogg.jpeg" alt="fogg" /></div>
                                  <a className="icon-btn" href="/project"><i className="far fa-arrow-up-right"></i></a>
                                  <div className="box-content">
                                    <p className="box-subtitle">Misting Solution</p>
                                    <h3 className="box-title"><a href="/project">Specialized Misting Applications</a></h3>
                                    <p className="box-text">Animal &amp; Livestock Cooling – Helps regulate temperature for animal welfare, Theme Parks &amp; Entertainment Venues – Creates refreshing experiences for visitors, Agricultural Cooling – Protects crops and livestock from extreme heat</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div className="slider-controller">
                            <button data-slider-prev="#projectSlider52" className="slider-arrow default"><i className="far fa-arrow-left"></i></button>
                            <div className="slider-pagination" data-slider-id="#projectSlider52"></div>
                            <button data-slider-next="#projectSlider52" className="slider-arrow default"><i className="far fa-arrow-right"></i></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Shape Image */}
        <div
          className="elementor-element elementor-element-208ae46 elementor-widget elementor-widget-rakarshapeimage"
          data-id="208ae46"
          data-element_type="widget"
          data-e-type="widget"
          data-widget_type="rakarshapeimage.default"
        >
          <div className="elementor-widget-container">
            <div className="shape-mockup" data-top="1px" data-right="1px">
              <img decoding="async" className="" src="/assets/images/project_bg_5.png" alt="Shape Image" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}