function Stats({ lang = 'th' }) {
  const items = window.tr('stats', lang);
  return (
    <section style={{ padding: '6rem 0', background: '#fbfaf5' }}>
      <Wrap>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '3rem' }}>
          {items.map(([n, l], i) => (
            <div key={i} style={{ textAlign: 'center', borderTop: '1px solid rgba(26,43,74,0.15)', paddingTop: '2rem' }}>
              <div style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 300, fontSize: 'clamp(2.6rem,4vw,3.5rem)', color: '#1a2b4a', lineHeight: 1 }}>{n}</div>
              <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: '#7a8290', marginTop: '0.8rem' }}>{l}</div>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}
window.Stats = Stats;