// Journal.jsx — editorial journal entries
const Journal = () => {
  const entries = [
    ["27", "N°27", "Avril 2026", "Le silencieux retour du tailleur", "Mode", "5 min"],
    ["26", "N°26", "Mars 2026",  "Beauté : la fin du « clean »",     "Beauté", "7 min"],
    ["25", "N°25", "Mars 2026",  "Pourquoi vos campagnes lassent",   "Stratégie", "6 min"],
    ["24", "N°24", "Février 2026", "Lifestyle, mot vidé de son sens", "Culture", "8 min"],
  ];
  return (
    <section id="journal" style={{
      background: "#0A0A0A", color: "#fff", padding: "200px 56px",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 72, gap: 48 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, marginBottom: 28, fontWeight: 700 }}>
              05 — Journal éditorial
            </div>
            <h2 style={{ fontSize: "clamp(64px, 6.5vw, 104px)", lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 700, margin: 0 }}>
              Notes &amp; <i>analyses.</i>
            </h2>
          </div>
          <a href="#" style={{ fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 700, color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", paddingBottom: 5 }}>
            Toutes les éditions →
          </a>
        </div>
        <div>
          {entries.map((e, i) => (
            <a key={e[0]} href={`article.html?id=${e[0]}`} style={{
              color: "inherit", textDecoration: "none",
              display: "grid",
              gridTemplateColumns: "100px 160px 1fr 180px 80px",
              gap: 32, alignItems: "center",
              padding: "36px 0",
              borderTop: "1px solid rgba(255,255,255,.18)",
              borderBottom: i === entries.length - 1 ? "1px solid rgba(255,255,255,.18)" : "none",
              transition: "padding 200ms ease-out, color 200ms ease-out",
            }}
              onMouseEnter={(ev) => { ev.currentTarget.style.paddingLeft = "20px"; }}
              onMouseLeave={(ev) => { ev.currentTarget.style.paddingLeft = "0"; }}
            >
              <span style={{ fontSize: 13, letterSpacing: ".22em", opacity: .55, fontWeight: 700 }}>{e[1]}</span>
              <span style={{ fontSize: 13, letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, fontWeight: 700 }}>{e[2]}</span>
              <span style={{ fontSize: "clamp(28px, 2.6vw, 38px)", fontWeight: 700, letterSpacing: "-0.01em", lineHeight: 1.1 }}>{e[3]}</span>
              <span style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, fontWeight: 700 }}>{e[4]}</span>
              <span style={{ fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, fontWeight: 700, textAlign: "right" }}>{e[5]}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Journal = Journal;