// About — meet the team behind shebytes

const TEAM = [
   { name: "Sandra Abreu",       role: "Founder & Web Designer",    img: "team/sandra-abreu.jpg" },
  { name: "Igor Elez",          role: "Desenvolvedor",   img: "team/igor-elez.jpg" },
  { name: "Richard Kelsey",     role: "Desenvolvedor",   img: "team/richard-kelsey.jpg" },
  { name: "Araceli Luettinger", role: "Web Designer",    img: "team/araceli-luettinger.jpg" },
  { name: "Joel Santiago",      role: "Desenvolvedor",   img: "team/joel-santiago.jpg" },
  { name: "Sergio Velazquez",   role: "Desenvolvedor",   img: "team/sergio-velazquez.jpg" },
  { name: "Enmanuel Diaz",      role: "Desenvolvedor",   img: "team/enmanuel-diaz.jpg" },
];

const About = () =>
  <section className="section about" id="sobre">
    <div className="shell">
      <div className="sec-head about-head">
        <div>
          <div className="eyebrow">sobre · equipe</div>
          <h2>
            Pessoas reais que<br />
            criam <span className="italic">sites reais</span>.
          </h2>
        </div>
        <p className="lede">
          Uma equipe multilíngue de designers, desenvolvedores e humanos.
        </p>
      </div>

      <ul className="team-grid" role="list">
        {TEAM.map((p, i) =>
          <li key={p.name} className="team-card" style={{ "--i": i }}>
            <div className="team-photo">
              <img src={p.img} alt={p.name} loading="lazy" />
              <span className="team-num mono">{String(i + 1).padStart(2, "0")}</span>
            </div>
            <div className="team-info">
              <div className="team-name">{p.name}</div>
              <div className="team-role mono">{p.role}</div>
            </div>
          </li>
        )}
      </ul>
    </div>
  </section>;

window.About = About;