/* AUSIEGE · Équipe · mobile 390 */

const Team = ({ universe = "femme" }) => {
  const team = teamOf(universe);
  const c = COPY[universe];

  return (
    <div className="screen" data-screen-label={`04 Équipe ${universe === "homme" ? "Homme" : "Femme"}`} data-universe={universe}>
      <MHeader solid universe={universe}/>

      <div className="page-head" style={{ paddingTop: 80 }}>
        <div className="page-head__eyebrow">Équipe / 7 stylistes</div>
        <h1 className="page-head__title">Dix ans, <em>sept mains</em>. Une maison.</h1>
        <p className="page-head__lede">Une seule équipe, deux univers. Chaque styliste est formé·e dans un territoire (coupe, couleur, barbe, boucles, événement). Vous choisissez, ou nous vous orientons.</p>
      </div>

      {/* Photo collective full-bleed */}
      <div className="team-cover">
        <img src={TEAM_COVER} alt="L'équipe AUSIÈGE" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(28,26,23,0) 50%, rgba(28,26,23,0.7) 100%)",
          pointerEvents: "none"
        }}/>
        <div style={{
          position: "absolute", left: 20, bottom: 20,
          color: "var(--bone)", fontSize: 11,
          letterSpacing: "0.18em", textTransform: "uppercase",
          pointerEvents: "none"
        }}>
          L'équipe AUSIÈGE · printemps 2026
        </div>
      </div>

      <section className="sect sect--ink" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="team-list">
          {team.map(m => (
            <article className="team-card" key={m.id}>
              <div className="team-card__media">
                <image-slot id={`team-m-${m.id}`} src={m.img} placeholder={`Portrait ${m.name}`} shape="rect" style={{ width: "100%", height: "100%" }}></image-slot>
                <div className="team-card__num">{m.num}</div>
              </div>
              <div className="team-card__head">
                <div>
                  <div className="team-card__name">{m.name}</div>
                  <div className="team-card__role">{m.role}</div>
                </div>
              </div>
              <div style={{ marginTop: 20 }}>
                <button className="btn btn--ghost btn--block">
                  Réserver avec {m.name}
                  <Icon name="arrow-right" size={14}/>
                </button>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="sect sect--inkSoft" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div style={{ padding: "0 20px" }}>
          <div className="sect__eyebrow">Rejoindre l'équipe</div>
          <h2 className="sect__title" style={{ fontSize: 30 }}>
            On embauche / <em>parfois</em>.
          </h2>
          <p style={{ marginTop: 16, fontSize: 14, color: "var(--mist)", lineHeight: 1.55 }}>
            Vous êtes coiffeur·euse, barbier ou apprenti·e ? Envoyez-nous votre book, une lettre, un mot.
          </p>
          <button className="btn btn--ghost btn--block" style={{ marginTop: 24 }}>
            Postuler · recrutement@ausiege.fr
          </button>
        </div>
      </section>

      <Footer/>
      <BookBar/>
    </div>
  );
};

window.Team = Team;