// ============================================================
// CURSOS — Single-viewport store, 5 cards in row, feature accent
// Tight, scannable, designed para conversión
// ============================================================

function CursoCard({ c }) {
  const host = CHARACTERS.find(ch => ch.id === c.host);
  const isFeat = c.feature;

  const waLink = "https://wa.me/525532009853?text=" + encodeURIComponent(
    "Hola Cristina, me interesa el curso: " + c.title + " (" + c.price + ")."
  );
  const bootcampLink = "https://wa.me/525532009853?text=" + encodeURIComponent(
    "Hola Cristina, quiero aplicar al Curso Maestro de Digitalización."
  );

  return (
    <article className={"curso-card" + (isFeat ? " feature" : "")} style={{ "--cc": c.color }}>
      <div className="curso-card-top">
        <div className="curso-host"><img src={host.img} alt={host.name} draggable="false" /></div>
        <small className="tag">{c.tag}</small>
      </div>

      <h3>{c.title}</h3>
      <p className="curso-desc">{c.desc}</p>

      <div className="curso-meta">
        <div>
          <b>{c.price}</b>
          <small>{c.duration}</small>
        </div>
        {c.after && <span className="curso-after">{c.after}</span>}
      </div>

      <a className="add" href={isFeat ? bootcampLink : waLink} target="_blank" rel="noopener">
        {c.cta} →
      </a>
    </article>
  );
}

function Cursos() {
  // Bootcamp lives in its own section; here we show the 5 standalone courses.
  const courses = CURSOS.filter(c => !c.feature);

  return (
    <section id="cursos" className="section cursos">
      <header className="cursos-header">
        <h2>Cursos de IA <em>online</em></h2>
        <p>Sesiones prácticas de 2 horas en un solo día. Incluyen material didáctico que preparé previamente para que salgas haciendo algo real con IA. Si no puedes asistir, verás la clase grabada. Entrarás a una comunidad exclusiva de IA donde comparto tips, avances y nuevos cursos.</p>
      </header>

      <div className="cursos-row-flat">
        {courses.map(c => <CursoCard key={c.id} c={c} />)}
      </div>
    </section>
  );
}

window.Cursos = Cursos;