<?php include_once 'db.php'; ?>
<?php include 'header1.php'; ?>
<body>
<?php include 'header2.php'; ?>
<div class="container-fluid position-relative p-0">
  <?php include 'header.php'; ?>
  <div class="page-banner">
    <div class="container">
      <h1>Contacte-nos</h1>
      <nav aria-label="breadcrumb"><ol class="breadcrumb justify-content-center mb-0">
        <li class="breadcrumb-item"><a href="index.php" class="text-white-50">Início</a></li>
        <li class="breadcrumb-item active">Contactos</li>
      </ol></nav>
    </div>
  </div>
</div>

<div class="container-fluid py-5 wow fadeInUp">
  <div class="container">
    <div class="text-center mb-5">
      <span class="section-label">Fale Connosco</span>
      <h2 class="section-heading">Entre em Contacto</h2>
      <div class="section-divider"></div>
    </div>
    <div class="row g-5">

      <!-- Info -->
      <div class="col-lg-5">
        <div class="contact-info-card">
          <h4 class="text-white fw-bold mb-4"><i class="bi bi-building me-2"></i>Direcção Nacional do Ambiente e Mudanças Climáticas</h4>
          <div class="contact-info-item">
            <i class="bi bi-geo-alt-fill"></i>
            <div><strong>Endereço</strong><p>Rua da Resistência, 174/47<br>C.P. 2029, Maputo</p></div>
          </div>
          <div class="contact-info-item">
            <i class="bi bi-telephone-fill"></i>
            <div><strong>Telefone</strong><p>+258 842 391 327</p></div>
          </div>
          <div class="contact-info-item">
            <i class="bi bi-envelope-fill"></i>
            <div><strong>Email</strong><p>info@ambiente.gov.mz</p></div>
          </div>
          <div class="contact-info-item">
            <i class="bi bi-clock-fill"></i>
            <div><strong>Horário de Atendimento</strong><p>Segunda a Sexta-feira<br>07h30 – 15h30</p></div>
          </div>
          <div class="mt-4 d-flex gap-2">
            <a href="#" class="footer-social" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="#" class="footer-social" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="footer-social" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
      </div>

      <!-- Formulário -->
      <div class="col-lg-7">
        <div class="contact-form-card">
          <h5 class="fw-bold mb-4 text-green"><i class="bi bi-send me-2"></i>Envie-nos uma Mensagem</h5>
          <div id="formMessage"></div>
          <form id="contactForm" novalidate>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label small fw-600 text-muted">Nome Completo *</label>
                <input type="text" class="form-control" name="nome" placeholder="O seu nome" required>
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-600 text-muted">E-mail *</label>
                <input type="email" class="form-control" name="email" placeholder="email@exemplo.com" required>
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-600 text-muted">Telefone</label>
                <input type="tel" class="form-control" name="telefone" placeholder="+258 8X XXX XXXX">
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-600 text-muted">Assunto *</label>
                <input type="text" class="form-control" name="assunto" placeholder="Assunto da mensagem" required>
              </div>
              <div class="col-12">
                <label class="form-label small fw-600 text-muted">Mensagem *</label>
                <textarea class="form-control" name="mensagem" rows="5" placeholder="Escreva a sua mensagem aqui..." required></textarea>
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-sgla w-100 py-3">
                  <i class="bi bi-send me-2"></i>Enviar Mensagem
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div>

    <!-- Mapa -->
    <div class="mt-5 rounded-xl overflow-hidden shadow" style="height:380px;">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3584.07!2d32.5936!3d-25.9667!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDU4JzAwLjAiUyAzMsKwMzUnMzcuMCJF!5e0!3m2!1spt!2smz!4v1"
        width="100%" height="100%" style="border:0;" allowfullscreen loading="lazy"
        referrerpolicy="no-referrer-when-downgrade" title="Localização DNAC"></iframe>
    </div>
  </div>
</div>

<?php include 'footer.php'; ?>

<script>
$(document).ready(function () {
    $('#contactForm').on('submit', function (e) {
        e.preventDefault();
        var btn = $(this).find('button[type=submit]');
        btn.prop('disabled', true).html('<i class="bi bi-hourglass-split me-2"></i>A enviar...');
        $.ajax({
            url: 'processa_contato.php', type: 'POST',
            data: $(this).serialize(), dataType: 'json',
            success: function (r) {
                if (r.status === 'success') {
                    $('#formMessage').html('<div class="alert alert-success rounded-xl"><i class="bi bi-check-circle me-2"></i>' + r.message + '</div>');
                    $('#contactForm')[0].reset();
                } else {
                    $('#formMessage').html('<div class="alert alert-warning rounded-xl"><i class="bi bi-exclamation-triangle me-2"></i>' + r.message + '</div>');
                }
            },
            error: function () {
                $('#formMessage').html('<div class="alert alert-danger rounded-xl"><i class="bi bi-x-circle me-2"></i>Ocorreu um erro. Tente novamente.</div>');
            },
            complete: function () {
                btn.prop('disabled', false).html('<i class="bi bi-send me-2"></i>Enviar Mensagem');
            }
        });
    });
});
</script>
</body></html>