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

const ServicesT = ({ 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="t-screen" data-screen-label={`02 Prestations ${universe === "homme" ? "Homme" : "Femme"} · tablet`} data-universe={universe}>
      <THeader solid current="services" universe={universe}/>

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

      <div className="t-chiprow">
        {filters.map(f => (
          <button key={f.name}
            className={`t-chip ${filter === f.name ? "active" : ""}`}
            onClick={() => setFilter(f.name)}>
            {f.name} <span className="t-chip__count">/ {f.count}</span>
          </button>
        ))}
      </div>

      <section className="t-sect t-sect--ink" style={{ paddingTop: 56 }}>
        <div className="t-svclist">
          {shown.map(it => (
            <article className="t-svccard" key={it.n}>
              <div className="t-svccard__media"><img src={it.img} alt={it.t}/></div>
              <div className="t-svccard__cat">{it.n} / {it.cat}</div>
              <h3 className="t-svccard__title">{it.t}</h3>
              <p className="t-svccard__desc">{it.d}</p>
              <div className="t-svccard__foot">
                <span className="t-svccard__price">{it.price}</span>
                <span className="t-svccard__time">{it.time}</span>
              </div>
            </article>
          ))}
        </div>
        <p style={{ marginTop: 64, textAlign: "center", fontSize: 12, 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.
        </p>
      </section>

      <section className="t-sect t-sect--inkSoft">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <div className="t-sect__eyebrow">Vous ne savez pas</div>
            <h2 className="t-sect__title" style={{ fontSize: 44 }}>Un doute / on choisit <em>ensemble</em>.</h2>
            <p style={{ marginTop: 24, fontSize: 14, color: "var(--mist)", lineHeight: 1.6 }}>
              Quinze minutes au téléphone ou en boutique. Sans engagement.
            </p>
            <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 10 }}>
              <button className="t-btn t-btn--accent">Conseil offert · 15 min</button>
              <button className="t-btn t-btn--ghost">Voir l'équipe</button>
            </div>
          </div>
          <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
            <img src={PHOTOS[universe].intro} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
        </div>
      </section>

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

window.ServicesT = ServicesT;