import { Link } from "react-router-dom"
import { SERVICE_CARDS } from "../../data/service-grid-data"

export default function ServiceGridSection() {
  return (
    <div
      className="elementor-element elementor-element-97218ac elementor-widget elementor-widget-rakarservice"
      data-id="97218ac"
      data-element_type="widget"
      data-e-type="widget"
      data-widget_type="rakarservice.default"
    >
      <div className="elementor-widget-container">
        <div className="row gy-4">
          {SERVICE_CARDS.map((card) => (
            <div key={card.number} className="col-xxl-3 col-lg-4 col-md-6">
              <div className="service-card">
                <div className="box-number">{card.number}</div>
                <div className="box-icon">
                  <img decoding="async" src={card.icon} alt={card.title} />
                </div>
                <p className="box-subtitle">{card.subtitle}</p>
                <h3 className="box-title">
                  <Link to={`/service/${card.slug}`}>{card.title}</Link>
                </h3>
                <p className="box-text">{card.text}</p>
                <Link to={`/service/${card.slug}`} className="th-btn btn-sm th_btn">
                  Read More<i className="far fa-arrow-right ms-2"></i>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}