/* AUSIEGE · Merch · desktop 1440, page lifestyle éditoriale.
   Le vestiaire AU SIÈGE porté ailleurs. Plus aucun produit/packshot ici
   (huiles, parfums, accessoires ont migré vers la page Produit). */

const MerchD = () => (
  <div className="d-screen" data-screen-label="09 Merch · desktop">

    {/* HERO — la team, le vestiaire AU SIÈGE en situation */}
    <section className="d-hero" style={{ height: 820 }}>
      <div className="d-hero__media">
        <img src={MERCH_PHOTOS.lifeTeam} alt="La team AUSIÈGE en pièces AU SIÈGE, au salon." style={{ objectPosition: "center 30%" }}/>
      </div>
      <div className="d-hero__veil"/>
      <div className="d-hero__inner">
        <div className="d-hero__copy">
          <div className="d-hero__overline">Merch · le vestiaire</div>
          <h1 className="d-hero__title dmerch-hero__title">AU SIÈGE,<br/><em>porté ailleurs</em>.</h1>
          <p className="d-hero__sub">
            Les pièces de la maison, là où la vie les emmène. T-shirts, hoodies et vestes sérigraphiés, portés bien au-delà de Beauvais.
          </p>
        </div>
        <div className="d-hero__aside">
          <div className="d-hero__aside-block">
            <div className="d-hero__aside-lbl">Disponible</div>
            <div className="d-hero__aside-val">Au salon · Beauvais</div>
          </div>
          <div className="d-hero__aside-block">
            <div className="d-hero__aside-lbl">Le vestiaire</div>
            <div className="d-hero__aside-val">T-shirts · Hoodies · Vestes</div>
          </div>
        </div>
      </div>
      <div className="d-hero__bottom">
        <span>La nouvelle ère · 49°25′ 41.025</span>
        <span className="d-hero__scroll">Découvrir le vestiaire</span>
      </div>
    </section>

    <DHeader solid current="merch"/>

    {/* INTRODUCTION ÉDITORIALE — lifestyle (les pièces portées ailleurs) */}
    <section className="d-intro">
      <div className="d-intro__grid">
        <div>
          <div className="d-intro__overline">Hors du salon</div>
        </div>
        <div>
          <p className="d-intro__body">
            Les pièces AU SIÈGE ne restent pas au salon. T-shirts, hoodies et vestes sérigraphiés, portés bien au-delà de Beauvais, en ville, en altitude, au bord de l'eau. Pas une collection de voyage : juste l'esprit de la maison, là où vous l'emmenez.
          </p>
          <div className="d-intro__sig">Le vestiaire AUSIÈGE / Beauvais</div>
        </div>
      </div>
    </section>

    {/* GALERIE LIFESTYLE — grille éditoriale asymétrique */}
    <section className="d-sect d-sect--inkDeep d-sect--hairline">
      <div className="d-sect__head">
        <div>
          <div className="d-sect__eyebrow">La galerie</div>
          <h2 className="d-sect__title">Le vestiaire, <em>en situation</em>.</h2>
        </div>
        <p className="d-sect__lede">
          Les pièces AU SIÈGE se portent bien au-delà de Beauvais. Un t-shirt, un hoodie, une veste : l'esprit de la maison, emmené ailleurs.
        </p>
      </div>

      <div className="dmerch-life__gallery">
        {MERCH_LIFESTYLE.slice(0, 4).map((l, i) => (
          <figure key={l.id} className={`dmerch-shot dmerch-shot--${i + 1}`}>
            <img src={l.img} alt={`${l.piece}, porté ${l.place.toLowerCase()}.`} style={{ objectPosition: l.objPos }}/>
            <figcaption className="dmerch-shot__cap">
              <span className="dmerch-shot__idx">{String(i + 1).padStart(2, "0")}</span>
              <span className="dmerch-shot__piece">{l.piece}</span>
              <span className="dmerch-shot__place">{l.place}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>

    {/* CTA FINAL */}
    <section className="d-finalcta">
      <div className="d-finalcta__bigword">VESTIAIRE</div>
      <div className="d-finalcta__grid">
        <div>
          <div className="d-sect__eyebrow" style={{ marginBottom: 32 }}>Au salon</div>
          <h2 className="d-finalcta__title">Repartez avec <em>la pièce</em>.</h2>
        </div>
        <div className="d-finalcta__side">
          <p className="d-finalcta__sub">
            Le vestiaire AU SIÈGE se découvre et s'essaie au salon, lors de votre rendez-vous. Pour une taille ou une mise de côté, écrivez-nous.
          </p>
          <div className="d-finalcta__actions">
            <button className="d-btn d-btn--primary d-btn--lg d-btn--block">
              Réserver un rendez-vous
              <Icon name="arrow-right" size={14}/>
            </button>
            <button className="d-btn d-btn--ghost d-btn--lg d-btn--block">
              Nous contacter
              <Icon name="arrow-up-right" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </section>

    <DFooter/>
  </div>
);

window.MerchD = MerchD;