/* mtz. website — footer with a bleeding wordmark.
   Columns reuse nav + socials + email from content.json (window.mtzContent). */
function Footer() {
  const c = mtzContent.footer;
  return (
    <footer className="mtz-footer" id="rodape">
      <div className="mtz-footer__cols">
        <p className="mtz-footer__say">{c.say}</p>
        <div className="mtz-footer__col">
          <span className="mtz-footer__h">{c.navHeading}</span>
          {mtzContent.nav.map((l) => <a key={l.href} href={l.href} onClick={(e) => mtzScrollTo(e, l.href)}>{l.label}</a>)}
        </div>
        <div className="mtz-footer__col">
          <span className="mtz-footer__h">{c.socialHeading}</span>
          {mtzContent.socials.map((s) => (
            <a key={s.label} href={s.url} target="_blank" rel="noopener noreferrer">{s.label}</a>
          ))}
        </div>
        <div className="mtz-footer__col">
          <span className="mtz-footer__h">{c.studioHeading}</span>
          <a href={'mailto:' + mtzContent.contact.email}>{mtzContent.contact.email}</a>
          <span className="mtz-footer__h" style={{ marginTop: '0.6rem' }}>{c.studioLocation}</span>
        </div>
      </div>
      <div className="mtz-footer__bottom">
        <span>{c.copyright}</span>
        <img className="mtz-footer__mark" src="assets/mark-white.png" alt="mtz." />
        <span>{c.madeWith}</span>
      </div>
      {c.credit ? <div className="mtz-footer__credit">{rt(c.credit)}</div> : null}
    </footer>
  );
}
window.Footer = Footer;