/* AUSIEGE · Desktop Tarifs (1440) · universe-aware */

const PricingD = ({ universe = "femme" }) => {
  const items = PRICING[universe];
  const c = COPY[universe];
  const cats = [...new Set(items.map(x => x.cat))];

  return (
    <div className="d-screen" data-screen-label={`03 Tarifs ${universe === "homme" ? "Homme" : "Femme"} · desktop`} data-universe={universe}>
      <DHeader solid current="pricing" universe={universe}/>

      <div className="d-pagehead">
        <div className="d-pagehead__grid">
          <div>
            <div className="d-pagehead__eyebrow">{c.pagesEyebrow} / tarifs 2026</div>
            <h1 className="d-pagehead__title">{c.pricingTitle}</h1>
          </div>
          <p className="d-pagehead__lede">
            {c.pricingLede}
          </p>
        </div>
      </div>

      <section className="d-sect d-sect--ink" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div className="d-pricewrap">
          <aside className="d-priceaside">
            <div className="d-priceaside__eyebrow">{cats.length} catégories</div>
            <h2 className="d-priceaside__title">Le détail, ligne <em>par ligne</em>.</h2>
            <p className="d-priceaside__desc">
              {cats.join(", ")}. {c.pricingAside}
            </p>
            <div className="d-priceaside__note">
              <strong>Aucun acompte demandé.</strong><br/>
              Réservation libre, annulation jusqu'à 4 heures avant le rendez-vous.
            </div>
          </aside>

          <div>
            {items.map((l, i) => (
              <div key={i} className="d-priceline">
                <div>
                  <span style={{ display: "block", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 6 }}>{l.cat}</span>
                  <div className="d-priceline__name">{l.n}</div>
                  {l.d && <div className="d-priceline__desc">{l.d}</div>}
                </div>
                {l.p
                  ? <div className="d-priceline__price">{l.p}</div>
                  : <div className="d-priceline__price" style={{ fontSize: 16, color: "var(--mist)", fontFamily: "var(--font-sans)" }}>Sur demande</div>}
                <div className="d-priceline__time">{l.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <DFooter/>
    </div>
  );
};

window.PricingD = PricingD;