function PhotoTile({ src, label }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ aspectRatio: '4/3', overflow: 'hidden', cursor: 'pointer', position: 'relative' }}>
      <img src={src} alt={label} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transform: `scale(${h ? 1.04 : 1})`, transition: 'transform 1.2s ease' }} />
      <div style={{ position: 'absolute', bottom: '1.2rem', left: '1.4rem', fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(251,250,245,0.95)', opacity: h ? 1 : 0, transition: 'opacity 0.4s', textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>{label}</div>
    </div>
  );
}
const G_SRCS = ['img/cleaning-1.webp','img/training-1.webp','img/cleaning-4.webp','img/training-2.webp','img/cleaning-3.webp','img/cleaning-2.webp'];
function Gallery({ lang = 'th' }) {
  const t = window.tr('gallery', lang);
  return (
    <section id="gallery" style={{ padding: '8rem 0', background: '#fbfaf5' }}>
      <Wrap>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '4rem' }}>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <H2>{t.h1a} <em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>{t.h1b}</em></H2>
          </div>
          <SecP>{t.desc}</SecP>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '1.5rem' }}>
          {G_SRCS.map((s, i) => <PhotoTile key={i} src={s} label={t.labels[i]} />)}
        </div>
      </Wrap>
    </section>
  );
}
window.Gallery = Gallery;