/* Footer */

function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-mark">OR</div>
            <div className="footer-tag">{t.footer.tagline}</div>
          </div>
          <div className="footer-col">
            <h4>{t.nav.services}</h4>
            <ul>
              {t.services.slice(0, 5).map(s => (
                <li key={s.num}><a href="#services">{s.title.split(" · ")[0]}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t.nav.contact}</h4>
            <ul>
              <li><a href={`mailto:${t.contact.email}`}>{t.contact.email}</a></li>
              <li><a href={`tel:${t.contact.phone.replace(/\s/g, "")}`}>{t.contact.phone}</a></li>
              {t.contact.whatsappUrl ? (
                <li><a href={t.contact.whatsappUrl} target="_blank" rel="noopener">WhatsApp · {t.contact.whatsapp}</a></li>
              ) : null}
              <li>{t.contact.address[1]}, {t.contact.address[2]}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t.footer.copy}</div>
          <div className="legal">
            {t.footer.legal.map((l, i) => <a href="#" key={i}>{l}</a>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;