export default function Services() {

    const services = [
      {
        title: "Outdoor Living & Kitchens",
        img: "/assets/images/kitchen.png"
      },
      {
        title: "Sunrooms & Enclosures",
        img: "/assets/images/sunroom.png"
      },
      {
        title: "Interior Remodelling",
        img: "/assets/images/Outdoor.png"
      },
      {
        title: "Smart Home & Technology",
        img: "/assets/images/Smart.png"
      }
    ]
  
    return (
      <section className="services-sectionwrap">
  
        <div className="container">
          <div className="services-top">
  
            <div>
              <span className="tag">Our Services</span>
  
              <h2>
                Transforming spaces with precision, innovation, <br />
                <span>and commitment to quality craftsmanship.</span>
              </h2>
            </div>
  
            <a href="/service" className="btn-primary-custom">
              Explore All Services
            </a>
  
          </div>
        </div>
  
        {/* GRID */}
        <div className="services-grid">
  
          {services.map((item, index) => (
            <div className="service-card" key={index}>
  
              <img src={item.img} alt={item.title} />
  
              <div className="overlay"></div>
  
              <h3>{item.title}</h3>
  
            </div>
          ))}
  
        </div>
  
      </section>
    )
  }