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

const GalleryD = ({ universe = "femme" }) => {
  const photos = PHOTOS[universe].gallery;
  const c = COPY[universe];

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

      <div className="d-pagehead">
        <div className="d-pagehead__grid">
          <div>
            <div className="d-pagehead__eyebrow">{c.pagesEyebrow} / galerie</div>
            <h1 className="d-pagehead__title">
              {universe === "homme"
                ? <>Le <em>geste</em>, à plat.</>
                : <>La <em>matière</em>, révélée.</>
              }
            </h1>
          </div>
          <p className="d-pagehead__lede">
            Une sélection des coupes, couleurs et finitions livrées ces dernières semaines dans l'univers {universe === "homme" ? "Homme" : "Femme"}. Sans before/after, sans filtre.
          </p>
        </div>
      </div>

      <section className="d-sect d-sect--ink" style={{ paddingTop: 96 }}>
        <div className="d-galwall">
          {photos.map((src, i) => {
            // Vary spans: position 0/5/9 are large; others standard
            const featured = i % 7 === 0;
            const tall = i % 5 === 2;
            return (
              <figure key={i}
                className={`d-galwall__tile ${featured ? "is-featured" : ""} ${tall ? "is-tall" : ""}`}>
                <img src={src} alt={`Travail récent ${i + 1} · ${universe}`}/>
                <figcaption>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <span>
                    {universe === "homme"
                      ? ["Dégradé", "Coupe homme", "Barbe", "Rasage", "Mullet", "Afro", "Côté"][i % 7]
                      : ["Balayage", "Coupe femme", "Brushing", "Glossing", "Coiffage", "Boucles", "Couleur"][i % 7]
                    }
                  </span>
                </figcaption>
              </figure>
            );
          })}
        </div>
      </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">Suivez la maison</div>
            <h2 className="d-sect__title" style={{ fontSize: 64 }}>Quotidien sur <em>Instagram</em>.</h2>
            <p style={{ marginTop: 32, fontSize: 16, color: "var(--mist)", lineHeight: 1.65, maxWidth: 440 }}>
              Travaux récents, gestes, coulisses du salon. On poste deux à trois fois par semaine, sans filtre.
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
              <button className="d-btn d-btn--accent">Instagram · {c.instagram}</button>
            </div>
          </div>
          <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
            <img src={photos[3]} alt="Instagram" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
        </div>
      </section>

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

window.GalleryD = GalleryD;