<?php
require_once __DIR__ . '/config.php';
$pageTitle = 'Contact Us — Globinex Research';
$activeNav = 'contact';
include 'header.php';
?>

  <!-- PAGE HERO -->
  <header class="page-hero">
    <canvas class="net-canvas" data-net data-net-density="20000"></canvas>
    <div class="container">
      <h1 class="reveal">CONNECT WITH US</h1>
      <div class="breadcrumb-gx reveal d1"><a href="index.php">Home</a> <i class="bi bi-chevron-right"></i> <span class="current">Contact Us</span></div>
    </div>
  </header>

  <!-- FORM -->
  <section class="dark-sec">
    <div class="conic-bg-top"></div>
    <div class="container">
      <div class="row g-5">
        <div class="col-lg-5 reveal">
          <h2 class="headings mb-3">Let's Connect with our expert</h2>
          <p class="paraTXT" style="font-size: 20px!important;">Have an upcoming research requirement or just want to learn more about our solutions? Reach out today for a custom quote or consultation. The Globinex Research team is ready to assist you.</p>
        </div>
        <div class="col-lg-7 reveal d1">
          <div class="form-box">
            <form id="gxContactForm" novalidate>
              <div class="row">
                <div class="col-md-6"><input class="gx-input" type="text" name="first_name" placeholder="First Name" required /></div>
                <div class="col-md-6"><input class="gx-input" type="text" name="last_name" placeholder="Last Name" required /></div>
              </div>
              <input class="gx-input" type="email" name="email" placeholder="Email" required />
              <input class="gx-input" type="tel" name="phone" placeholder="Phone No. (optional)" />
              <select class="gx-input" name="country">
                <option value="" disabled selected>Country</option>
                <option>United Arab Emirates</option>
                <option>United States</option>
                <option>United Kingdom</option>
                <option>India</option>
                <option>Saudi Arabia</option>
                <option>Other</option>
              </select>
              <select class="gx-input" name="interest">
                <option value="" disabled selected>Interested In</option>
                <option>CATI</option>
                <option>CAPI</option>
                <option>Online Research</option>
                <option>IDI / TDI</option>
                <option>Other</option>
              </select>
              <textarea class="gx-input" rows="4" name="message" placeholder="Description"></textarea>
              <div class="g-recaptcha mt-2" data-sitekey="<?php echo GX_RECAPTCHA_SITE_KEY; ?>"></div>
              <div id="gxContactFeedback" class="mt-2" role="status" aria-live="polite"></div>
              <button type="submit" class="btn-gx mt-2" id="gxContactSubmitBtn">Submit</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CONTACT INFO -->
<section class="contactWrap d-none">
    <canvas class="net-canvas" data-net data-net-density="22000" data-net-color="0,171,79"></canvas>

    <div class="container">
        <div class="row align-items-start">
            <div class="col-lg-12 mb-4">
                <h2 class="sec-h2 reveal">Send us a Message</h2>
            </div>
            <div class="col-lg-4 mb-4">
            </div>
            <div class="col-lg-8 ">
                <div class="row g-5 reveal">
                    <div class="col-md-6">
                        <div class="contact-card">
                            <h4>Client enquiries</h4>
                            <a href="mailto:info@globinexresearch.in" class="green-link">info@globinexresearch.in</a>
                            <p class="phone-text">+971 6 741 1800</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="contact-card">
                            <h4>Project support</h4>
                            <a href="mailto:projects@globinexresearch.in" class="green-link">projects@globinexresearch.in</a>
                            <p class="phone-text">+971 6 741 1800</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

  <!-- UPCOMING VACANCIES -->
  <section class="dark-sec" style="padding-top:20px;display: none;">
    <div class="container">
      <div class="reveal mb-5">
        <p class="sec-eyebrow">Careers</p>
        <h2 class="sec-h2">Upcoming Vacancies</h2>
      </div>
      <div class="vacancy-list">
        <div class="vacancy-item reveal">
          <div>
            <h4 class="vacancy-title">Research Analyst</h4>
            <span class="vacancy-meta"><i class="bi bi-geo-alt"></i> Ajman, UAE &nbsp;•&nbsp; Full-time</span>
          </div>
          <a href="careers.php" class="cs-cta">Apply Now <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="vacancy-item reveal d1">
          <div>
            <h4 class="vacancy-title">Field Operations Manager</h4>
            <span class="vacancy-meta"><i class="bi bi-geo-alt"></i> Ajman, UAE &nbsp;•&nbsp; Full-time</span>
          </div>
          <a href="careers.php" class="cs-cta">Apply Now <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="vacancy-item reveal d2">
          <div>
            <h4 class="vacancy-title">Business Development Executive</h4>
            <span class="vacancy-meta"><i class="bi bi-geo-alt"></i> Ajman, UAE &nbsp;•&nbsp; Full-time</span>
          </div>
          <a href="careers.php" class="cs-cta">Apply Now <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="vacancy-item reveal d3">
          <div>
            <h4 class="vacancy-title">Data Analyst</h4>
            <span class="vacancy-meta"><i class="bi bi-geo-alt"></i> Ajman, UAE &nbsp;•&nbsp; Full-time</span>
          </div>
          <a href="careers.php" class="cs-cta">Apply Now <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
      <!-- <p class="text-center reveal" style="color:rgba(255,255,255,.4); font-size:13px; margin-top:24px;">Sample listings — replace with current openings.</p> -->
    </div>
  </section>

  <!-- OFFICE ADDRESS + MAP -->
<section class="dark-sec" style="padding-top:20px;">
  <div class="container">
    <div class="row g-5 align-items-stretch">

      <!-- Left Column: Office Info -->
      <div class="col-lg-5 reveal">
        <p class="sec-eyebrow">Visit Us</p>
        <h2 class="sec-h2 mb-4">Our Office</h2>

        <div class="d-flex flex-column gap-3">
          <!-- Location Link -->
          <div class="d-flex align-items-start">
            <i class="bi bi-geo-alt-fill text-white me-2 fs-5 lh-1 mt-1"></i>
            <a href="https://maps.google.com/?q=C1+Building+Ajman+United+Arab+Emirates" target="_blank" rel="noopener noreferrer" class="text-decoration-none text-reset" style="font-size: 16px;">
              C1, 1F - SF14129, C1 Building, Ajman, United Arab Emirates.
            </a>
          </div>

          <!-- Phone Link -->
          <div class="d-flex align-items-center">
            <i class="bi bi-telephone-fill text-white me-2 fs-5 lh-1"></i>
            <a href="tel:+971551950499" class="text-decoration-none text-reset" style="font-size: 16px;">+971 551950499</a>
          </div>

          <!-- Email Link -->
          <div class="d-flex align-items-center">
            <i class="bi bi-envelope-fill text-white me-2 fs-5 lh-1"></i>
            <a href="mailto:business@globinexresearch.com" class="text-decoration-none text-reset" style="font-size: 16px;">business@globinexresearch.com</a>
          </div>
        </div>
      </div>

      <!-- Right Column: Corrected Google Map -->
      <div class="col-lg-7 reveal d1">
        <div class="map-wrap h-100">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14417.848529285093!2d55.4741366!3d25.3893322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f577fbf49545d%3A0xb36f23f66f103b44!2sC1%20Building%2C%20Ajman%20-%20United%20Arab%20Emirates!5e0!3m2!1sen!2sae!4v1710000000000!5m2!1sen!2sae"
            width="100%"
            height="100%"
            style="border:0; min-height: 250px;"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="strict-origin-when-cross-origin">
          </iframe>
        </div>
      </div>

    </div>
  </div>
</section>

<script>
(function () {
  'use strict';
  var form = document.getElementById('gxContactForm');
  if (!form) return;
  var feedback = document.getElementById('gxContactFeedback');
  var btn = document.getElementById('gxContactSubmitBtn');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    feedback.textContent = '';

    var email = form.elements['email'].value.trim();
    if (!form.elements['first_name'].value.trim() || !form.elements['last_name'].value.trim()) {
      feedback.textContent = 'Please enter your first and last name.';
      return;
    }
    if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
      feedback.textContent = 'Please enter a valid email address.';
      return;
    }
    if (typeof grecaptcha !== 'undefined' && grecaptcha.getResponse() === '') {
      feedback.textContent = 'Please complete the reCAPTCHA.';
      return;
    }

    btn.disabled = true;
    btn.textContent = 'Sending...';

    fetch('contact-handler.php', { method: 'POST', body: new FormData(form) })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        feedback.textContent = data.message;
        feedback.style.color = data.success ? '#00cc5e' : '#ff6b6b';
        if (data.success) {
          form.reset();
          if (typeof grecaptcha !== 'undefined') grecaptcha.reset();
        }
      })
      .catch(function () {
        feedback.textContent = 'Something went wrong. Please try again later.';
        feedback.style.color = '#ff6b6b';
      })
      .finally(function () {
        btn.disabled = false;
        btn.textContent = 'Submit';
      });
  });
})();
</script>
<?php
include 'footer.php';
?>
