function Footer() {
  const { t } = useLang();
  const brandSub = t('foot.brand_sub').split('\n');
  return (
    <React.Fragment>
      <section className="cta" id="contact">
        <div className="inner">
          <div className="kicker reveal" style={{ justifyContent: 'center', marginBottom: 24 }}>
            <span className="dot"></span><span>{t('cta.kicker')}</span><span className="bar"></span><span>合作洽谈</span>
          </div>
          <h2 className="reveal d1" dangerouslySetInnerHTML={tHtml('cta.title.html')}/>
          <p className="reveal d2">{t('cta.desc')}</p>
          <div className="actions reveal d3">
            <a href="mailto:666websitepro@gmail.com" className="btn btn-primary">
              {t('cta.email')}
              <Icon.arrow className="ico" />
            </a>
            <a href="https://api.whatsapp.com/send?phone=60164688686&text=Hi%20666%20Website%20Services%2C%20I%27d%20like%20to%20discuss%20a%20project." className="btn btn-ghost">
              {t('cta.whatsapp')}
              <Icon.arrowUR className="ico" />
            </a>
          </div>
        </div>
      </section>

      <footer>
        <div className="wrap">
          <div className="foot-grid">
            <div className="foot-brand">
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
                <img src="uploads/666-mark.png" alt="666" style={{ height: 54, width: 'auto', objectFit: 'contain', display: 'block' }} />
                <div style={{ fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)', whiteSpace: 'nowrap', paddingLeft: 14, borderLeft: '1px solid rgba(255,255,255,0.12)', lineHeight: 1.2 }}>
                  {brandSub[0]}<br />{brandSub[1]}
                </div>
              </div>
              <p>{t('foot.tagline')}</p>
            </div>
            <div className="foot-col">
              <h4>{t('foot.col.services')}</h4>
              <ul>
                <li><a href="#services">{t('foot.svc.1')}</a></li>
                <li><a href="#services">{t('foot.svc.2')}</a></li>
                <li><a href="#services">{t('foot.svc.3')}</a></li>
                <li><a href="#services">{t('foot.svc.4')}</a></li>
              </ul>
            </div>
            <div className="foot-col">
              <h4>{t('foot.col.studio')}</h4>
              <ul>
                <li><a href="#process">{t('foot.studio.1')}</a></li>
                <li><a href="#work">{t('foot.studio.2')}</a></li>
                <li><a href="#pricing">{t('foot.studio.3')}</a></li>
                <li><a href="#contact">{t('foot.studio.4')}</a></li>
              </ul>
            </div>
            <div className="foot-col">
              <h4>{t('foot.col.contact')}</h4>
              <ul>
                <li><a href="mailto:666websitepro@gmail.com">{t('foot.contact.1')}</a></li>
                <li><a href="https://api.whatsapp.com/send?phone=60164688686">{t('foot.contact.2')}</a></li>
                <li><a href="#">{t('foot.contact.3')}</a></li>
                <li><a href="#">{t('foot.contact.4')}</a></li>
              </ul>
            </div>
          </div>
          <div className="foot-bottom">
            <div>{t('foot.copy')}</div>
            <div>{t('foot.built')}</div>
          </div>
        </div>
      </footer>
    </React.Fragment>);

}
window.Footer = Footer;