function Team() {
  const { Tag } = window.SahelSentinelDesignSystem_ecf0ad;
  const { SectionEyebrow } = window;

  const initialsStyle = (bg) => ({
    width: 64, height: 64, borderRadius: "50%", background: bg, color: "white",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, flexShrink: 0,
  });

  const soughtProfiles = ["Data scientist climat", "Ingénieur terrain / mobile", "Spécialiste engagement communautaire", "Partenariats institutionnels"];

  return (
    <section id="equipe" data-screen-label="Équipe" style={{ padding: "var(--section-padding-y) var(--section-padding-x)", background: "var(--surface-card-sunken)" }}>
      <div style={{ maxWidth: "var(--content-max-width)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
        <div>
          <SectionEyebrow>Portée par</SectionEyebrow>
          <h2 style={{ fontSize: "var(--text-display-3)", marginBottom: 20 }}>Une équipe ancrée dans le terrain sahélien</h2>
          <div style={{ display: "flex", gap: 16, alignItems: "center", background: "var(--surface-card)", borderRadius: "var(--radius-lg)", padding: 20, boxShadow: "var(--shadow-sm)" }}>
            <div style={initialsStyle("var(--indigo-600)")}>BK</div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 15.5 }}>Boukar Sanda Kader</div>
              <div style={{ fontSize: 13, color: "var(--text-secondary)" }}>Porteur de projet — Ingénieur systèmes d'information, Niger</div>
            </div>
          </div>
        </div>
        <div>
          <SectionEyebrow>Profils recherchés</SectionEyebrow>
          <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 18 }}>L'équipe se construit — rejoignez le pilote</h3>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {soughtProfiles.map((p) => <Tag key={p}>{p}</Tag>)}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Team = Team;