/* AUSIEGE · Prestations · mobile 390 · universe-aware */

const Services = ({ 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="screen" data-screen-label={`02 Prestations ${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}</div>
        <h1 className="page-head__title">{c.sectionTitle}</h1>
        <p className="page-head__lede">
          {c.sectionLede}
        </p>
      </div>

      <div className="chip-row" style={{ position: "sticky", top: 56, zIndex: 20 }}>
        {filters.map(f => (
          <button
            key={f.name}
            className={`chip ${filter === f.name ? "active" : ""}`}
            onClick={() => setFilter(f.name)}
          >
            {f.name} <span className="chip__count">/ {f.count}</span>
          </button>
        ))}
      </div>

      <section className="sect sect--ink" style={{ paddingTop: 24 }}>
        <div className="svc-list">
          {shown.map(it => (
            <div className="svc-row" key={it.n}>
              <div className="svc-row__media"><img src={it.img} alt={it.t}/></div>
              <div className="svc-row__body">
                <div className="svc-row__cat">{it.n} / {it.cat}</div>
                <div className="svc-row__title">{it.t}</div>
                <div className="svc-row__desc">{it.d}</div>
                <div className="svc-row__foot">
                  <span className="svc-row__price">{it.price}</span>
                  <span className="svc-row__time">{it.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ padding: "32px 20px 16px", textAlign: "center" }}>
          <p style={{ fontSize: 12, color: "var(--taupe)", letterSpacing: "0.06em" }}>
            Les tarifs varient selon la longueur, la matière et le styliste choisi.<br/>
            Un devis précis vous est remis en consultation.
          </p>
        </div>
      </section>

      <section className="sect sect--inkSoft" style={{ paddingTop: 32 }}>
        <div style={{ padding: "0 20px" }}>
          <div className="sect__eyebrow">Vous ne savez pas</div>
          <h2 className="sect__title" style={{ fontSize: 30 }}>Un doute / on choisit <em>ensemble</em>.</h2>
          <p style={{ marginTop: 16, fontSize: 14, color: "var(--mist)", lineHeight: 1.55 }}>
            Quinze minutes au téléphone ou en boutique. Sans engagement.
          </p>
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10 }}>
            <button className="btn btn--accent btn--block">Conseil offert · 15 min</button>
            <button className="btn btn--ghost btn--block">Voir l'équipe</button>
          </div>
        </div>
      </section>

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

window.Services = Services;