/**
 * 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.
 */

const SERVICE_IMAGES = {
  droplet: "images/WhatsApp Image 2026-06-21 at 12.18.58 PM.jpeg",
  drain:   "images/WhatsApp Image 2026-06-21 at 12.18.49 PM.jpeg",
  pipe:    "images/WhatsApp Image 2026-06-21 at 12.19.04 PM.jpeg",
  faucet:  "images/WhatsApp Image 2026-06-21 at 12.19.03 PM.jpeg",
  heater:  "images/WhatsApp Image 2026-06-21 at 12.18.55 PM.jpeg",
  shower:  "images/WhatsApp Image 2026-06-21 at 12.19.00 PM.jpeg",
  key:     "images/WhatsApp Image 2026-06-21 at 12.18.52 PM.jpeg",
  lock:    "images/WhatsApp Image 2026-06-21 at 12.18.51 PM.jpeg",
  siren:   "images/WhatsApp Image 2026-06-21 at 12.18.53 PM.jpeg",
};

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>

        {t.services.secondary && (
          <div style={{ marginTop: "var(--space-12, 48px)" }}>
            <h3 style={{ textAlign: "center", marginBottom: "var(--space-8, 32px)", fontSize: "1.25rem", fontWeight: 600 }}>
              {t.services.secondaryKicker}
            </h3>
            <div className="services__grid">
              {t.services.secondary.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>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Services });