function Certs({ lang = 'th' }) {
  const t = window.tr('certs', lang);
  return (
    <section style={{ padding: '6rem 0', background: '#f4f1e9', borderTop: '1px solid rgba(26,43,74,0.08)' }}>
      <Wrap>
        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <H2 style={{ marginBottom: 0 }}>{t.h1a} <em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>{t.h1b}</em></H2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1px', background: 'rgba(26,43,74,0.1)' }}>
          {t.items.map((c, i) => (
            <div key={i} style={{ padding: '2.5rem 1.5rem', background: '#fbfaf5', textAlign: 'center', fontFamily: "'Cormorant Garamond',serif", fontWeight: 400, fontSize: '1.2rem', color: '#1a2b4a' }}>{c}</div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}
window.Certs = Certs;