const rootElement = document.getElementById('footer')

function Footer() {
    return (
      <footer>
        <div className="nav-container">
          <img
            src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/08/xLogo-ND-blanco-.png.pagespeed.ic.dfnqpdXrMG.webp"
            alt="Icono pagina"
          />
          <div className="social-links">
            <a
              target="blanket"
              href="https://www.facebook.com/AlcaldiadeMed"
              style={{ backgroundColor: "#3b5999" }}
            >
              <i class="bi bi-facebook"></i>{" "}
            </a>
            <a
              target="blanket"
              href="https://twitter.com/AlcaldiadeMed"
              style={{ backgroundColor: "#1da1f2" }}
            >
              <i class="bi bi-twitter"></i>{" "}
            </a>
            <a
              target="blanket"
              href="https://www.youtube.com/channel/UCAFLU70jPz4bODq_5BSWPIg"
              style={{ backgroundColor: "#cd201f" }}
            >
              <i class="bi bi-youtube"></i>{" "}
            </a>
            <a
              target="blanket"
              href="https://www.linkedin.com/company/alcaldiademedellin/mycompany/"
              style={{ backgroundColor: "#0077b5" }}
            >
              <i class="bi bi-linkedin"></i>{" "}
            </a>
            <a
              target="blanket"
              href="https://www.instagram.com/alcaldiademed/"
              style={{ backgroundColor: "#f70166" }}
            >
              <i class="bi bi-instagram"></i>{" "}
            </a>
          </div>
        </div>
        <div className="nav-container">
          <h2>
            Enlaces de Interés <br></br>
          </h2>
          <a href="https://www.medellin.gov.co/">Alcaldía de Medellín</a>
          <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=20226">
            Entrenamiento
          </a>
          <a href="https://www.medellin.gov.co/ndesarrollo/">
            Departamento Administrativo de Planeación
          </a>
          <a href="https://www.medellin.gov.co/irj/portal/medellin?NavigationTarget=navurl://73a000e1c5ca3867d46f06ab13aee55e">
            Presupuesto Participativo
          </a>
          <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=21856">
            Programa de Ejecución 2024-2027
          </a>
          <a href="https://mercurio.medellin.gov.co/mercurio/inicialPqr.jsp">
            Radicación de PQRSD
          </a>
        </div>
        <div className="nav-container">
          <h2>Contáctanos</h2>
          <a href="">
            <i class="material-icons">location_on</i> Calle 44 N 52 – 165 Centro
            Administrativo la Alpujarra – Medellín, Colombia.
          </a>
          <a href="">
            <i
              class="material-icons"
              style={{
                backgroundColor: "white",
                color: "#3c64ad",
                borderRadius: "10%",
              }}
            >
              call
            </i>
            Línea única de atención ciudadana: (574) 44 44 144.
          </a>
          <a href="">
            <i
              class="material-icons"
              style={{
                backgroundColor: "white",
                color: "#3c64ad",
                borderRadius: "10%",
              }}
            >
              call
            </i>
            Línea gratuita nacional: 01 8000 411 144.
          </a>
        </div>
      </footer>
    );
  }

  ReactDOM.render(
    <Footer />,
    rootElement
)