/* AUSIEGE · Tablet Tarifs (768) · universe-aware */

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

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

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

      <div style={{
        padding: "20px 40px",
        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: 16
      }}>
        <Icon name="award" size={22} style={{ color: "var(--accent)" }}/>
        <div style={{ fontSize: 13, color: "var(--bone)", lineHeight: 1.5 }}>
          <strong style={{ fontWeight: 500, letterSpacing: "0.06em" }}>Aucun acompte demandé.</strong>
          <span style={{ color: "var(--mist)" }}> Réservation libre, annulation jusqu'à 4 heures avant.</span>
        </div>
      </div>

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

      <TFooter/>
    </div>
  );
};

window.PricingT = PricingT;