function Team() {
  const people = [
    {
      name: "Nour Magdi",
      role: "founder · lead engineer",
      tag: "@SPiercer",
      img: "assets/team/nour.png",
      href: "nour.html",
      bio: "Coding since 17 — computer science, then years of shipping production code. Runs the studio. Work addict between rounds."
    },
    {
      name: "Fathy Elgazzar",
      role: "engineer · newest addition",
      tag: "@gazzaar",
      img: "assets/team/fathy.png",
      href: "fathy.html",
      bio: "Newest on the team and our youngest by a margin. Picks up frameworks faster than anyone has the right to. The prodigy hire."
    },
    {
      name: "Rageh Azzazy",
      role: "engineer · the architect",
      tag: "@RagehAz",
      img: "assets/team/rageh.png",
      href: "rageh.html",
      bio: "Architect by training — literally. Spent years on construction sites and a long detour through design before switching to software. Brings the long-view discipline you'd expect from someone who used to draw load-bearing walls."
    }
  ];

  return (
    <section id="team" className="section">
      <div className="container">
        <p className="eyebrow">team</p>
        <h2 className="section-title">Three of us. That's it.</h2>
        <p className="section-sub">No project managers, no sales engineers, no offshore team. You talk to the people writing the code.</p>
        <div className="team-grid">
          {people.map((p, i) => {
            const inner = (
              <>
                <div className="avatar">
                  {p.img
                    ? <img src={p.img} alt={p.name} />
                    : <span>{p.name.replace(/[\[\]]/g, '').split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()}</span>
                  }
                </div>
                <div className="team-meta">
                  <div className="team-name">{p.name}</div>
                  <div className="team-role">{p.role}</div>
                  <p className="team-bio">{p.bio}</p>
                  <div className="team-tag">
                    {p.tag}
                    {p.href && <span className="team-more"> · view portfolio →</span>}
                  </div>
                </div>
              </>
            );
            const cls = "team-card" + (p.img ? "" : " team-card-placeholder") + (p.href ? " team-card-link" : "");
            return p.href
              ? <a className={cls} href={p.href} key={i}>{inner}</a>
              : <div className={cls} key={i}>{inner}</div>;
          })}
        </div>
      </div>
    </section>
  );
}
window.Team = Team;