// Team — grid of profile cards (photo placeholder, name, role). Placeholder content until real roster is provided.
const Team = () => {
  const members = t("team.members");
  return (
    <section id="equipe" className="scl-section scl-section--paper">
      <div className="scl-container">
        <div className="scl-section__head">
          <div>
            <div className="scl-eyebrow"><span className="scl-rule" /> {t("team.eyebrow")}</div>
            <h2 className="scl-h2">{t("team.title")}</h2>
          </div>
          <p className="scl-lead scl-section__head-sub">
            {t("team.sub")}
          </p>
        </div>

        <div className="scl-team">
          {members.map((m, i) => {
            const isPlaceholder = m.photoPath === "seal-only-black.png";
            return (
              <div key={i} className="scl-team-card">
                <div className="scl-team-card__photo">
                  <img
                    src={"/assets/" + m.photoPath}
                    alt=""
                    className={"scl-team-card__img" + (isPlaceholder ? " is-placeholder" : "")}
                  />
                  {m.photoTag && <span className="scl-placeholder-tag">{m.photoTag}</span>}
                </div>
                <h3 className="scl-team-card__name">{m.name}</h3>
                <div className="scl-team-card__role">{m.role}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

window.Team = Team;