function Footer() {
  const letters = "BRUCE DIGITAL".split("");
  return (
    <footer className="footer">
      <div className="container">
        <h2 className="footer-big" aria-hidden="true">
          {letters.map((l, i) => (
            <span key={i} style={{transitionDelay: `${i * 0.02}s`}}>{l === ' ' ? '\u00A0' : l}</span>
          ))}
        </h2>
        <div className="footer-bottom">
          <div className="footer-col">
            <div className="head">Studio</div>
            <div>Auckland</div>
            <div>New Zealand</div>
            <div>Tāmaki Makaurau</div>
          </div>
          <div className="footer-col">
            <div className="head">Contact</div>
            <a href="mailto:ben@brucedigital.org">ben@brucedigital.org</a>
            <a href="tel:+6421000000">+64 21 000 000</a>
          </div>
          <div className="footer-col">
            <div className="head">Work</div>
            <a href="https://ace2.brucedigital.org" target="_blank" rel="noreferrer">Ace Plumbing (Light)</a>
            <a href="https://ace.brucedigital.org" target="_blank" rel="noreferrer">Ace Plumbing (Dark)</a>
            <a href="https://fsal.co.nz" target="_blank" rel="noreferrer">FSAL</a>
          </div>
          <div className="footer-col">
            <div className="head">© {new Date().getFullYear()}</div>
            <div>Bruce Digital Ltd</div>
            <div>All rights reserved</div>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;