/* AUSIEGE · Desktop Équipe (1440) · universe-aware */

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

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

      <div className="d-pagehead">
        <div className="d-pagehead__grid">
          <div>
            <div className="d-pagehead__eyebrow">Équipe / 7 stylistes</div>
            <h1 className="d-pagehead__title">
              Dix ans, <em>sept mains</em>. Une maison.
            </h1>
          </div>
          <p className="d-pagehead__lede">Une seule équipe, deux univers. Chez AUSIÈGE, chaque styliste est formé·e dans un territoire (coupe, couleur, barbe, boucles, événement). Vous choisissez, ou nous vous orientons.</p>
        </div>
      </div>

      {/* Cover photo */}
      <div className="d-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) 55%, rgba(28,26,23,0.75) 100%)", pointerEvents: "none" }}/>
        <div className="d-team-cover__cap" style={{ pointerEvents: "none" }}>L'équipe AUSIÈGE · printemps 2026 · Beauvais</div>
      </div>

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

      <section className="d-sect d-sect--inkSoft">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center" }}>
          <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
            <img src={PHOTOS[universe].intro} alt="Salon Beauvais" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div>
            <div className="d-sect__eyebrow">Rejoindre l'équipe</div>
            <h2 className="d-sect__title" style={{ fontSize: 72 }}>On embauche / <em>parfois</em>.</h2>
            <p style={{ marginTop: 32, fontSize: 17, color: "var(--mist)", lineHeight: 1.65, maxWidth: 440 }}>
              Vous êtes coiffeur·euse, barbier·e ou apprenti·e ? Envoyez-nous votre book, une lettre, un mot. On répond à tout le monde, sous quinze jours.
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
              <button className="d-btn d-btn--primary">Postuler · recrutement@ausiege.fr</button>
              <button className="d-btn d-btn--ghost">Voir le salon</button>
            </div>
          </div>
        </div>
      </section>

      <DFooter/>
    </div>
  );
};

window.TeamD = TeamD;