/**
 * services.jsx — the six service cards. Content lives in i18n.js;
 * this component only owns the layout, so adding/removing a service
 * is a data change, not a markup change.
 */

/* Map icon keys to real photos from the images/ folder. */
const SERVICE_IMAGES = {
  key:   "images/Doorimage1.jpeg",
  lock:  "images/Lockimage1.jpeg",
  shield:"images/BombinPhoto1.jpeg",
  car:   "images/carlockphoto1.png",
  safe:  "images/CajaFuerta1.jpeg",
  siren: "images/urgentePhoto1.png",
};

function Services() {
  const { t } = useLang();

  return (
    <section className="section services" id="servicios" data-screen-label="Servicios">
      <div className="container">
        <SectionHead
          center
          kicker={t.services.kicker}
          title={t.services.title}
          lead={t.services.lead}
        />

        <div className="services__grid">
          {t.services.items.map((item, i) => (
            <article className="service-card reveal" key={item.title} style={{ "--s": i }}>
              <img
                src={SERVICE_IMAGES[item.icon]}
                alt={item.title}
                loading="lazy"
                style={{ width: "100%", height: "160px", objectFit: "cover", borderRadius: "var(--radius)", marginBottom: "16px" }}
              />
              <div className="service-card__icon">
                <Icon name={item.icon} size={28} />
              </div>
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });