class Header extends HTMLElement {
    constructor() {
      super();
    }
  
    connectedCallback() {
      this.innerHTML = `
      <header>
            <div class="hcontact">
                <div class="menu-icon" onclick="toggleMenu()">&#9776;</div>
                <p class="email">comercial@prooriente.com.co</p>
                <p class="phone">+57 (601) 657-5857</p>
                <div class="socialh">
                    <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>
                <img src="../img/LogoProOriente.svg" alt="">
            </div>
            <nav class="navbar">
                <img src="../img/LogoProOriente.svg" alt="">
                
                <ul id="menu">
                    <li><a href="/index.html">Inicio</a></li>
                    <li><a href="/productos.html">Productos</a></li>
                    <li><a href="/nosotros.html">Nosotros</a></li>
                    <li><a href="/procesos.html">Procesos</a></li>
                    <li><a href="/contacto.html">Contáctanos</a></li>
                </ul>
            </nav>
        </header>
      `;
    }
  }
  
  customElements.define('header-component', Header);
  