function Hero({ lang }) {
  const t = {
    th: { tag: 'ตั้งแต่ พ.ศ. ๒๕๓๘',
          h1a: 'ล้างคราบ', h1b: 'ไร้ร่องรอย',
          desc: 'พื้นที่ที่หายใจได้ — ผ่านการดูแลอย่างเงียบ ๆ มากว่าสามทศวรรษ',
          b: 'สำรวจบริการ', scroll: 'เลื่อนลง' },
    en: { tag: 'Since 1995',
          h1a: 'Clean Space,', h1b: 'Clear Mind',
          desc: 'Spaces that breathe again — quietly cared for, for over three decades.',
          b: 'Explore services', scroll: 'Scroll' },
    zh: { tag: '自 1995 年',
          h1a: '洁净空间', h1b: '焕发新生',
          desc: '让空间再次呼吸 — 三十年安静的守护。',
          b: '查看服务', scroll: '向下' },
  }[lang];
  return (
    <section id="hero" style={{
      height: '100vh', minHeight: 720, position: 'relative', overflow: 'hidden',
      background: '#1a2b4a',
    }}>
      <img src="../../assets/zen-hero.png" alt=""
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.92 }} />
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(26,43,74,0.05) 0%, rgba(26,43,74,0) 40%, rgba(26,43,74,0.55) 100%)' }} />
      <div style={{ position: 'relative', zIndex: 2, height: '100%',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '0 5rem', maxWidth: 1180, margin: '0 auto' }}>
        <div style={{
          fontFamily: "'Jost',sans-serif", fontWeight: 300, fontSize: '0.6rem',
          letterSpacing: '0.5em', textTransform: 'uppercase',
          color: 'rgba(251,250,245,0.6)', marginBottom: '2.5rem',
        }}>{t.tag}</div>
        <h1 style={{
          fontFamily: "'Cormorant Garamond',serif", fontWeight: 200,
          fontSize: 'clamp(3rem,6vw,5.4rem)', lineHeight: 1.08,
          color: '#fbfaf5', letterSpacing: '0.005em', margin: 0,
        }}>
          {t.h1a}<br />
          <em style={{ fontStyle: 'italic', fontWeight: 300, color: 'rgba(95,160,176,0.95)' }}>{t.h1b}</em>
        </h1>
        <p style={{
          fontFamily: "'Sarabun',sans-serif", fontWeight: 300, fontSize: '1rem',
          color: 'rgba(251,250,245,0.55)', lineHeight: 2,
          maxWidth: 420, marginTop: '2.5rem',
        }}>{t.desc}</p>
        <div style={{ marginTop: '2.5rem' }}>
          <Btn kind="white">{t.b}</Btn>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: '2.5rem', left: '5rem',
        fontFamily: "'Jost',sans-serif", fontWeight: 300, fontSize: '0.55rem',
        letterSpacing: '0.4em', textTransform: 'uppercase',
        color: 'rgba(251,250,245,0.35)',
      }}>{t.scroll} ↓</div>
    </section>
  );
}
window.Hero = Hero;