/* global React */
function TeamSection() {
  const team = window.TEAM;
  return (
    <section id="team" className="section team" data-screen-label="Team">
      <div className="section-header">
        <div>
          <div className="index">06 · Leadership</div>
          <h2>The in-haus <span className="italic-accent">team.</span></h2>
        </div>
        <div className="header-right">
          <p className="lede" style={{ margin: 0 }}>
            {window.COPY.teamLede}
          </p>
        </div>
      </div>

      <div className="team-grid">
        {team.map(m => (
          <article key={m.name} className="team-card">
            <div className="portrait" style={{ backgroundImage: `url(${m.portrait})` }} />
            <div className="role">{m.role}</div>
            <h3 className="name">{m.name}</h3>
            <div className="bio">
              {m.bio.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

window.TeamSection = TeamSection;