class Footer extends HTMLElement {
    constructor() {
      super();
    }
  
    connectedCallback() {
      this.innerHTML = `
      <footer>
        <div class="footer_content">
            <div class="social">
                <img src="../img/Logodef.svg" alt="">
                <ul>
                    <li><a href="/career.html">Trabaja con nosotros</a></li>
                    <li><a href="../docs/MA-GLR-002 MANUAL DE MANEJO Y TRATAMIENTO DE DATOS PERSONALES.pdf">Política de privacidad</a></li>
                    <li><a href="../docs/">Terminos de uso</a></li>
                </ul>
                <p><a href="https://instagram.com/prooriente?igshid=YTQwZjQ0NmI0OA==" class="fa-brands fa-instagram"></a>
                    <a href="https://www.linkedin.com/company/pro-oriente/" class="fa-brands fa-linkedin"></a>
                    <a href="https://wa.link/4zwgiw" class="fa-brands fa-whatsapp"></a>
                </p>
            </div>
            <div class="links">
                <img src="../img/FSC_Doble.svg" alt="" class="logo_fsc">
            </div>
            <div class="video">
                <video src="../img/ProOriente.webm" width="300" height="150">
                    <p>Su navegador no soporta videos HTML5.</p>
                </video>
                <p>Conoce nuestros procesos productivos.</p>
            </div>
            <div class="location">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55018.082385174814!2d-75.19012605250947!3d5.289054941596205!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e4737efe164adef%3A0x2d12627968d65e44!2sAserrio%20La%20Miel%20Pro%20Oriente%20s.a.s!5e0!3m2!1ses!2sco!4v1687290614905!5m2!1ses!2sco" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                <p>Km 5 Vía Manzanares - Pensilvania, Caldas</p>
            </div>
        </div>
        <div class="copyright">
            <p>© 2023 Todos los derechos reservados Pro Oriente SAS</p>
        </div>
    </footer>
      `;
    }
  }
  
  customElements.define('footer-component', Footer);