// page_journal.jsx

function PageJournal() {
  const lang = useLang();
  const [cat, setCat] = React.useState("all");
  const cats = ["all", ...Array.from(new Set(JOURNAL.map(j => j.categoryEn)))];
  const filtered = cat === "all" ? JOURNAL : JOURNAL.filter(j => j.categoryEn === cat);

  return (
    <main style={{ background: "var(--off-white)" }}>
      <section style={{ padding: "120px 40px 60px", textAlign: "center" }}>
        <div className="hoshi-eyebrow">Journal</div>
        <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(56px, 7vw, 128px)", fontWeight: 400, lineHeight: 1.0, margin: "20px 0", letterSpacing: "-0.01em" }}>
          {lang === "ja" ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300 }}>読み物</span></> : <><em style={{ fontStyle: "italic" }}>Editorial</em></>}
        </h1>
      </section>

      <section style={{ padding: "20px 40px 40px", borderBottom: "1px solid rgba(12,12,12,0.08)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "flex", gap: 36, flexWrap: "wrap", justifyContent: "center" }}>
          {cats.map(c => (
            <button key={c} onClick={() => setCat(c)} style={{
              fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
              padding: "8px 0",
              borderBottom: cat === c ? "1px solid #0C0C0C" : "1px solid transparent",
              opacity: cat === c ? 1 : 0.55,
            }}>{c === "all" ? (lang === "ja" ? "すべて" : "All") : c}</button>
          ))}
        </div>
      </section>

      {/* Asymmetric magazine grid */}
      <section style={{ padding: "80px 40px 160px" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 32, rowGap: 80 }}>
          {filtered.map((j, i) => {
            const span = j.size === "large" ? 4 : j.size === "medium" ? 3 : 2;
            const aspect = j.size === "large" ? "16/9" : j.size === "medium" ? "4/5" : "3/4";
            const dark = hexDarkness(j.color) > 0.5;
            return (
              <article key={j.id} style={{ gridColumn: `span ${span}`, cursor: "pointer" }}>
                <div style={{ aspectRatio: aspect, background: j.color, position: "relative", overflow: "hidden" }}>
                  <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                    <PearlCanvas size={j.size === "large" ? 280 : j.size === "medium" ? 200 : 140} darkness={dark ? 0.9 : 0.04} hueShift={0} />
                  </div>
                </div>
                <div style={{ marginTop: 20 }}>
                  <div className="hoshi-eyebrow">
                    {(lang === "ja" ? j.categoryJa : j.categoryEn)} · {lang === "ja" ? j.dateJa : j.dateEn}
                  </div>
                  <h3 style={{
                    fontFamily: j.size === "large" ? "var(--serif-display)" : "var(--serif-jp)",
                    fontStyle: j.size === "large" ? "italic" : "normal",
                    fontSize: j.size === "large" ? 36 : j.size === "medium" ? 22 : 18,
                    fontWeight: j.size === "large" ? 400 : 300,
                    lineHeight: 1.3,
                    margin: "14px 0 10px",
                    letterSpacing: j.size === "large" ? "-0.005em" : "0.02em",
                  }}>
                    {lang === "ja" ? j.titleJa : j.titleEn}
                  </h3>
                  <p style={{ fontFamily: "var(--serif-jp)", fontSize: 14, lineHeight: 1.8, color: "#5E5851", margin: 0, fontWeight: 300 }}>
                    {lang === "ja" ? j.excerptJa : j.excerptEn}
                  </p>
                </div>
              </article>
            );
          })}
        </div>
      </section>
    </main>
  );
}
window.PageJournal = PageJournal;