/* AUSIEGE · Produit · tablet 768, catalogue du salon. Page commune (sans univers).
   Réutilise les composants produit (t-svc, tmerch-parfum, tmerch-acc) hérités de Merch. */

const ProduitT = () => (
  <div className="t-screen" data-screen-label="10 Produit · tablette">
    <THeader solid current="produit"/>

    {/* HERO */}
    <section className="t-hero">
      <div className="t-hero__media">
        <img src={MERCH_PHOTOS.boxDuo} alt="Coffrets Harmonie et Héritage, soins capillaires." style={{ objectPosition: "center 42%" }}/>
      </div>
      <div className="t-hero__veil"/>
      <div className="t-hero__inner">
        <div className="t-hero__overline">Produit · le catalogue</div>
        <h1 className="t-hero__title">Le soin, <em>à emporter</em>.</h1>
        <p className="t-hero__sub">
          Huiles de soin, parfums d'intérieur et accessoires de la maison. À découvrir au salon.
        </p>
      </div>
      <div className="t-hero__bottom">
        <span>Le catalogue</span>
        <span>Au salon · Beauvais</span>
      </div>
    </section>

    {/* INTRO */}
    <section className="t-intro">
      <div className="t-intro__overline">La maison, chez soi</div>
      <p className="t-intro__body">
        Ce que l'on aime utiliser, et faire utiliser. Quelques huiles précieuses, trois parfums d'intérieur, deux accessoires marqués du repère de la maison. Présentés ici, à découvrir au salon.
      </p>
      <div className="t-intro__sig">Le catalogue AUSIÈGE / Beauvais</div>
    </section>

    {/* HUILES & SOINS */}
    <section className="t-sect t-sect--ink t-sect--hairline">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Sélection / huiles & soins</div>
          <h2 className="t-sect__title">La <em>matière</em>, nourrie.</h2>
        </div>
        <p className="t-sect__lede">
          Deux huiles capillaires signées Bariane, à utiliser en finition entre deux rendez-vous.
        </p>
      </div>

      {MERCH_OILS.map((p, i) => (
        <div key={p.id} className={`t-svc__row ${i % 2 === 1 ? "t-svc__row--rev" : ""}`}>
          <div className="t-svc__media">
            <img src={p.img} alt={`${p.name}, ${p.cat} Bariane.`} style={{ objectPosition: p.objPos }}/>
          </div>
          <div className="t-svc__body">
            <div className="t-svc__num">{p.num} · {p.cat}</div>
            <h3 className="t-svc__title">{p.name}</h3>
            <p className="t-svc__desc">{p.desc}</p>
            <div className="t-svc__foot">
              <span className="mmerch-oilnote">{p.note}</span>
              <span className="merch-status" style={{ marginLeft: "auto" }}>{p.status}</span>
            </div>
          </div>
        </div>
      ))}
    </section>

    {/* PARFUMS D'INTÉRIEUR */}
    <section className="t-sect t-sect--inkSoft">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Sélection / parfums d'intérieur</div>
          <h2 className="t-sect__title">Pour un <em>intérieur</em> qui vous ressemble.</h2>
        </div>
        <p className="t-sect__lede">
          Trois brumes d'ambiance Bariane, à venir sentir au salon.
        </p>
      </div>

      <div className="tmerch-parfum__feature">
        <img src={MERCH_PHOTOS.parfums} alt="Trois brumes d'ambiance Bariane."/>
      </div>
      <div className="tmerch-trio">
        {MERCH_PARFUMS.map(p => (
          <div key={p.id} className="tmerch-pcard">
            <div className="tmerch-pcard__fam">{p.family}</div>
            <div className="tmerch-pcard__name">{p.name}</div>
            <div className="tmerch-pcard__price">{p.price}</div>
            <div className="tmerch-pcard__notes">{p.notes}</div>
          </div>
        ))}
      </div>
    </section>

    {/* ACCESSOIRES */}
    <section className="t-sect t-sect--ink">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Sélection / accessoires</div>
          <h2 className="t-sect__title">Le repère, <em>au quotidien</em>.</h2>
        </div>
        <p className="t-sect__lede">
          Deux pièces marquées du repère de la maison.
        </p>
      </div>

      <div className="tmerch-acc">
        {MERCH_ACCESSOIRES.map(p => (
          <article key={p.id} className="tmerch-acccard">
            <div className="tmerch-acccard__media">
              <img src={p.img} alt={`${p.name}, accessoire AU SIÈGE.`} style={{ objectPosition: p.objPos }}/>
            </div>
            <div className="tmerch-acccard__cat">{p.num} · {p.cat}</div>
            <h3 className="tmerch-acccard__name">{p.name}</h3>
            <p className="tmerch-acccard__desc">{p.desc}</p>
            <span className="merch-status">{p.status}</span>
          </article>
        ))}
      </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">À découvrir <em>sur place</em>.</h2>
        </div>
        <div>
          <p className="t-finalcta__sub">
            Le catalogue se découvre, se sent et se conseille au salon. Seuls les parfums ont un prix communiqué (15 €).
          </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.ProduitT = ProduitT;