/* AUSIEGE · Tarifs · mobile 390 */

const Pricing = ({ universe = "femme" }) => {
  const items = PRICING[universe];
  const c = COPY[universe];

  return (
    <div className="screen" data-screen-label={`03 Tarifs ${universe === "homme" ? "Homme" : "Femme"}`} data-universe={universe}>
      <MHeader solid universe={universe}/>

      <div className="page-head" style={{ paddingTop: 80 }}>
        <div className="page-head__eyebrow">{c.pagesEyebrow} / tarifs 2026</div>
        <h1 className="page-head__title">{c.pricingTitle}</h1>
        <p className="page-head__lede">
          {c.pricingLede}
        </p>
      </div>

      {/* Catégorie info bandeau */}
      <div style={{
        padding: "16px 20px",
        background: "rgba(184,153,104,0.08)",
        borderTop: "1px solid rgba(184,153,104,0.3)",
        borderBottom: "1px solid rgba(184,153,104,0.3)",
        display: "flex", alignItems: "center", gap: 12
      }}>
        <Icon name="award" size={18} style={{ color: "var(--accent)" }}/>
        <div style={{ fontSize: 12, lineHeight: 1.4, color: "var(--bone)" }}>
          <strong style={{ fontWeight: 500, letterSpacing: "0.06em" }}>Aucun acompte demandé.</strong>
          <span style={{ color: "var(--mist)" }}> Réservation libre, annulation jusqu'à 4h avant.</span>
        </div>
      </div>

      <section className="sect sect--ink" style={{ paddingTop: 24, paddingBottom: 64 }}>
        {items.map((l, i) => (
          <div key={i} className="price-line">
            <div>
              <span style={{ display: "block", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 5 }}>{l.cat}</span>
              <div className="price-line__name">{l.n}</div>
              {l.d && <span className="price-line__desc">{l.d}</span>}
            </div>
            <div style={{ textAlign: "right" }}>
              {l.p
                ? <div className="price-line__price">{l.p}</div>
                : <div className="price-line__price" style={{ fontSize: 14, color: "var(--mist)", fontFamily: "var(--font-sans)" }}>Sur demande</div>}
              {l.t && <div className="price-line__time">{l.t}</div>}
            </div>
          </div>
        ))}
      </section>

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

window.Pricing = Pricing;