// 3B Printing — /blog: every post in one grid. Same shell as PapersPage, same BlogCard the
// homepage teaser uses, so a post looks identical wherever it is listed.
function BlogIndexPage({ lang, setLang, route, cms }) {
  const { BlogCard } = window.Ds3BPrintingDesignSystem_6b9cdf;
  const { t, Header, SectionTitle, SiteFooter } = window.Shared;
  const s = t[lang];
  const footerContent = cms.sections.footer && cms.sections.footer.content;
  const blogSection = cms.sections.blog;
  const blogContent = (blogSection && blogSection.content) || {};

  React.useEffect(() => { window.scrollTo(0, 0); }, []);

  const section = { maxWidth: 1120, margin: '0 auto', padding: 'var(--space-9) var(--space-6) var(--space-9)' };

  return (
    <div className="page-mobile-pad" style={{ background: 'var(--bg-light)', fontFamily: 'var(--font-body)', color: 'var(--ink)', minHeight: '100vh' }}>
      <Header lang={lang} setLang={setLang} route={route} footerContent={footerContent} />

      <window.EditSection type="blog" id={blogSection && blogSection.id}>
      <section style={section}>
        <a href={window.Shared.url('/')} style={{ display: 'inline-block', marginBottom: 'var(--space-5)', color: 'var(--ink-faint)', textDecoration: 'none', fontSize: 14 }}>
          {s.backHome}
        </a>
        <SectionTitle lang={lang} spot="blog">
          {(lang === 'th' ? blogContent.heading_th : blogContent.heading_en) || 'Blogs'}
        </SectionTitle>

        {cms.blogPosts.length ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 'var(--space-5)' }}>
            {cms.blogPosts.map((post) => (
              <window.EditItem key={post.id} table="blog_posts" id={post.id}>
                <BlogCard lang={lang} titleTh={post.titleTh} titleEn={post.titleEn}
                  date={lang === 'th' ? post.dateTh : post.dateEn} href={post.href}
                  src={post.src} images={post.images} tone={post.tone}
                  imagePosition={post.imagePosition} imageZoom={post.imageZoom} />
              </window.EditItem>
            ))}
          </div>
        ) : (
          <p style={{ color: 'var(--ink-faint)' }}>{lang === 'th' ? 'ยังไม่มีบทความ' : 'No posts yet.'}</p>
        )}
      </section>
      </window.EditSection>

      <SiteFooter lang={lang} footer={footerContent} />
    </div>
  );
}

window.BlogIndexPage = BlogIndexPage;