<?php
$pageTitle = 'Case Studies — Globinex Research';
$activeNav = 'case-studies';
include 'header.php';
?>

  <!-- PAGE HERO (with opacity overlay) -->
  <header class="page-hero cs-hero">
    <div class="cs-hero-overlay"></div>
    <canvas class="net-canvas" data-net data-net-density="20000"></canvas>
    <div class="container">
      <h1 class="reveal">CASE STUDIES</h1>
      <div class="breadcrumb-gx reveal d1"><a href="index.php">Home</a> <i class="bi bi-chevron-right"></i> <span class="current">Case Studies</span></div>
    </div>
  </header>

  <div class="container">
  <div class="reveal mt-5 in">
        <img loading="lazy" src="images/cashStudy.png" alt="Focus group discussion" style="width:100%; border-radius:18px; display:block;opacity: 0.6;">
      </div>
      </div>

  <!-- CASE STUDY LIST -->
  <section class="dark-sec" style="padding-bottom:60px;">
    <div class="conic-bg-top"></div>
    <div class="container">
      <div class="cs-list">

        <div class="cs-entry reveal">
          <div class="row g-4 align-items-center">
            <div class="col-lg-4"><h3 class="cs-client">Higher Education Institution</h3></div>
            <div class="col-lg-8">
              <p class="cs-desc">A leading higher education institution partnered with Globinex Research to assess brand equity among prospective students and alumni. Through a mixed-methods study combining online surveys and in-depth interviews, we measured awareness, perception, and consideration across key markets. The findings shaped a refreshed enrollment marketing strategy, helping the institution strengthen its competitive position and better communicate its value proposition to future students.</p>
              <button type="button" class="cs-cta cs-gate-trigger" data-cs-file="case-studies/higher-education-brand-equity.pdf" data-cs-title="Higher Education Institution">View Case Study <i class="bi bi-file-earmark-pdf"></i></button>
            </div>
          </div>
        </div>

        <div class="cs-entry reveal d1">
          <div class="row g-4 align-items-center">
            <div class="col-lg-4"><h3 class="cs-client">Global Automotive OEM</h3></div>
            <div class="col-lg-8">
              <p class="cs-desc">A global automotive manufacturer engaged Globinex Research to evaluate the end-to-end customer experience across its dealership network. We combined mystery shopping, CATI surveys, and journey mapping to pinpoint friction points in the sales and service process. The resulting insights informed a dealership training program and service redesign that measurably improved customer satisfaction and repeat-purchase intent.</p>
              <button type="button" class="cs-cta cs-gate-trigger" data-cs-file="case-studies/automotive-oem-cx.pdf" data-cs-title="Global Automotive OEM">View Case Study <i class="bi bi-file-earmark-pdf"></i></button>
            </div>
          </div>
        </div>

        <div class="cs-entry reveal d2">
          <div class="row g-4 align-items-center">
            <div class="col-lg-4"><h3 class="cs-client">Consumer Electronics Brand</h3></div>
            <div class="col-lg-8">
              <p class="cs-desc">A consumer electronics brand needed continuous visibility into brand health as new competitors entered the market. Globinex Research launched a quarterly brand tracking study spanning five markets, measuring awareness, preference, and Net Promoter Score. The ongoing data stream gave the client an early-warning system for shifting sentiment, enabling faster, more confident marketing and product decisions.</p>
              <button type="button" class="cs-cta cs-gate-trigger" data-cs-file="case-studies/consumer-electronics-brand-tracking.pdf" data-cs-title="Consumer Electronics Brand">View Case Study <i class="bi bi-file-earmark-pdf"></i></button>
            </div>
          </div>
        </div>

        <div class="cs-entry reveal d3">
          <div class="row g-4 align-items-center">
            <div class="col-lg-4"><h3 class="cs-client">Retail &amp; FMCG Group</h3></div>
            <div class="col-lg-8">
              <p class="cs-desc">Ahead of a major retail expansion, a leading FMCG retailer needed reliable market intelligence to prioritize new locations. Globinex Research delivered a market sizing and site-selection study combining secondary data, on-ground fieldwork, and consumer surveys across target regions. The findings gave the client's leadership team the confidence to greenlight expansion into three new markets.</p>
              <button type="button" class="cs-cta cs-gate-trigger" data-cs-file="case-studies/retail-fmcg-market-expansion.pdf" data-cs-title="Retail &amp; FMCG Group">View Case Study <i class="bi bi-file-earmark-pdf"></i></button>
            </div>
          </div>
        </div>

        <!--
          NOTE: PDFs above currently live under /case-studies/ on this server.
          Feedback item 4 asks for a cPanel "room" (folder) to park case-study PDFs
          so new ones can be uploaded and interlinked later — that's a hosting/
          cPanel setup task on the server side, not something this file controls.
          Once that folder exists, just update the data-cs-file paths above.
        -->
      </div>
    </div>
  </section>

  <!-- GATED CASE STUDY MODAL (Full Name, Email, Country + reCAPTCHA) -->
  <div class="modal fade" id="csGateModal" tabindex="-1" aria-labelledby="csGateModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content p-3">
        <div class="modal-header border-0 p-0">
          <h3 class="modal-title h5 fw-bold" id="csGateModalTitle">Access Case Study</h3>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <p class="modal-sub">Please share a few details to view this case study.</p>
        <div class="modal-body">
          <form id="csGateForm" class="modal-form" novalidate>
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label fw-medium">Full Name</label>
                <input class="form-control gx-input" type="text" name="full_name" required placeholder="Your full name">
              </div>
              <div class="col-12">
                <label class="form-label fw-medium">Email Address</label>
                <input class="form-control gx-input" type="email" name="email" required placeholder="you@company.com">
              </div>
              <div class="col-12">
                <label class="form-label fw-medium">Country</label>
                <select class="form-control gx-input" name="country" required>
                  <option value="" disabled selected>Select your 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>
              </div>
              <div class="col-12">
                <div class="g-recaptcha" data-sitekey="<?php echo GX_RECAPTCHA_SITE_KEY; ?>"></div>
              </div>
            </div>
            <div class="mt-4 d-flex justify-content-end">
              <button type="submit" class="btn-gx" id="csGateSubmitBtn">View Case Study <i class="bi bi-arrow-right"></i></button>
            </div>
          </form>
          <div class="modal-feedback mt-2" id="csGateFeedback" role="status" aria-live="polite"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', function () {
    'use strict';
    // NOTE: this listener is required — this script tag is printed before
    // footer.php (which loads bootstrap.bundle.min.js). Running the code
    // immediately (as before) fired before the "bootstrap" global existed,
    // causing "Uncaught ReferenceError: bootstrap is not defined". Waiting
    // for DOMContentLoaded guarantees every earlier <script> in the page,
    // including bootstrap's, has already run.
    var modalEl = document.getElementById('csGateModal');
    if (!modalEl) return;
    var modal = new bootstrap.Modal(modalEl);
    var form = document.getElementById('csGateForm');
    var feedback = document.getElementById('csGateFeedback');
    var titleEl = document.getElementById('csGateModalTitle');
    var pendingFile = null;

    document.querySelectorAll('.cs-gate-trigger').forEach(function (btn) {
      btn.addEventListener('click', function () {
        pendingFile = btn.getAttribute('data-cs-file');
        titleEl.textContent = 'Access Case Study — ' + btn.getAttribute('data-cs-title');
        feedback.textContent = '';
        form.reset();
        if (typeof grecaptcha !== 'undefined') grecaptcha.reset();
        modal.show();
      });
    });

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

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

      // TODO (server side): once a lead-capture endpoint exists, POST this form's
      // data there (name / email / country / which case study) before opening the
      // PDF, so these gated downloads get logged like the contact/proposal forms do.
      if (pendingFile) {
        window.open(pendingFile, '_blank', 'noopener');
      }
      modal.hide();
    });
  });
  </script>

<?php
$ctaHeading = 'Ready to Make an Impact with Your Research?';
$ctaButtonText = 'Get Started Free';
$ctaHref = 'contact.php';
include 'footer.php';
?>
