/* AUSIEGE · Tablet Équipe (768) · universe-aware */

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

  return (
    <div className="t-screen" data-screen-label={`04 Équipe ${universe === "homme" ? "Homme" : "Femme"} · tablet`} data-universe={universe}>
      <THeader solid current="team" universe={universe}/>

      <div className="t-pagehead">
        <div className="t-pagehead__eyebrow">Équipe / 7 stylistes</div>
        <h1 className="t-pagehead__title">
          Dix ans, <em>sept mains</em>. Une maison.
        </h1>
        <p className="t-pagehead__lede">Une seule équipe, deux univers. Chaque styliste est formé·e dans un territoire (coupe, couleur, barbe, boucles, événement).</p>
      </div>

      <div className="t-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.75) 100%)", pointerEvents: "none" }}/>
        <div className="t-team-cover__cap" style={{ pointerEvents: "none" }}>L'équipe AUSIÈGE · printemps 2026</div>
      </div>

      <section className="t-sect t-sect--ink">
        <div className="t-team-grid">
          {team.map(m => (
            <article className="t-teamcard" key={m.id}>
              <div className="t-teamcard__media">
                <image-slot id={`team-t-${m.id}`} src={m.img} placeholder={`Portrait ${m.name}`} shape="rect" style={{ width: "100%", height: "100%" }}></image-slot>
                <div className="t-teamcard__num">{m.num}</div>
              </div>
              <div className="t-teamcard__head">
                <div className="t-teamcard__name">{m.name}</div>
                <div className="t-teamcard__role">{m.role}</div>
              </div>
              <a className="t-teamcard__cta" href={PLANITY_URL} target="_blank" rel="noopener noreferrer">
                Réserver
                <Icon name="arrow-right" size={14}/>
              </a>
            </article>
          ))}
        </div>
      </section>

      <section className="t-sect t-sect--inkSoft">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <div className="t-sect__eyebrow">Rejoindre l'équipe</div>
            <h2 className="t-sect__title" style={{ fontSize: 44 }}>On embauche / <em>parfois</em>.</h2>
            <p style={{ marginTop: 24, fontSize: 14, color: "var(--mist)", lineHeight: 1.6 }}>
              Coiffeur·euse, barbier, apprenti·e ? Envoyez-nous votre book, une lettre.
            </p>
            <button className="t-btn t-btn--ghost" style={{ marginTop: 24 }}>
              recrutement@ausiege.fr
            </button>
          </div>
          <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
            <img src={PHOTOS[universe].intro} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
        </div>
      </section>

      <TFooter/>
    </div>
  );
};

window.TeamT = TeamT;