function News({ lang = 'th' }) {
  const t = window.tr('news', lang);
  return (
    <section id="news" style={{ padding: '8rem 0', background: '#fbfaf5' }}>
      <Wrap>
        <div style={{ marginBottom: '4rem' }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <H2>{t.h1a} <em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>{t.h1b}</em></H2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '3rem' }}>
          {t.items.map(([date, title, desc], i) => (
            <article key={i} style={{ borderTop: '1px solid rgba(26,43,74,0.15)', paddingTop: '2rem' }}>
              <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: '#2d6a7a', marginBottom: '1.2rem' }}>{date}</div>
              <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 500, fontSize: '1.5rem', color: '#1a2b4a', lineHeight: 1.3, marginBottom: '1rem' }}>{title}</h3>
              <p style={{ fontFamily: "'Sarabun',sans-serif", fontWeight: 400, fontSize: '0.95rem', color: '#4a5260', lineHeight: 1.85 }}>{desc}</p>
            </article>
          ))}
        </div>
      </Wrap>
    </section>
  );
}
window.News = News;