/* AUSIEGE · Produit · mobile 390, catalogue du salon. Page commune (sans univers).
   Réutilise les composants produit (mmerch-acccard, mmerch-parfum, mmerch-trio) hérités de Merch. */

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

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

    {/* INTRO */}
    <section className="intro">
      <div className="intro__overline">La maison, chez soi</div>
      <p className="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="intro__sig">Le catalogue AUSIÈGE / Beauvais</div>
    </section>

    {/* HUILES & SOINS */}
    <section className="sect sect--ink sect--hairline">
      <div className="sect__head">
        <div className="sect__eyebrow">Sélection / huiles & soins</div>
        <h2 className="sect__title">La <em>matière</em>, nourrie.</h2>
      </div>
      <div style={{ padding: "0 20px" }}>
        {MERCH_OILS.map(p => (
          <article key={p.id} className="mmerch-acccard">
            <div className="mmerch-acccard__media">
              <img src={p.img} alt={`${p.name}, ${p.cat} Bariane.`} style={{ objectPosition: p.objPos }}/>
            </div>
            <div className="mmerch-acccard__cat">{p.num} · {p.cat}</div>
            <h3 className="mmerch-acccard__name">{p.name}</h3>
            <p className="mmerch-acccard__desc">{p.desc}</p>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 14, borderTop: "1px solid var(--border-on-dark)" }}>
              <span className="mmerch-oilnote">{p.note}</span>
              <span className="merch-status">{p.status}</span>
            </div>
          </article>
        ))}
      </div>
    </section>

    {/* PARFUMS D'INTÉRIEUR */}
    <section className="sect sect--inkSoft">
      <div className="sect__head">
        <div className="sect__eyebrow">Parfums d'intérieur</div>
        <h2 className="sect__title">Pour un <em>intérieur</em> qui vous ressemble.</h2>
      </div>
      <div style={{ padding: "0 20px" }}>
        <div className="mmerch-parfum__feature">
          <img src={MERCH_PHOTOS.parfums} alt="Trois brumes d'ambiance Bariane."/>
        </div>
        <div className="mmerch-trio">
          {MERCH_PARFUMS.map(p => (
            <div key={p.id} className="mmerch-pcard">
              <div className="mmerch-pcard__fam">{p.family}</div>
              <div className="mmerch-pcard__head">
                <span className="mmerch-pcard__name">{p.name}</span>
                <span className="mmerch-pcard__price">{p.price}</span>
              </div>
              <div className="mmerch-pcard__notes">{p.notes}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ACCESSOIRES */}
    <section className="sect sect--ink">
      <div className="sect__head">
        <div className="sect__eyebrow">Accessoires</div>
        <h2 className="sect__title">Le repère, <em>au quotidien</em>.</h2>
      </div>
      <div style={{ padding: "0 20px" }}>
        {MERCH_ACCESSOIRES.map(p => (
          <article key={p.id} className="mmerch-acccard">
            <div className="mmerch-acccard__media">
              <img src={p.img} alt={`${p.name}, accessoire AU SIÈGE.`} style={{ objectPosition: p.objPos }}/>
            </div>
            <div className="mmerch-acccard__cat">{p.num} · {p.cat}</div>
            <h3 className="mmerch-acccard__name">{p.name}</h3>
            <p className="mmerch-acccard__desc">{p.desc}</p>
            <span className="merch-status">{p.status}</span>
          </article>
        ))}
      </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">À découvrir <em>sur place</em>.</h2>
        <p className="finalcta__sub">
          Le catalogue se découvre et se conseille au salon. Seuls les parfums ont un prix communiqué (15 €).
        </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.Produit = Produit;