// Journal.jsx — editorial notes from the studio. 1 large + 2 stacked layout.
function Journal() {
  const items = [
    { image: "assets/interior-detail-04.jpg", date: "März 2026",    cat: "Material",    title: "Über die Stille der Materialien",  excerpt: "Wie Travertin, gebürstetes Messing und ungebleichtes Leinen miteinander altern — und warum das ein Entwurfskriterium ist.", read: "9 min" },
    { image: "assets/interior-detail-01.jpg", date: "Februar 2026", cat: "Bibliothek", title: "Eine Bibliothek in Travertin",      excerpt: "Notizen zum Umbau einer privaten Bibliothek in Como — das Buch als architektonisches Material.",                            read: "6 min" },
    { image: "assets/interior-detail-06.jpg", date: "Januar 2026",  cat: "Licht",      title: "Licht als Architekturelement",       excerpt: "Drei Beobachtungen zum Tageslicht in alpinen Innenräumen, im Winter.",                                                  read: "4 min" },
  ];
  return (
    <section
      id="journal"
      data-screen-label="Journal"
      style={{ background: "var(--bg)", padding: "176px 56px" }}
    >
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr auto",
          gap: 64, alignItems: "end", marginBottom: 88,
          paddingBottom: 28, borderBottom: "1px solid var(--border)",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-muted)",
          }}>V · Journal</div>
          <h2 style={{
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(40px, 4.4vw, 64px)", lineHeight: 1.05,
            letterSpacing: "0.005em", margin: 0, color: "var(--fg)",
          }}>
            Notes from the <span style={{ fontStyle: "italic" }}>Studio.</span>
          </h2>
          <a href="#" style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.24em", textTransform: "uppercase",
            color: "var(--fg)", borderBottom: "1px solid var(--fg)",
            paddingBottom: 4, textDecoration: "none",
          }}>Alle Beiträge →</a>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1.45fr 1fr",
          gap: 72, alignItems: "start",
        }}>
          {/* Featured */}
          <a href="#" style={{ color: "inherit", textDecoration: "none", border: 0, display: "block" }}>
            <div style={{
              width: "100%", aspectRatio: "4 / 3",
              backgroundImage: `url('${items[0].image}')`,
              backgroundSize: "cover", backgroundPosition: "center",
            }} />
            <div style={{
              marginTop: 28, display: "flex", gap: 18, alignItems: "baseline",
              fontFamily: "var(--font-sans)", fontSize: 10,
              letterSpacing: "0.28em", textTransform: "uppercase",
              color: "var(--fg-muted)",
            }}>
              <span>{items[0].date}</span>
              <span style={{ width: 18, height: 1, background: "var(--border-strong)" }} />
              <span>{items[0].cat}</span>
              <span style={{ width: 18, height: 1, background: "var(--border-strong)" }} />
              <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", letterSpacing: "0.04em", textTransform: "none", fontSize: 13 }}>{items[0].read} read</span>
            </div>
            <h3 style={{
              marginTop: 18,
              fontFamily: "var(--font-serif)", fontWeight: 300,
              fontSize: 44, lineHeight: 1.1, color: "var(--fg)",
              maxWidth: 720,
            }}>{items[0].title}</h3>
            <p style={{
              marginTop: 22, maxWidth: 640,
              fontFamily: "var(--font-sans)", fontSize: 15,
              lineHeight: 1.7, color: "var(--fg-muted)",
            }}>{items[0].excerpt}</p>
          </a>

          {/* Two stacked */}
          <div style={{ display: "flex", flexDirection: "column", gap: 56 }}>
            {items.slice(1).map((it, i) => (
              <a key={i} href="#" style={{
                display: "grid", gridTemplateColumns: "160px 1fr",
                gap: 28, color: "inherit", textDecoration: "none", border: 0,
                paddingBottom: i === 0 ? 56 : 0,
                borderBottom: i === 0 ? "1px solid var(--border)" : "0",
              }}>
                <div style={{
                  width: "100%", aspectRatio: "4 / 5",
                  backgroundImage: `url('${it.image}')`,
                  backgroundSize: "cover", backgroundPosition: "center",
                }} />
                <div>
                  <div style={{
                    display: "flex", gap: 14, alignItems: "baseline",
                    fontFamily: "var(--font-sans)", fontSize: 10,
                    letterSpacing: "0.28em", textTransform: "uppercase",
                    color: "var(--fg-muted)", marginBottom: 14,
                  }}>
                    <span>{it.date}</span>
                    <span style={{ width: 14, height: 1, background: "var(--border-strong)" }} />
                    <span>{it.cat}</span>
                  </div>
                  <h4 style={{
                    margin: 0,
                    fontFamily: "var(--font-serif)", fontWeight: 300,
                    fontSize: 24, lineHeight: 1.18, color: "var(--fg)",
                  }}>{it.title}</h4>
                  <p style={{
                    marginTop: 14,
                    fontFamily: "var(--font-sans)", fontSize: 14,
                    lineHeight: 1.65, color: "var(--fg-muted)",
                  }}>{it.excerpt}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Journal = Journal;