<?php
$pagename   = "contacts";
$pagefooter = "pages";
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Contatos</title>
  <meta name="description" content="Entre em contacto com a WGF para soluções em procurement, logística, serviços industriais e suporte operacional nos setores de petróleo e gás, construção e manutenção.">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link rel="icon" href="https://res.cloudinary.com/duapi2dif/image/upload/v1772031254/favicon_usnku8.png">
  <link rel="apple-touch-icon" href="https://res.cloudinary.com/duapi2dif/image/upload/v1772031254/favicon_usnku8.png">

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../assets/vendor/bootstrap-icons/bootstrap-icons.css">
  <link rel="stylesheet" href="../assets/vendor/aos/aos.css">
  <link rel="stylesheet" href="../assets/vendor/glightbox/css/glightbox.min.css">
  <link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">

  <!-- Main CSS File -->
  <link rel="stylesheet" href="../assets/css/main.css">
</head>

<body class="contact-page">

  <!-- ======= Header ======= -->
  <header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl position-relative d-flex align-items-center">

      <a href="../index.php" class="logo d-flex align-items-center me-auto">
        <img src="https://res.cloudinary.com/duapi2dif/image/upload/v1772031269/wgflogo_cxtprn.png" alt="">
      </a>

      <?php require_once "../views/navbar.php"; ?>

     </div>
  </header>
  <!-- End Header -->

  <main class="main">

    <!-- ======= Page Title ======= -->
    <div class="page-title dark-background" data-aos="fade"
      style="background-image: url(https://res.cloudinary.com/duapi2dif/image/upload/v1772464269/3_ruh2zi.jpg);">
      <div class="container position-relative">
        <h1>Contactos</h1>
        <p>Construído sobre a excelência, impulsionado pela visão — estamos preparados para apoiar os seus desafios operacionais, logísticos e técnicos.</p>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="../index.php">Inicio</a></li>
            <li class="current">Contatos</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- End Page Title -->

    <!-- ======= Contact Section ======= -->
    <section id="contact" class="contact section">
      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="contact-main-wrapper">

          <div class="map-wrapper">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.735747421251!2d13.383429!3d-8.7999274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1a51fb170ad7bc33%3A0x22236b3c49bece59!2sWGF%2C%20Com%C3%A9rcio%20e%20Presta%C3%A7%C3%A3o%20de%20Servi%C3%A7os%20Lda!5e0!3m2!1spt-PT!2sao!4v1734756000000!5m2!1spt-PT!2sao"
              width="100%" height="100%" style="border:0;"
              allowfullscreen="" loading="lazy"
              referrerpolicy="no-referrer-when-downgrade">
            </iframe>
          </div>

          <div class="contact-content">

            <div class="contact-cards-container" data-aos="fade-up" data-aos-delay="300">

              <div class="contact-card">
                <div class="icon-box"><i class="bi bi-geo-alt"></i></div>
                <div class="contact-text">
                  <h4>Localização</h4>
                  <p>Luanda, Rua da Mulata, Bairro da Nova Urbanização - Cacuaco, reis do chão, 0077</p>
                </div>
              </div>

              <div class="contact-card">
                <div class="icon-box"><i class="bi bi-envelope"></i></div>
                <div class="contact-text">
                  <h4>E-mail</h4>
                  <p>geral@wgf.ao</p>
                </div>
              </div>

              <div class="contact-card">
                <div class="icon-box"><i class="bi bi-telephone"></i></div>
                <div class="contact-text">
                  <h4>Contacto</h4>
                  <p>(+244)944 684 460</p>
                </div>
              </div>

              <div class="contact-card">
                <div class="icon-box"><i class="bi bi-clock"></i></div>
                <div class="contact-text">
                  <h4>Horário de funcionamento</h4>
                  <p>Segunda-feira a Sexta-Feira: 08h - 18h</p>
                </div>
              </div>

            </div>

            <div class="contact-form-container" data-aos="fade-up" data-aos-delay="400">
              <h3>Fale com a nossa equipa</h3>
              <p>Partilhe as necessidades do seu projeto e a nossa equipa especializada em procurement, logística e serviços industriais entrará em contacto para propor a melhor solução.</p>

              <form action="../forms/contact.php" method="post" class="php-email-form">

                <div class="row">
                  <div class="col-md-6 form-group">
                    <input type="text" name="name" class="form-control" placeholder="Nome completo" required>
                  </div>
                  <div class="col-md-6 form-group mt-3 mt-md-0">
                    <input type="email" name="email" class="form-control" placeholder="E-mail profissional" required>
                  </div>
                </div>

                <div class="form-group mt-3">
                  <input type="text" name="subject" class="form-control" placeholder="Assunto (ex.: Procurement, Logística, Serviços Industriais)" required>
                </div>

                <div class="form-group mt-3">
                  <textarea name="message" rows="5" class="form-control" placeholder="Descreva de forma resumida o seu projeto, necessidade operacional ou pedido de proposta." required></textarea>
                </div>

                <div class="loading">A carregar...</div>
                <div class="error-message"></div>
                <div class="sent-message">Obrigado! A sua solicitação de cotação foi recebida. A nossa equipa irá analisar o pedido e entrar em contacto consigo em breve.</div>


                <div class="form-submit">
                  <button type="submit" class="submit-btn">Enviar</button>
                  <div class="social-links">
                    <a href="#"><i class="bi bi-twitter"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>

              </form>
            </div>

          </div>
        </div>
      </div>
    </section>
    <!-- End Contact Section -->

  </main>

  <!-- ======= Footer ======= -->
  <?php require_once "../views/footer.php"; ?>

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center">
    <i class="bi bi-arrow-up-short"></i>
  </a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/vendor/php-email-form/validate.js"></script>
  <script src="../assets/vendor/aos/aos.js"></script>
  <script src="../assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="../assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Main JS File -->
  <script src="../assets/js/main.js"></script>

</body>
</html>
