// Footer
function Footer({ lang }) {
  const t = window.I18N[lang];
  return (
    <footer id="footer" className="footer">
      <div className="container">
        <window.Reveal>
          <h2 className="footer-mark">deep.</h2>
        </window.Reveal>

        <div className="footer-grid">
          <div>
            <h4>deepprod</h4>
            <p style={{
              fontSize: 14, fontWeight: 300, lineHeight: 1.55,
              color: "rgba(247,247,247,0.85)", margin: 0, maxWidth: 320,
            }}>
              {t.footer.tag}
            </p>
          </div>
          <div>
            <h4>{t.footer.contact}</h4>
            <ul>
              <li><a href={`mailto:${t.footer.mail}`}>{t.footer.mail}</a></li>
              <li><a href={`tel:${t.footer.phone.replace(/\s/g, "")}`}>{t.footer.phone}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.social}</h4>
            <ul>
              <li><a href="https://www.instagram.com/deepprod.fr/" target="_blank" rel="noreferrer">instagram</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.legal}</h4>
            <ul>
              <li><a href="#">mentions légales</a></li>
              <li><a href="#">cookies</a></li>
              <li><a href="#">crédits</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span className="footer-meta">{t.footer.bottom}</span>
          <span style={{
            fontStyle: "italic", fontWeight: 800, letterSpacing: "-0.02em",
            textTransform: "lowercase", fontSize: 28,
            color: "rgba(247,247,247,0.4)",
          }}>{t.footer.end}</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;