// ---------- Blog page ----------
function BlogPage({ t, lang }) {
  const posts = (t.blog && t.blog.posts) || [];
  const tones = ["tone-1", "tone-2", "tone-3", "tone-4", "tone-5", "tone-2"];
  return (
    <article className="blog-page">
      <header className="blog-hero">
        <div className="container">
          <div className="kicker">{t.blog?.kicker || "Tagebuch"}</div>
          <h1 className="h-display blog-headline">{t.blog?.title || "Geschichten vom See."}</h1>
          <p className="lede">{t.blog?.lede}</p>
        </div>
      </header>
      <section className="blog-grid-section">
        <div className="container">
          <div className="blog-grid">
            {posts.map((p, i) => (
              <article key={i} className={`blog-card ${tones[i % tones.length]}`}>
                <div className="blog-meta">
                  <time dateTime={p.iso}>{p.date}</time>
                  <span className="dot" aria-hidden="true">·</span>
                  <span className="cat">{p.cat}</span>
                </div>
                <h2 className="blog-title">{p.title}</h2>
                <p className="blog-excerpt">{p.excerpt}</p>
                <div className="blog-read">{t.blog?.readMore || "Weiterlesen"} →</div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </article>
  );
}

Object.assign(window, { BlogPage });