function About({ lang = 'th' }) {
  const t = window.tr('about', lang);
  return (
    <section id="about" style={{ padding: '8rem 0', background: '#fbfaf5' }}>
      <Wrap>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '5rem', alignItems: 'start' }}>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <H2>{t.h1a}<br /><em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>{t.h1b}</em></H2>
          </div>
          <div style={{ paddingTop: '1rem' }}>
            <SecP style={{ marginBottom: '1.5rem', maxWidth: 'none' }}>{t.p1}</SecP>
            <SecP style={{ maxWidth: 'none' }}>{t.p2}</SecP>
          </div>
        </div>
      </Wrap>
    </section>
  );
}
window.About = About;