/* AUSIEGE · Produit · desktop 1440, catalogue du salon (huiles, parfums, accessoires).
   Page commune (sans univers). Aucune vente en ligne : « Disponible au salon »,
   seuls les parfums d'intérieur ont un prix communiqué (15 €). Packshots MERCH/1-5.
   Réutilise les composants produit (d-svc, dmerch-parfum, dmerch-acc) hérités de Merch. */

const ProduitD = () => (
  <div className="d-screen" data-screen-label="10 Produit · desktop">

    {/* HERO — packshot catalogue */}
    <section className="d-hero" style={{ height: 820 }}>
      <div className="d-hero__media">
        <img src={MERCH_PHOTOS.boxDuo} alt="Coffrets Harmonie et Héritage, soins capillaires." style={{ objectPosition: "center 42%" }}/>
      </div>
      <div className="d-hero__veil"/>
      <div className="d-hero__inner">
        <div className="d-hero__copy">
          <div className="d-hero__overline">Produit · le catalogue</div>
          <h1 className="d-hero__title dmerch-hero__title">Le soin,<br/><em>à emporter</em>.</h1>
          <p className="d-hero__sub">
            Huiles de soin, parfums d'intérieur et accessoires de la maison. À découvrir et conseiller au salon.
          </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 catalogue</div>
            <div className="d-hero__aside-val">Huiles · Parfums · Accessoires</div>
          </div>
        </div>
      </div>
      <div className="d-hero__bottom">
        <span>La maison, chez soi · Beauvais</span>
        <span className="d-hero__scroll">Découvrir le catalogue</span>
      </div>
    </section>

    <DHeader solid current="produit"/>

    {/* INTRODUCTION ÉDITORIALE */}
    <section className="d-intro">
      <div className="d-intro__grid">
        <div>
          <div className="d-intro__overline">La maison, chez soi</div>
        </div>
        <div>
          <p className="d-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 et conseiller au salon.
          </p>
          <div className="d-intro__sig">Le catalogue AUSIÈGE / Beauvais</div>
        </div>
      </div>
    </section>

    {/* HUILES & SOINS — lignes éditoriales alternées */}
    <section className="d-sect d-sect--ink d-sect--hairline">
      <div className="d-sect__head">
        <div>
          <div className="d-sect__eyebrow">Sélection / huiles & soins</div>
          <h2 className="d-sect__title">La <em>matière</em>, nourrie.</h2>
        </div>
        <p className="d-sect__lede">
          Deux huiles capillaires signées Bariane, choisies pour leur richesse et leur tenue. À utiliser en finition, entre deux rendez-vous.
        </p>
      </div>

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

    {/* PARFUMS D'INTÉRIEUR */}
    <section className="d-sect d-sect--inkSoft">
      <div className="d-sect__head">
        <div>
          <div className="d-sect__eyebrow">Sélection / parfums d'intérieur</div>
          <h2 className="d-sect__title">Pour un <em>intérieur</em> qui vous ressemble.</h2>
        </div>
        <p className="d-sect__lede">
          Trois brumes d'ambiance Bariane, à venir sentir au salon. Vaporisées sur les textiles ou dans la pièce, pour prolonger l'atmosphère.
        </p>
      </div>

      <div className="dmerch-parfum">
        <div className="dmerch-parfum__feature">
          <img src={MERCH_PHOTOS.parfums} alt="Trois brumes d'ambiance Bariane : Baie étoilée, Ombre Blanche, Brise de vanille."/>
          <div className="dmerch-parfum__cap">Bariane · parfums d'intérieur</div>
        </div>
        <div className="dmerch-trio">
          {MERCH_PARFUMS.map(p => (
            <div key={p.id} className="dmerch-pcard">
              <div className="dmerch-pcard__fam">{p.family}</div>
              <div className="dmerch-pcard__name">{p.name}</div>
              <div className="dmerch-pcard__notes">{p.notes}</div>
              <div className="dmerch-pcard__foot">
                <span className="dmerch-pcard__price">{p.price}</span>
                <span className="dmerch-pcard__unit">Le flacon · 250 ml</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ACCESSOIRES */}
    <section className="d-sect d-sect--ink">
      <div className="d-sect__head">
        <div>
          <div className="d-sect__eyebrow">Sélection / accessoires</div>
          <h2 className="d-sect__title">Le repère, <em>au quotidien</em>.</h2>
        </div>
        <p className="d-sect__lede">
          Deux pièces marquées du repère de la maison, à glisser dans son sac ou poser sur le comptoir.
        </p>
      </div>

      <div className="dmerch-acc">
        {MERCH_ACCESSOIRES.map(p => (
          <article key={p.id} className="dmerch-acccard">
            <div className="dmerch-acccard__media">
              <img src={p.img} alt={`${p.name}, accessoire AU SIÈGE.`} style={{ objectPosition: p.objPos }}/>
            </div>
            <div className="dmerch-acccard__cat">{p.num} · {p.cat}</div>
            <h3 className="dmerch-acccard__name">{p.name}</h3>
            <p className="dmerch-acccard__desc">{p.desc}</p>
            <div className="dmerch-acccard__foot">
              <span className="merch-status">{p.status}</span>
            </div>
          </article>
        ))}
      </div>
    </section>

    {/* CTA FINAL */}
    <section className="d-finalcta">
      <div className="d-finalcta__bigword">CATALOGUE</div>
      <div className="d-finalcta__grid">
        <div>
          <div className="d-sect__eyebrow" style={{ marginBottom: 32 }}>Au salon</div>
          <h2 className="d-finalcta__title">À découvrir <em>sur place</em>.</h2>
        </div>
        <div className="d-finalcta__side">
          <p className="d-finalcta__sub">
            Le catalogue se découvre, se sent et se conseille au salon, lors de votre rendez-vous. Seuls les parfums d'intérieur ont un prix communiqué (15 €).
          </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.ProduitD = ProduitD;