function Clients({ lang = 'th' }) {
  const t = window.tr('clients', lang);
  const C = ['SCG', 'CP Group', 'BTS', 'TRUE', 'PTT', 'BDMS', 'Central', 'Major', 'BMW', 'Toyota', 'Honda', 'Nissan'];
  return (
    <section style={{ padding: '7rem 0', background: '#f4f1e9' }}>
      <Wrap>
        <div style={{ textAlign: 'center', marginBottom: '3.5rem' }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <H2 style={{ marginBottom: '1rem' }}>{t.h1a}<br /><em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>{t.h1b}</em></H2>
          <SecP style={{ margin: '1rem auto 0', textAlign: 'center' }}>{t.desc}</SecP>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '1px', background: 'rgba(26,43,74,0.08)' }}>
          {C.map((c, i) => (
            <div key={i} style={{ aspectRatio: '2/1', background: '#fbfaf5', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.78rem', letterSpacing: '0.18em', color: 'rgba(26,43,74,0.5)' }}>{c}</div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}
window.Clients = Clients;