function ServiceRow({ s, last }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'grid', gridTemplateColumns: '0.8fr 4fr 5fr 1fr', gap: '3rem', padding: '2.5rem 0', alignItems: 'baseline',
        borderTop: '1px solid rgba(26,43,74,0.1)', borderBottom: last ? '1px solid rgba(26,43,74,0.1)' : 'none', cursor: 'default' }}>
      <div style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 200, fontSize: '1.6rem', color: h ? '#2d6a7a' : '#1a2b4a', transition: 'color 0.3s' }}>{s[0]}</div>
      <div>
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 400, fontSize: '1.65rem', color: '#1a2b4a', lineHeight: 1.3 }}>{s[1]}</div>
        <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem', letterSpacing: '0.32em', textTransform: 'uppercase', color: '#2d6a7a', marginTop: '0.5rem' }}>{s[2]}</div>
      </div>
      <div style={{ fontFamily: "'Sarabun',sans-serif", fontWeight: 400, fontSize: '1rem', color: '#4a5260', lineHeight: 1.85 }}>{s[3]}</div>
      <div style={{ textAlign: 'right', fontFamily: "'Cormorant Garamond',serif", fontSize: '1.6rem', color: h ? '#2d6a7a' : 'rgba(26,43,74,0.3)', transform: `translateX(${h?6:0}px)`, transition: 'all 0.4s' }}>→</div>
    </div>
  );
}
function Services({ lang = 'th' }) {
  const t = window.tr('services', lang);
  return (
    <section id="services" style={{ padding: '8rem 0', background: '#f4f1e9' }}>
      <Wrap>
        <div style={{ marginBottom: '4rem' }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <H2>{t.h1a}<br /><em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>{t.h1b}</em></H2>
          <SecP style={{ marginTop: '1.5rem', maxWidth: 720 }}>{t.intro}</SecP>
        </div>
        <div>{t.items.map((s, i) => <ServiceRow key={i} s={s} last={i === t.items.length - 1} />)}</div>
      </Wrap>
    </section>
  );
}
window.Services = Services;