<link rel="stylesheet" href="../dist/css/layout.css">

<footer class="footer">
  <div class="container">
    <p class="font-title fs-6">
      Precisa de ajuda? <a href="#" class="text-primary">Clique aqui</a> para falar com nossa equipe de suporte por chat.
      Ou envie um email para <a href="mailto:suporteaurorapa@gmail.com" class="text-primary">suporteaurorapa@gmail.com</a>
    </p>
  </div>

  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <a href="#"><img src="../assets/mapinha/img/logo-mapa-cultural.png" alt="Logo" class="img-fluid"></a>
      </div>
      <div class="social-icons">
        <a href="#"><img src="../assets/mapinha/img/icone-facebook.png" alt="Facebook" class="me-4"></a>
        <a href="#"><img src="../assets/mapinha/img/icone-x.png" alt="X" class="me-4"></a>
        <a href="#"><img src="../assets/mapinha/img/icone-youtube.png" alt="YouTube"></a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row justify-content-end">
      <div class="col-md-3 mb-3">
        <h5>Descubra</h5>
        <br>
        <ul class="list-unstyled">
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="centered-icon-text nav-link text-dark">
                <i class="material-icons icon-wb-incandescent">wb_incandescent</i>
                <span class="ms-3 font-title fs-6">Editais e Oportunidades</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="centered-icon-text nav-link text-dark">
                <i class="material-icons">event</i>
                <span class="ms-3 font-title fs-6">Eventos</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="centered-icon-text nav-link text-dark">
                <i class="material-icons">group</i>
                <span class="ms-3 font-title fs-6">Agentes</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="centered-icon-text nav-link text-dark">
                <i class="material-icons">location_city</i>
                <span class="ms-3 font-title fs-6">Espaços</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="centered-icon-text nav-link text-dark">
                <i class="material-icons">article</i>
                <span class="ms-3 font-title fs-6">Projetos</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <div class="col-md-3 mb-3">
        <h5>Painel de controle</h5>
        <br>
        <ul class="list-unstyled">
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Minhas oportunidades</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Meus eventos</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Meus agentes</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Meus espaços</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <div class="col-md-4 mb-3">
        <h5>Ajuda e privacidade</h5>
        <br>
        <ul class="list-unstyled">
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Ajuda e perguntas frequentes (FAQ)</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Termos de uso e Política de privacidade</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark">
                <span class="font-title fs-6">Autorização de uso de imagem</span>
              </a>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center mb-3">
              <a href="#" class="nav-link text-dark font-title fs-6">
                <span class="font-title fs-6">Entenda a LGPD</span>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="text-center pt-3">
    <div class="container d-flex justify-content-between align-items-center">
      <span>plataforma criada pela comunidade <strong>mapas culturais</strong> e desenvolvida por <strong>Sertão Dev</strong></span>
      <a href="" class=" centered-icon-text nav-link">
        <span class="ms-3 me-2">visite o repositório</span>
        <img src="../assets/mapinha/img/icone-github.png">
      </a>
    </div>
  </div>
</footer>