import { Link } from 'react-router-dom'

const FILTERS = ['All', 'Misting', 'Pro-Sheild Adiabatic Cooling', 'Electrical Renovation', 'Swimming pool', 'MEP']
const FILTER_CLASSES = { 'All': '*', 'Misting': '.cat1', 'Pro-Sheild Adiabatic Cooling': '.cat3', 'Electrical Renovation': '.cat2', 'Swimming pool': '.cat4', 'MEP': '.cat5' }

const PROJECTS = [
  { category: 'cat1', image: '/assets/images/PIC-3.jpg', alt: 'PIC 3', title: 'Outdoor Misting', description: 'Our outdoor misting project includes the design, installation, and maintenance of a state-of-the-art misting system tailored to your specific outdoor space.' },
  { category: 'cat3', image: '/assets/images/PIC-2.jpg', alt: 'PIC 2', title: 'Adiabatic Cooling', description: 'An advanced energy-efficient cooling solution designed to enhance the performance of HVAC, refrigeration, and industrial cooling systems.' },
  { category: 'cat2', image: '/assets/images/project_2_2.jpg', alt: 'project_2_2', title: 'Electrical renovation', description: 'Our electrical renovation project is designed to upgrade old, inefficient, or unsafe electrical systems to meet modern standards and energy efficiency' },
  { category: 'cat5', image: '/assets/images/project_2_4.jpg', alt: 'project_2_4', title: 'MEP Works', description: 'we provide plumbing solutions for residential, commercial & industrial projects, ensuring efficient water distribution, drainage & sanitation systems.' },
  { category: 'cat1', image: '/assets/images/PIC-4.jpg', alt: 'PIC 4', title: 'Landscaping Project', description: 'Our landscaping projects focus on aesthetics, functionality, and sustainability, ensuring a harmonious blend of nature and architecture.' },
  { category: 'cat4', image: '/assets/images/PIC-7.jpg', alt: 'PIC 7', title: 'Pool Hot & Cool Project', description: 'Our Swimming Pool Hot & Cool Project includes customized temperature control systems that enhance comfort, improve efficiency & reduce energy costs.' },
]

export default function ProjectFilterGrid() {
  return (
    <div className="rakar-fluid">
      <div className="builder-page-wrapper">
        <div data-elementor-type="wp-page" data-elementor-id="36" className="elementor elementor-36">
          <div className="elementor-element elementor-element-116e028 e-flex e-con-boxed e-con e-parent" data-id="116e028" data-element_type="container" data-e-type="container">
            <div className="e-con-inner">
              <div className="elementor-element elementor-element-860beb9 elementor-widget elementor-widget-rakarprojectfilter" data-id="860beb9" data-element_type="widget" data-e-type="widget" data-widget_type="rakarprojectfilter.default">
                <div className="elementor-widget-container">
                  <div className="filter-menu indicator-active filter-menu-active">
                    {FILTERS.map((f, i) => (
                      <button key={f} data-filter={FILTER_CLASSES[f]} className={`tab-btn${i === 0 ? ' active' : ''}`} type="button">{f}</button>
                    ))}
                  </div>
                  <div className="row gy-4 filter-active">
                    {PROJECTS.map((p, i) => (
                      <div key={i} className={`col-xxl-3 col-lg-4 col-md-6 filter-item ${p.category}`}>
                        <div className="project-grid">
                          <div className="box-img"><img decoding="async" src={p.image} alt={p.alt} /></div>
                          <div className="box-content">
                            <h3 className="box-title"><Link to="/contact">{p.title}</Link></h3>
                            <p className="box-text">{p.description}</p>
                            <Link to="/contact" className="th-btn2 style2 btn-sm th_btn">Learn More<i className="far fa-arrow-right"></i></Link>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
