function Contact({ lang = 'th' }) {
  const t = window.tr('contact', lang);
  return (
    <section id="contact" style={{ padding: '8rem 0', background: '#1a2b4a' }}>
      <Wrap>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6rem' }}>
          <div>
            <Eyebrow tone="pale">{t.eyebrow}</Eyebrow>
            <H2 onDark>{t.h1a}<br /><em style={{ fontStyle: 'italic', color: 'rgba(95,160,176,0.95)' }}>{t.h1b}</em></H2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', marginTop: '3rem' }}>
              {t.items.map(([lbl, val], i) => (
                <div key={i}>
                  <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem', letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(95,160,176,0.85)', marginBottom: '0.6rem' }}>{lbl}</div>
                  <div style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '1rem', fontWeight: 400, color: 'rgba(251,250,245,0.75)', lineHeight: 1.85, whiteSpace: 'pre-line' }}>{val}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ borderTop: '1px solid rgba(251,250,245,0.1)', paddingTop: '3rem' }}>
            <Field label={t.f.name} onDark><input style={inputStyle(true)} placeholder={t.f.namePh} /></Field>
            <Field label={t.f.org} onDark><input style={inputStyle(true)} placeholder={t.f.orgPh} /></Field>
            <Field label={t.f.contact} onDark><input style={inputStyle(true)} placeholder={t.f.phPh} /></Field>
            <Field label={t.f.msg} onDark><textarea rows={4} style={{ ...inputStyle(true), resize: 'vertical', minHeight: 80 }} placeholder={t.f.msgPh} /></Field>
            <div style={{ marginTop: '2rem' }}><Btn kind="white">{t.f.submit}</Btn></div>
          </div>
        </div>
      </Wrap>
    </section>
  );
}
window.Contact = Contact;