// Services — 3-card grid (Medicina Integral, Medicina Estética, Telemedicina)
const ServiceCard = ({ icon, title, desc, featured }) => (
  <article className={`service-card ${featured ? "service-card--featured" : ""}`}>
    <div className="service-card__icon">
      <img src={`../../assets/icons/${icon}`} alt="" style={featured ? {filter: "brightness(0) invert(1)"} : null} />
    </div>
    <h3 className="service-card__title">{title}</h3>
    <p className="service-card__desc">{desc}</p>
    <span className="service-card__more">Conoce más <span aria-hidden="true">→</span></span>
  </article>
);

const Services = () => {
  return (
    <section className="section services" id="servicios">
      <div className="container">
        <div className="services__head">
          <div>
            <span className="eyebrow-mark">Nuestros servicios</span>
            <h2 className="services__title">Salud integral, en un mismo lugar.</h2>
          </div>
          <p className="services__intro">
            Cuidamos del cuerpo y la mente con un enfoque preventivo. Cada visita
            es un paso hacia una vida más plena.
          </p>
        </div>

        <div className="services__grid">
          <ServiceCard
            icon="icon-shield.png"
            title="Medicina integral"
            desc="Chequeos completos, atención primaria y seguimiento personalizado para todas las edades."
          />
          <ServiceCard
            icon="icon-telemedicine.png"
            title="Telemedicina"
            desc="Consulta con tu médico desde donde estés. Resultados, recetas y seguimiento en un solo lugar."
            featured
          />
          <ServiceCard
            icon="icon-brain.png"
            title="Medicina estética"
            desc="Tratamientos no invasivos que cuidan la piel respetando tu naturalidad."
          />
        </div>
      </div>
    </section>
  );
};

window.Services = Services;
window.ServiceCard = ServiceCard;