// ReadingRoom.jsx — index of every article, on ivory background
const ReadingRoom = () => {
  const articles = Object.entries(window.ARTICLES || {})
    .sort((a, b) => Number(b[0]) - Number(a[0]));
  const categories = ["Tout", ...Array.from(new Set(articles.map(([, a]) => a.category)))];
  const [filter, setFilter] = React.useState("Tout");
  const shown = filter === "Tout" ? articles : articles.filter(([, a]) => a.category === filter);
  const fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif';

  return (
    <main style={{ fontFamily, color: "#0A0A0A", background: "#EDE8D8", paddingTop: 76 }}>
      {/* INTRO */}
      <section style={{ padding: "160px 56px 80px" }}>
        <div style={{ maxWidth: 1600, margin: "0 auto" }}>
          <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, marginBottom: 28, fontWeight: 700 }}>
            Reading room — {articles.length} éditions
          </div>
          <h1 style={{ fontSize: "clamp(64px, 8vw, 140px)", lineHeight: .95, letterSpacing: "-0.025em", fontWeight: 700, margin: 0 }}>
            Reading <i>room.</i>
          </h1>
          <p style={{ fontSize: "clamp(22px, 1.8vw, 28px)", lineHeight: 1.4, fontStyle: "italic", maxWidth: 760, margin: "40px 0 0" }}>
            Notes &amp; analyses sur la mode, la beauté, le lifestyle et la stratégie de marque. Une édition par mois, uniquement le fond.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 28, marginTop: 64 }}>
            {categories.map(c => (
              <button key={c} onClick={() => setFilter(c)} style={{
                background: "transparent", border: "none", cursor: "pointer", padding: "0 0 5px",
                fontFamily: "inherit", color: "#0A0A0A",
                fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 700,
                opacity: filter === c ? 1 : .45,
                borderBottom: filter === c ? "1px solid #0A0A0A" : "1px solid transparent",
              }}>
                {c}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* GRID */}
      <section style={{ padding: "0 56px 180px" }}>
        <div style={{
          maxWidth: 1600, margin: "0 auto",
          display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 420px), 1fr))",
          gap: "72px 32px",
        }}>
          {shown.map(([id, a]) => (
            <a key={id} href={`article.html?id=${id}`} style={{ color: "inherit", textDecoration: "none", display: "block" }}
              onMouseEnter={(ev) => { ev.currentTarget.querySelector("img").style.transform = "scale(1.03)"; }}
              onMouseLeave={(ev) => { ev.currentTarget.querySelector("img").style.transform = "scale(1)"; }}
            >
              <div style={{ width: "100%", aspectRatio: "16/10", overflow: "hidden", marginBottom: 22, background: "#000" }}>
                <img src={a.hero} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 500ms ease-out" }} />
              </div>
              <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, fontWeight: 700, marginBottom: 14 }}>
                {a.edition} · {a.date} · {a.category} · {a.read}
              </div>
              <div style={{ fontSize: 30, fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.005em", marginBottom: 14 }}>{a.title}</div>
              <p style={{ fontSize: 17, lineHeight: 1.5, margin: 0, opacity: .75 }}>{a.standfirst}</p>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
};

window.ReadingRoom = ReadingRoom;