/** @jsx React.createElement */

function Pillar({ icon, title, children }) {
  return (
    <div className="pillar">
      <div className="pillar-icon"><Icon name={icon} /></div>
      <h3 className="pillar-title">{title}</h3>
      <p className="pillar-body">{children}</p>
    </div>
  );
}

function About() {
  return (
    <section id="about" className="section">
      <div className="container">
        <div className="eyebrow section-eyebrow">Quiénes somos</div>
        <h2 className="section-title">NUESTRA <span className="accent">COMPAÑÍA</span></h2>
        <div className="pillar-grid">
          <Pillar icon="badge-check" title="¿QUIÉNES SOMOS?">
            Somos una compañía joven, dinámica, apasionada y nuestro equipo cuenta
            con <b>más de 16 años de experiencia en tecnologías de información en la Salud</b>.
          </Pillar>
          <Pillar icon="target" title="¿QUÉ HACEMOS?">
            Proveemos soluciones tecnológicas en el ámbito de la salud <b>que solucionan
            las necesidades de nuestros clientes y exceden sus expectativas</b>.
          </Pillar>
          <Pillar icon="heart-pulse" title="COMPROMISO">
            Ayudamos y acompañamos a nuestros clientes en la mejora continua de sus
            soluciones <b>teniendo siempre como fin el cuidado y bienestar de los pacientes</b>.
          </Pillar>
        </div>
      </div>
    </section>
  );
}

window.About = About;