<?php
require_once __DIR__ . '/config.php';
$pageTitle = 'Join the GXR Team — Globinex Research';
$activeNav = '';
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">JOIN THE GXR TEAM</h1>
    </div>
  </header>

  <!-- INTRO -->
  <section class="dark-sec" style="text-align:center; padding-top:60px;">
    <div class="conic-bg-top"></div>
    <div class="container">
      <div class="reveal" style="max-width:760px; margin:0 auto;">
        <h2 class="sec-h2" style="font-size:38px; margin-bottom:20px;">The GXR Research team is made up of passionately curious people.</h2>
        <p class="sec-lead" style="color:#cfd3da; margin-bottom:22px;">GXR is committed to fostering a culture of perpetual learning, diversity, inclusion, and inspiration. Our main objective is to empower our people to succeed.</p>
        <p style="font-weight:700; font-size:22px; color:#fff; margin:0 0 14px;">Are you enthusiastic, empathetic, and entrepreneurial?</p>
        <p class="sec-lead" style="color:#99A1AF;">We want to hear from you. Explore our current vacancies to find a position that's right for you.</p>
      </div>

      <div class="row g-4 mt-3 text-start">
        <div class="col-md-6 reveal">
          <div class="career-card">
            <h3 style="color:var(--gx-green);">Careers</h3>
            <p>Advance your career and shape the future at GXR. Explore a wide range of exciting opportunities for you to grow and flourish.</p>
            <a href="#vacancies" class="learn" onclick="var v=document.getElementById('vacancies'); v.style.display='block'; v.scrollIntoView({behavior:'smooth'});">Learn more <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
        <div class="col-md-6 reveal d1">
          <div class="career-card">
            <h3 style="color:var(--gx-green);">Internships</h3>
            <p>Advance your career and shape the future at GXR. Explore a wide range of exciting opportunities for you to grow and flourish.</p>
            <a href="mailto:careers@gxr.com" class="learn">Learn more <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- COMMUNITY -->
  <!-- <section class="dark-sec" id="community" style="padding-top:30px;">
    <div class="container">
      <div class="row g-5 align-items-center">
        <div class="col-lg-5 reveal">
          <h2 class="sec-h2" style="font-size:34px; margin-bottom:20px;">Become a part of GXR community</h2>
          <p class="sec-lead" style="color:#99A1AF;">Sign up to join the GXR Community Panel to share your opinions and make a difference.</p>
        </div>
        <div class="col-lg-7 reveal d1">
          <img src="images/blogimg4.png" alt="Person holding a smartphone" class="community-img" style="height:340px;" />
        </div>
      </div>
    </div>
  </section> -->

  <!-- APPLICATION FORM -->
  <!-- <section class="dark-sec" style="background:#0C0B0B; padding-top:40px;">
    <div class="container">
      <div class="reveal mb-4">
        <h2 class="sec-h2" style="font-size:34px;">Interested in participating in the GXR Community Panel?</h2>
        <p class="sec-lead" style="color:#99A1AF; margin-top:10px;">Please fill out this application. We'll be in touch soon.</p>
      </div>
      <form onsubmit="return false;" class="reveal d1">
        <div class="row g-md-4">
          <div class="col-lg-6">
            <input class="gx-input" type="text" placeholder="Full Name" />
            <input class="gx-input" type="email" placeholder="Email" />
            <select class="gx-input"><option value="" disabled selected>Country of Residence</option><option>United Arab Emirates</option><option>United States</option><option>India</option><option>Other</option></select>
            <select class="gx-input"><option value="" disabled selected>Nationality</option><option>Emirati</option><option>American</option><option>Indian</option><option>Other</option></select>
            <select class="gx-input"><option value="" disabled selected>Gender</option><option>Male</option><option>Female</option><option>Prefer not to say</option></select>
            <select class="gx-input"><option value="" disabled selected>Marital Status</option><option>Single</option><option>Married</option><option>Other</option></select>
            <select class="gx-input"><option value="" disabled selected>Education</option><option>High School</option><option>Bachelor's</option><option>Master's</option><option>Doctorate</option></select>
          </div>
          <div class="col-lg-6">
            <input class="gx-input" type="text" placeholder="Whatsapp Number" />
            <input class="gx-input" type="text" placeholder="Date of Birth" onfocus="this.type='date'" onblur="if(!this.value)this.type='text'" />
            <input class="gx-input" type="text" placeholder="City of Residence" />
            <input class="gx-input" type="tel" placeholder="Mobile Number" />
            <p class="gx-label" style="margin-top:6px;">Preferred contact method</p>
            <label class="gx-radio"><input type="radio" name="contact" checked /> Email</label>
            <label class="gx-radio"><input type="radio" name="contact" /> SMS</label>
            <label class="gx-radio"><input type="radio" name="contact" /> Phone Call</label>
            <label class="gx-radio"><input type="radio" name="contact" /> Whatsapp</label>
            <label class="gx-radio"><input type="radio" name="contact" /> Others, please specify</label>
            <input class="gx-input mt-2" type="text" placeholder="Occupation" />
            <p class="gx-label" style="margin-top:6px;">Do you agree to join the GXR community?</p>
            <div class="d-flex gap-4">
              <label class="gx-radio"><input type="radio" name="agree" checked /> Yes, I would like to</label>
              <label class="gx-radio"><input type="radio" name="agree" /> No, thank you</label>
            </div>
          </div>
        </div>
        <div class="text-center mt-4">
          <label class="gx-radio justify-content-center" style="justify-content:center;"><input type="checkbox" /> I agree to the terms and conditions <a href="#" style="color:var(--gx-green-bright);">Learn More</a></label>
          <button type="submit" class="btn-gx mx-auto mt-3">Join Now <i class="bi bi-arrow-right"></i></button>
        </div>
      </form>
    </div>
  </section> -->

  <!-- FORM -->
  <section class="dark-sec" id="morehere" style="display: none;">
    <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 onsubmit="return false;">
              <div class="row">
                <div class="col-md-6"><input class="gx-input" type="text" placeholder="First Name" /></div>
                <div class="col-md-6"><input class="gx-input" type="text" placeholder="Last Name" /></div>
              </div>
              <input class="gx-input" type="email" placeholder="Email" />
              <input class="gx-input" type="tel" placeholder="Phone No. (optional)" />
              <select class="gx-input">
                <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">
                <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" placeholder="Description"></textarea>
              <button type="submit" class="btn-gx mt-2">Submit</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>



  <!-- UPCOMING VACANCIES -->
  <section class="dark-sec" style="padding-top:20px; display:none;" id="vacancies">
    <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="javascript:void(0);" class="cs-cta" data-bs-toggle="modal" data-bs-target="#applyModal">
    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="javascript:void(0);" class="cs-cta" data-bs-toggle="modal" data-bs-target="#applyModal">
    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="javascript:void(0);" class="cs-cta" data-bs-toggle="modal" data-bs-target="#applyModal">
    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="javascript:void(0);" class="cs-cta" data-bs-toggle="modal" data-bs-target="#applyModal">
    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>

<?php
$ctaHeading = 'Ready to Make an Impact with Your Research?';
$ctaButtonText = 'Get Started Free';
$gxSiteKey = GX_RECAPTCHA_SITE_KEY;
$extraBodyHtml = <<<HTML
<!-- Job Application Bootstrap Modal -->
<div class="modal fade" id="applyModal" tabindex="-1" aria-labelledby="applyModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-3 p-md-3">

            <!-- Modal Header -->
            <div class="modal-header border-0 pb-0 align-items-start">
                <div>
                    <h3 class="modal-title text-dark" id="applyModalTitle">Apply for Job</h3>
                    <p class="text-muted small mb-0">Fill in your details below to submit your application.</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-top: 6px;"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body pt-3">
                <form id="gxApplyForm" enctype="multipart/form-data" novalidate>
                    <div class="row g-3">

                        <!-- Full Name -->
                        <div class="col-12">
                            <label class="form-label custom-label">Full Name</label>
                            <input type="text" class="form-control custom-input" name="name" placeholder="Enter your full name" required>
                        </div>

                        <!-- Phone Number -->
                        <div class="col-md-6">
                            <label class="form-label custom-label">Phone Number</label>
                            <input type="tel" class="form-control custom-input" name="phone" placeholder="+91 98765 43210" required>
                        </div>

                        <!-- Profile / Designation -->
                        <div class="col-md-6">
                            <label class="form-label custom-label">Applying Profile</label>
                            <select class="form-select custom-input" name="profile" required>
                                <option value="" selected disabled>Select Profile</option>
                                <option value="Research Analyst">Research Analyst</option>
                                <option value="Full Stack Developer">Full Stack Developer</option>
                                <option value="Business Development">Business Development</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <!-- Resume Upload -->
                        <div class="col-12">
                            <label class="form-label custom-label">Upload CV / Resume</label>
                            <input type="file" class="form-control custom-input" name="resume" accept=".pdf,.doc,.docx" required>
                            <div class="form-text small mt-1">Accepted formats: PDF, DOC, DOCX (Max 5MB)</div>
                        </div>

                        <!-- Message / Cover Note -->
                        <div class="col-12">
                            <label class="form-label custom-label">Comments / Message</label>
                            <textarea class="form-control custom-input" name="message" rows="3" placeholder="Tell us briefly about your experience..."></textarea>
                        </div>

                        <div class="col-12">
                            <div class="g-recaptcha" data-sitekey="{$gxSiteKey}"></div>
                        </div>

                    </div>

                    <div id="gxApplyFeedback" class="mt-3" role="status" aria-live="polite"></div>

                    <!-- Submit Button -->
                    <div class="mt-4 d-flex justify-content-end">
                        <button type="submit" class="btn-gx-submit" id="gxApplySubmitBtn">
                            Submit Application <i class="bi bi-arrow-right ms-1"></i>
                        </button>
                    </div>
                </form>
            </div>

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

<script>
(function () {
  'use strict';
  var form = document.getElementById('gxApplyForm');
  if (!form) return;
  var feedback = document.getElementById('gxApplyFeedback');
  var btn = document.getElementById('gxApplySubmitBtn');

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

    if (!form.elements['name'].value.trim() || !form.elements['phone'].value.trim() || !form.elements['profile'].value) {
      feedback.textContent = 'Please fill in all required fields.';
      feedback.style.color = '#ff6b6b';
      return;
    }
    if (!form.elements['resume'].files.length) {
      feedback.textContent = 'Please upload your CV / Resume.';
      feedback.style.color = '#ff6b6b';
      return;
    }
    if (typeof grecaptcha !== 'undefined' && grecaptcha.getResponse() === '') {
      feedback.textContent = 'Please complete the reCAPTCHA.';
      feedback.style.color = '#ff6b6b';
      return;
    }

    btn.disabled = true;
    btn.innerHTML = 'Submitting...';

    fetch('apply-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.innerHTML = 'Submit Application <i class="bi bi-arrow-right ms-1"></i>';
      });
  });
})();
</script>
HTML;
include 'footer.php';
?>
