/* AUSIEGE · Merch · tablet 768, page lifestyle éditoriale.
   Le vestiaire AU SIÈGE porté ailleurs. Plus aucun produit/packshot ici. */

const MerchT = () => (
  <div className="t-screen" data-screen-label="09 Merch · tablette">
    <THeader solid current="merch"/>

    {/* HERO — la team */}
    <section className="t-hero">
      <div className="t-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="t-hero__veil"/>
      <div className="t-hero__inner">
        <div className="t-hero__overline">Merch · le vestiaire</div>
        <h1 className="t-hero__title">AU SIÈGE, <em>porté ailleurs</em>.</h1>
        <p className="t-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="t-hero__bottom">
        <span>Le vestiaire</span>
        <span>Au salon · Beauvais</span>
      </div>
    </section>

    {/* INTRO — lifestyle */}
    <section className="t-intro">
      <div className="t-intro__overline">Hors du salon</div>
      <p className="t-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="t-intro__sig">Le vestiaire AUSIÈGE / Beauvais</div>
    </section>

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

      <div className="tmerch-life__grid">
        {MERCH_LIFESTYLE.slice(0, 4).map(l => (
          <figure key={l.id} className="tmerch-tile">
            <img src={l.img} alt={`${l.piece}, porté ${l.place.toLowerCase()}.`} style={{ objectPosition: l.objPos }}/>
            <figcaption className="tmerch-tile__cap">
              <span className="tmerch-tile__piece">{l.piece}</span>
              <span className="tmerch-tile__place">{l.place}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>

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

    <TFooter/>
  </div>
);

window.MerchT = MerchT;