function Footer({ lang = 'th' }) {
  const t = window.tr('footer', lang);
  const urls = ['https://www.facebook.com/bestinves', 'https://www.facebook.com/bestdailycleaning', 'https://line.me/R/ti/p/@bestdaily'];
  return (
    <footer style={{ background: '#0a1226', padding: '6rem 0 3rem' }}>
      <Wrap>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: '4rem', marginBottom: '4rem' }}>
          <div>
            <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 600, fontSize: '1.4rem', letterSpacing: '0.18em', color: '#fbfaf5', display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
              BEST<span style={{ color: 'rgba(95,160,176,0.9)', fontSize: '1.7rem', fontWeight: 500 }}>∞</span>
            </div>
            <p style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '0.95rem', fontWeight: 400, color: 'rgba(251,250,245,0.5)', lineHeight: 1.95, marginTop: '1.5rem', maxWidth: 280, whiteSpace: 'pre-line' }}>{t.tagline}</p>
          </div>
          {t.cols.map(([h, items], i) => (
            <div key={i}>
              <h5 style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.72rem', letterSpacing: '0.36em', textTransform: 'uppercase', color: 'rgba(95,160,176,0.75)', marginBottom: '1.5rem' }}>{h}</h5>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.9rem', margin: 0, padding: 0 }}>
                {items.map((tx, j) => <li key={j}><a style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '0.95rem', fontWeight: 400, color: 'rgba(251,250,245,0.6)', cursor: 'pointer' }}>{tx}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1.5rem', padding: '2.5rem 0', borderTop: '1px solid rgba(251,250,245,0.08)', borderBottom: '1px solid rgba(251,250,245,0.08)', marginBottom: '2.5rem' }}>
          {t.social.map(([label, sub], i) => (
            <a key={i} href={urls[i]} target="_blank" rel="noopener" style={{ display: 'block', padding: '1.2rem 1.5rem', border: '1px solid rgba(251,250,245,0.1)', transition: 'all 0.3s', cursor: 'pointer' }}>
              <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.72rem', letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(95,160,176,0.85)', marginBottom: '0.5rem' }}>{label}</div>
              <div style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '1rem', fontWeight: 500, color: '#fbfaf5' }}>{sub}</div>
            </a>
          ))}
        </div>
        <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 400, fontSize: '0.7rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(251,250,245,0.35)' }}>{t.copyright}</div>
      </Wrap>
    </footer>
  );
}
window.Footer = Footer;