function CourseCard({ course, onOpen }) {
  return (
    <button className="acmp-course" onClick={() => onOpen(course)}>
      <div className="acmp-course-thumb">
        <img src={window.__r('catalog-' + course.id, course.image)} alt={course.title} />
      </div>
      <div className="acmp-course-title">{course.title}</div>
      <ul className="acmp-course-meta">
        <li>{course.hours}</li>
        <li>{course.modules}</li>
        <li>Certificación</li>
      </ul>
    </button>
  );
}

function CourseGrid({ courses, onOpen }) {
  return (
    <section className="acmp-courses">
      {courses.map(c => <CourseCard key={c.id} course={c} onOpen={onOpen}/>)}
    </section>
  );
}

Object.assign(window, { CourseCard, CourseGrid });