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

const ServicesD = ({ universe = "femme" }) => {
  const items = SERVICES[universe];
  const filters = filtersOf(universe);
  const c = COPY[universe];

  const [filter, setFilter] = React.useState("Toutes");
  const shown = filter === "Toutes" ? items : items.filter(i => i.cat === filter);

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

      <div className="d-pagehead">
        <div className="d-pagehead__grid">
          <div>
            <div className="d-pagehead__eyebrow">{c.pagesEyebrow} / catalogue 2026</div>
            <h1 className="d-pagehead__title">{c.sectionTitle}</h1>
          </div>
          <p className="d-pagehead__lede">
            {c.sectionLede} {c.servicesPriceNote}
          </p>
        </div>
      </div>

      <div className="d-chiprow">
        <span className="d-chiprow__lbl">Filtrer</span>
        {filters.map(f => (
          <button
            key={f.name}
            className={`d-chip ${filter === f.name ? "active" : ""}`}
            onClick={() => setFilter(f.name)}
          >
            {f.name} <span className="d-chip__count">/ {f.count}</span>
          </button>
        ))}
        <div style={{ marginLeft: "auto", display: "flex", gap: 16, alignItems: "center" }}>
          <span style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--mist)" }}>
            {shown.length} services affichés
          </span>
        </div>
      </div>

      <section className="d-sect d-sect--ink" style={{ paddingTop: 96 }}>
        <div className="d-svclist">
          {shown.map(it => (
            <article className="d-svccard" key={it.n}>
              <div className="d-svccard__media"><img src={it.img} alt={it.t}/></div>
              <div>
                <div className="d-svccard__cat">{it.n} / {it.cat}</div>
                <h3 className="d-svccard__title">{it.t}</h3>
                <p className="d-svccard__desc">{it.d}</p>
                <div className="d-svccard__foot">
                  <span className="d-svccard__price">{it.price}</span>
                  <span className="d-svccard__time">{it.time}</span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <p style={{
          marginTop: 80, textAlign: "center",
          fontSize: 13, color: "var(--taupe)", letterSpacing: "0.04em", lineHeight: 1.7
        }}>
          Les tarifs varient selon la longueur, la matière et le styliste choisi.<br/>
          Un devis précis vous est remis en consultation, avant tout passage en cabine.
        </p>
      </section>

      <section className="d-sect d-sect--inkSoft">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center" }}>
          <div>
            <div className="d-sect__eyebrow">Vous ne savez pas choisir</div>
            <h2 className="d-sect__title" style={{ fontSize: 64 }}>Un doute / on choisit <em>ensemble</em>.</h2>
            <p style={{ marginTop: 32, fontSize: 16, color: "var(--mist)", lineHeight: 1.65, maxWidth: 440 }}>
              Quinze minutes au téléphone ou en boutique. Sans engagement, sans devis caché. On vous oriente vers le styliste et la prestation qui vous correspondent.
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
              <button className="d-btn d-btn--accent">Conseil offert · 15 min</button>
              <button className="d-btn d-btn--ghost">Voir l'équipe</button>
            </div>
          </div>
          <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
            <img src={PHOTOS[universe].intro} alt="Conseil au salon" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
        </div>
      </section>

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

window.ServicesD = ServicesD;