function Pilares({ onOpen }) {
  const pilares = window.PILARES || [];
  return (
    <section className="section pillars-section" id="pilares">
      <div className="section-head">
        <span className="eyebrow">Nuestro modelo</span>
        <h2>Los cuatro pilares de HARDI LATAM</h2>
        <p>
          Cuatro frentes complementarios diseñados para que distribuidores y fabricantes
          HVACR de Latinoamérica conviertan información en decisiones, y relaciones en
          rentabilidad.
        </p>
      </div>
      <div className="pillars-grid">
        {pilares.map((p) => (
          <article key={p.num} className="pillar" onClick={() => onOpen && onOpen(p.title)}>
            {p.image && (
              <div className="pillar-img" style={{ backgroundImage: `url('${p.image}')` }}>
                <span className="num-overlay">{p.num}</span>
              </div>
            )}
            <div className="body">
              <span className="icon">
                <i data-lucide={p.icon}></i>
              </span>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <span className="more">
                {p.cta}
                <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
              </span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}