// ============================================================
// TEAM — Compact one-viewport: 11 cards single row + tight header
// ============================================================

function TeamCard({ c, i }) {
  return (
    <article className="team-card" style={{ "--tc": c.color }}>
      <span className="glow" />
      <span className="ring" />
      <span className="num">{String(i + 1).padStart(2, "0")}</span>
      <span className="tool">{c.tool}</span>
      <img className="echo" src={c.img} alt="" aria-hidden="true" />
      <div className="team-card-img-wrap">
        <img src={c.img} alt={c.name} style={{ "--delay": (i * 0.18) + "s" }} />
      </div>
      <div className="team-card-meta">
        <small>{c.transform}</small>
        <b>{c.name}</b>
        <p>{c.role}.</p>
      </div>
    </article>
  );
}

function Team() {
  return (
    <section id="equipo" className="section team">
      <header className="team-header">
        <div>
          <div className="kicker">Conoce los módulos</div>
          <h2>No son mascotas. Son <em>módulos vivos</em> del sistema.</h2>
        </div>
        <p>Pasa el cursor sobre cada gatito y mira cómo se transforma — de personaje a herramienta.</p>
      </header>

      <div className="team-grid">
        {CHARACTERS.map((c, i) => <TeamCard key={c.id} c={c} i={i} />)}
      </div>
    </section>
  );
}

window.Team = Team;