const rootElement = document.getElementById('root')

//Header
function Header() {

  let hamburger;
  let navLinks;
  let nav;

  let screenWidth = window.innerWidth;

  React.useEffect(() => {
    hamburger = document.querySelector('.hamburger');
    //navLinks = document.querySelector('.menu-list-container');
    navLinks = document.querySelector('.menu-horizontal');
    nav = document.querySelector('nav');

    screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();

    hamburger.addEventListener('click', function () {
      navLinks.style.display === 'none' ? setCollapseSmallSize() : setHamburger();
    });

    window.addEventListener('resize', function () {
      screenWidth = window.innerWidth;
      screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();
    });

  }, []);

  const setNavViewLargeSize = () => {
    navLinks.style.display = 'flex';
    hamburger.style.display = 'none';

    navLinks.style.flexDirection = "row";
    navLinks.style.justifyContent = "space-around";
    nav.style.height = "50px";

  }
  const setCollapseSmallSize = () => {
    navLinks.style.display = 'block';
    hamburger.style.display = 'block';

    navLinks.style.flexDirection = "column";
    nav.style.height = "440px";
  }

  const setHamburger = () => {
    navLinks.style.display = 'none';
    hamburger.style.display = 'block';
    nav.style.height = "45px";
    hamburger.style.backgroundColor = "#3c64ad";
  }

  return (
    <>
      <header>
        <div id="search_section">
          <div id="img_container">
            <img alt="Logo Nuestro desarrollo"
              src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/07/xsellonuestro-e1664252298759-174x77.png.pagespeed.ic.UcxFWCIlvw.webp">
            </img>

          </div>
          <div id="search_container">
            <div>
              <input type="text" placeholder="Search here...">
              </input>

              <i className="material-icons" >search</i>
            </div>

          </div>
        </div>

        <nav>
          <div className="hamburger">&#9776;</div>


          <ul class="menu-horizontal">
            <li>
              <a href="https://www.medellin.gov.co/ndesarrollo/">Nuestro Desarrollo
                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
              <ul class="menu-vertical">
                <li><a href="curso-html.html">Quines Somos</a></li>
                <li><a href="#">Soñemos Nuestro Desarrollo</a></li>
                <li><a href="#">Glosario</a></li>
                <li><a href="#">Preguntas Frecuentes</a></li>
              </ul>
            </li>
            <li>
              <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=10427">Sistema Distrital de Planeación
                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
              <ul class="menu-vertical">
                <li><a href="curso-html.html">Normogramas</a></li>
                <li><a href="#">Subsistemas</a></li>
              </ul>
            </li>
            <li>
              <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=17763">Planeación del Desarrollo
                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
              <ul class="menu-vertical">
                <li><a href="#">Planeación Regional</a></li>
                <li><a href="#">Planeación Distrital</a></li>
                <li><a href="#">Planeación del Desarrollo Local</a></li>
              </ul>
            </li>
            <li style={{ backgroundColor: "#3c64ad" }}>
              <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=624">BIPL
                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
              <ul class="menu-vertical">
                <li><a href="#">Asesoría para la Gestión</a></li>
                <li><a href="#">Gestión de Proyectos</a></li>
              </ul>
            </li>
            <li>
              <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1242">Comuniquémonos
                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
              <ul class="menu-vertical">
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Boletín de Noticias</a></li>
              </ul>
            </li>
            <li >
              <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1240">Seguimiento
                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
            </li>
          </ul>
        </nav>

      </header>
    </>
  )
}

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=""
        />
        <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>
  );
}

function Separator() {
  return (
    <div>
      <img
        src="data:image/webp;base64,UklGRuwDAABXRUJQVlA4TN8DAAAvf0c1EPegqG0jKfzRzrtzzy4Ig2wjzZ/wOa4ATzBJ0/8vDxxBtk39aXeCJ6X/txuH4PDhTnD4EBzuNBxUPzWqn6SgbRvJ4Q97uwdCRExApQohZK2Mv+2SoiiKsichhBCSJDiSJCmSkoAOkqwi/v/ezIJq7bSWY0oT0f8JkCBJktw2+kEDOwQGRHPx/38CXCxPnx0d0f8J+LH/7X/73/63/+3/l+LCKr5mUnwVLuILnLUXwdBeMzhorwKiKq8KEKvyuu5m5XXZFeG1YYdNd12PVt11OZpk14ajQXZddyuAm+qKXQKYRFfFvUF0ZQNWzTW2hOS6ogVVcZW2WXCtaBs2vTWewFVuLTgzqq3bcAqr1toKzoXWSnQA5VdIreiCqqEIAM/VOsmvsP+snqEPlBbsP/vv/1+b/GIv2n/2n9OxyK/sleqH2Xp9kcycdrmveinRGi+Cdtp/0mSSX6GIImJsKiR5e65K8uVCzszRuw+6xnMlTiugQG85lTj7NQAIk6pmZn4YiCGi++cp8gv2n2wg+heSlF6HPar8oi7b5BftP5mxyq/0xVb5lW5Uz9RIT/j5Ls+TAFJRhS82y69wuYr8wmtUnt56baSoSpxmLwL6hI2qq/XrKFKl8u72KwGpkniLoo8KKtunNxd5HFoIb7vLA/VZnlRJ21vBSUHB9/D874/WUOAb/JZ4KLXmOLzd6SuuAoeUZmys0mWM4/dV4uT4TlpTunyX9p8MIVr9rykzc1Jez6q/9rTAKBfLb4eF++VFFpKw/+1/+9/+t//t/1e8nXGoW8NxtoaDjVXDqetQEdRRMoI61OCioV3uUb5u7lGqXRYNwVB+4YRySFg0XD1E0hOshsKGIW3IjtwkWA3JhiFtyI7cEqyGZMN4BFZDsmFIG7IjNwlWQ7JhSBuyI7cEqyHZMNItwWpINgxpQ3bkJsFqSDYMaUN25JZgNSQbRiLpIZ0WDYyQmWEPWKblmAfLtBz/DizTcsyDZVqOXYJ7wDItxzxYpuXYx8wQEhYN5/46Ovc1A/Q6YqwZTi+kq68Z8EIKLhliUygnZ+3qHPYJztolDvsUZ+0Sh/0RZ+0Sh32Cs3aJwz7FWbvEYX/AWbvEYZ/grF3isE9x1i5x2FMOqZ/XDHxo9lOzJ0wfzH5q9oTp1eynZk+Y/YCwZODtlXRaMmzxSsKSAfdX0qWtGE56JTFWDJCivL5wyqskvy4Y7tDR7vTD7vNTBxcMHfdXkq8Y5DjareE4veFoz23F8Of/P//b//a//W//2//2/38u5feP/W//2//2v/1v/9v/9r/9b//b//a//W//2//2vx0MAA=="
        alt=""
      />
    </div>
  );
}

function MapCommunes() {

  let idLinks = [
    {
      x: "530",
      y: "180",
      name: "Corregimiento 50 - Corregimiento San Sebastián de Palmitas",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Corregimiento-50-San-Sebastian-de-Palmitas.pdf",
    },
    {
      x: "700",
      y: "330",
      name: "Corregimiento 60 - Corregimiento San Cristobal",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Corregimiento-60-San-Cristobal.pdf",
    },
    {
      x: "580",
      y: "620",
      name: "Corregimiento 80 - Corregimiento San Antonio de Prado",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Corregimiento-80-San-Antonio-de-Prado.pdf",
    },
    {
      x: "730",
      y: "580",
      name: "Corregimiento 70 - Corregimiento Altavista",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Corregimiento-70-Altavista.pdf",
    },
    {
      x: "1200",
      y: "516",
      name: "Corregimiento 90 - Corregimiento Santa Elena",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Corregimiento-90-Santa-Elena.pdf",
    },
    {
      x: "850",
      y: "610",
      name: "Comuna 16 - Belén",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-16-Belen.pdf",
    },
    {
      x: "910",
      y: "665",
      name: "Comuna 15 - Guayabal",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-15-Guayabal.pdf",
    },
    {
      x: "990",
      y: "685",
      name: "Comuna 14 - El Poblado",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-14-El-Poblado.pdf",
    },
    {
      x: "780",
      y: "470",
      name: "Comuna 13 - San Javier",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-13-San-Javier.pdf",
    },
    {
      x: "830",
      y: "500",
      name: "Comuna 12 - La América",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-12-La-America.pdf",
    },
    {
      x: "910",
      y: "490",
      name: "Comuna 11 - Laureles Estadio",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-11-Laureles-Estadio.pdf",
    },
    {
      x: "980",
      y: "500",
      name: "Comuna 10 - La candelaria",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-10-La-Candelaria.pdf",
    },
    {
      x: "1040",
      y: "560",
      name: "Comuna 9 - Buenos Aires",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-9-Buenos-Aires.pdf",
    },
    {
      x: "1060",
      y: "490",
      name: "Comuna 8 - Villa Hermosa.pdf",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-8-Villa-Hermosa.pdf",
    },
    {
      x: "880",
      y: "380",
      name: "Comuna 7 - Robledo",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-7-Robledo.pdf",
    },
    {
      x: "930",
      y: "295",
      name: "Comuna 6 - Doce De Octubre",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-6-Doce-de-Octubre.pdf",
    },
    {
      x: "970",
      y: "365",
      name: "Comuna 5 - Castilla",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-5-Castilla.pdf",
    },
    {
      x: "1010",
      y: "405",
      name: "Comuna 4 - Aranjuez",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-comuna-4-Aranjuez.pdf",
    },
    {
      x: "1070",
      y: "425",
      name: "Comuna 3 - Manrique",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-3-Manrique.pdf",
    },
    {
      x: "1030",
      y: "305",
      name: "Comuna 2 - Santa Cruz",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-2-Santa-Cruz.pdf",
    },
    {
      x: "1080",
      y: "350",
      name: "Comuna 1 - Popular",
      pdlLink:
        "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/06/Proyectos-tipo-Comuna-1-Popular.pdf",
    },
  ];

  const linkMap = host + "/wp-content/statics/Mapa_distrito.svg";

  return (
    <figure>
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1720 880"
        preserveAspectRatio="xMinYMin meet"
      >
        <image
          width="1720"
          height="880"
          xlinkHref={linkMap}
        />

        {idLinks.map((item) => {
          return (
            <a
              style={{ cursor: "pointer" }}
              href={item.pdlLink}
              target="blank"
            >
              <text
                x={item.x}
                y={item.y}
                style={{ fontSize: "50px", fill: "Black" }}
                class="material-icons"
              >
                location_on{" "}
              </text>
            </a>
          );
        })}
      </svg>
    </figure>
  );
}

function Banner() {
  return (
    <>
      <img src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/11/xProyctos-Tipo.jpg.pagespeed.ic.oaliJEzbNy.webp"></img>
    </>
  );
}

function ProjectsType() {
  let stylesTxt = { fontSize: "18px", margin: "21px" }
  return (
    <>
      <Header></Header>
      <Banner></Banner>
      <p style={stylesTxt}>
        Los Proyectos Tipo que se configuran como un esfuerzo de acercar a la ciudadanía a una
        herramienta de planeación usada e institucionalizada en la administración pública colombiana,
        que tiene como objetivos fundamentales mejorar los procesos técnicos de las instituciones
        encargadas de ejecutar recursos públicos, promover la equidad y la eficiencia en el gasto y la
        inversión pública.
      </p>
      <p style={stylesTxt} >Para ello, atendiendo a lo estipulado por el Consejo Nacional de Política Económica y Social en su
        Documento CONPES 3856 (2016), la estructuración técnica estandarizada de los proyectos de
        inversión busca:</p>
      <ul style={stylesTxt}>
        <li>La disminución del tiempo en la formulación de los proyectos.</li>
        <li>La reducción de los costos en la fase de pre-inversión.</li>
        <li>La provisión de bienes y servicios en igualdad de condiciones para todos los ciudadanos sin</li>
        <li>La ejecución más ágil y acorde con los tiempos previstos.</li>
        <li>La mayor transparencia en la contratación.</li>
        <li>La garantía de un trato igualitario a los interesados en la ejecución de los proyectos,
          independiente de la entidad estatal que los promueve.</li>
        <li>Los beneficios económicos y sociales que obtiene la población al disfrutar los proyectos
          con la oportunidad requerida.</li>
      </ul>
      <MapCommunes></MapCommunes>
      <Separator></Separator>
      <Footer></Footer>
    </>
  );
}

export default ProjectsType;

ReactDOM.render(
  <ProjectsType />,
  rootElement
)