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

const Merch = () => (
  <div className="screen" data-screen-label="09 Merch">
    <MHeader solid/>

    {/* HERO — la team */}
    <section className="mmerch-hero">
      <div className="mmerch-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="mmerch-hero__veil"/>
      <div className="mmerch-hero__inner">
        <div className="mmerch-hero__overline">Merch · le vestiaire</div>
        <h1 className="mmerch-hero__title">AU SIÈGE,<br/><em>porté ailleurs</em>.</h1>
        <p className="mmerch-hero__sub">
          Les pièces de la maison, là où la vie les emmène.
        </p>
      </div>
    </section>

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

    {/* GALERIE LIFESTYLE */}
    <section className="sect sect--inkSoft sect--hairline">
      <div className="sect__head">
        <div className="sect__eyebrow">La galerie</div>
        <h2 className="sect__title">Le vestiaire, <em>en situation</em>.</h2>
      </div>
      <div style={{ padding: "0 20px" }}>
        <div className="mmerch-life__grid">
          {MERCH_LIFESTYLE.slice(0, 4).map(l => (
            <figure key={l.id} className="mmerch-tile">
              <img src={l.img} alt={`${l.piece}, porté ${l.place.toLowerCase()}.`} style={{ objectPosition: l.objPos }}/>
              <figcaption className="mmerch-tile__cap">
                <span className="mmerch-tile__piece">{l.piece}</span>
                <span className="mmerch-tile__place">{l.place}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>

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

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

window.Merch = Merch;