<?php
require_once 'includes/config.php';
$pageTitle = 'Register Free | 20th Kenya Expo 2026';
$pageDesc  = 'Register free for the 20th Kenya Expo 2026. November 19-22 at KICC, Nairobi. Exhibitor, visitor, sponsor, and investor registration.';
$images    = readJSON(IMAGES_FILE);
$cats      = readJSON(EXHIBITOR_CATS_FILE);
require_once 'includes/header.php';
?>

<!-- SECTION 1 — HERO -->
<section class="hero-section" style="min-height:50vh;">
  <div class="hero-bg" style="background-image: url('<?php echo htmlspecialchars($images['hero_bg'] ?? ''); ?>');"></div>
  <div class="hero-pattern"></div>
  <div class="container hero-content text-center">
    <div class="hero-badge reveal"><i class="fas fa-ticket me-2"></i>FREE REGISTRATION</div>
    <h1 class="hero-title reveal reveal-delay-1">Register for<br><span>Kenya Expo 2026</span></h1>
    <p class="hero-subtitle reveal reveal-delay-2">Secure your spot at the 20th Anniversary Edition</p>
  </div>
</section>

<!-- SECTION 2 — REGISTRATION FORM -->
<section class="section-padding">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 reveal">
        <div class="glass-card" style="padding:48px;">
          <div class="text-center mb-4">
            <h3>Complete Your Registration</h3>
            <p style="color:var(--text-muted);font-size:0.9rem;">All fields marked with <span class="required">*</span> are required.</p>
          </div>

          <form data-ajax="true">
            <input type="hidden" name="_csrf" value="<?php echo generateCSRF(); ?>">

            <!-- Honeypot field: hidden from real users, bots auto-fill it. Leave name as-is; do not rename without updating the backend check. -->
            <div style="position:absolute; left:-9999px; top:-9999px;" aria-hidden="true">
              <label for="reg_website">Website</label>
              <input type="text" name="website" id="reg_website" tabindex="-1" autocomplete="off">
            </div>

            <!-- Registration Type -->
            <div class="mb-4">
              <label class="form-label">I am registering as <span class="required">*</span></label>
              <div class="row g-2">
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" value="exhibitor" id="reg_exhibitor" required onchange="toggleRegFields()">
                    <label class="form-check-label" for="reg_exhibitor">Exhibitor</label>
                  </div>
                </div>
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" value="visitor" id="reg_visitor" required onchange="toggleRegFields()">
                    <label class="form-check-label" for="reg_visitor">Visitor</label>
                  </div>
                </div>
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" value="sponsor" id="reg_sponsor" required onchange="toggleRegFields()">
                    <label class="form-check-label" for="reg_sponsor">Sponsor</label>
                  </div>
                </div>
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" value="investor" id="reg_investor" required onchange="toggleRegFields()">
                    <label class="form-check-label" for="reg_investor">Investor</label>
                  </div>
                </div>
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" value="press" id="reg_press" required onchange="toggleRegFields()">
                    <label class="form-check-label" for="reg_press">Press / Media</label>
                  </div>
                </div>
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" value="other" id="reg_other" required onchange="toggleRegFields()">
                    <label class="form-check-label" for="reg_other">Other</label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Full Name <span class="required">*</span></label>
                <input type="text" name="name" class="form-control" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Email <span class="required">*</span></label>
                <input type="email" name="email" class="form-control" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Phone</label>
                <input type="tel" name="phone" class="form-control">
              </div>
              <div class="col-md-6">
                <label class="form-label">Company / Organisation</label>
                <input type="text" name="company" class="form-control">
              </div>
              <div class="col-md-6">
                <label class="form-label">Job Title</label>
                <input type="text" name="job_title" class="form-control">
              </div>
              <div class="col-md-6">
                <label class="form-label">Country <span class="required">*</span></label>
                <select name="country" class="form-select" required>
                  <option value="">Select country...</option>
                  <option>Kenya</option><option>Uganda</option><option>Tanzania</option><option>Rwanda</option>
                  <option>Ethiopia</option><option>Nigeria</option><option>South Africa</option>
                  <option>United Arab Emirates</option><option>India</option><option>China</option>
                  <option>United Kingdom</option><option>United States</option><option>Germany</option>
                  <option>France</option><option>Netherlands</option><option>Japan</option>
                  <option>South Korea</option><option>Saudi Arabia</option><option>Egypt</option>
                  <option>Ghana</option><option>Other</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">City</label>
                <input type="text" name="city" class="form-control">
              </div>

              <!-- Exhibitor-specific -->
              <div class="col-md-6 reg-field-exhibitor" style="display:none;">
                <label class="form-label">Package Interest</label>
                <select name="interest" class="form-select">
                  <option value="">Select...</option>
                  <option>Standard</option>
                  <option>Premium</option>
                  <option>Platinum</option>
                  <option>Custom</option>
                </select>
              </div>

              <!-- Sponsor-specific -->
              <div class="col-md-6 reg-field-sponsor" style="display:none;">
                <label class="form-label">Sponsorship Tier Interest</label>
                <select name="interest" class="form-select">
                  <option value="">Select...</option>
                  <option>Title Sponsor</option>
                  <option>Gold Sponsor</option>
                  <option>Silver Sponsor</option>
                  <option>Bronze Sponsor</option>
                  <option>Custom</option>
                </select>
              </div>
            </div>

            <!-- Visitor-specific: Sectors of Interest -->
            <div class="mt-3 reg-field-visitor" style="display:none;">
              <label class="form-label">Sectors of Interest</label>
              <div class="row g-2">
                <?php foreach ($cats['categories'] ?? [] as $cat): ?>
                <div class="col-6 col-md-4">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="sector[]" value="<?php echo htmlspecialchars($cat['name']); ?>" id="reg_sec_<?php echo $cat['id']; ?>">
                    <label class="form-check-label" for="reg_sec_<?php echo $cat['id']; ?>" style="font-size:0.85rem;"><?php echo htmlspecialchars($cat['name']); ?></label>
                  </div>
                </div>
                <?php endforeach; ?>
              </div>
            </div>

            <div class="row g-3 mt-1">
              <div class="col-12">
                <label class="form-label">How did you hear about Kenya Expo 2026?</label>
                <select name="source" class="form-select">
                  <option value="">Select...</option>
                  <option>Social Media</option>
                  <option>Google Search</option>
                  <option>Partner Organisation</option>
                  <option>Referral</option>
                  <option>Previous Attendee</option>
                  <option>Email</option>
                  <option>Other</option>
                </select>
              </div>
              <div class="col-12">
                <label class="form-label">Message / Special Requirements</label>
                <textarea name="message" class="form-control" rows="3" placeholder="Optional"></textarea>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="consent" id="reg_consent" required>
                  <label class="form-check-label" for="reg_consent" style="font-size:0.85rem;">
                    I agree to receive event updates and communications from <?php echo ORG_NAME; ?>
                  </label>
                </div>
              </div>
            </div>

            <div class="text-center mt-4">
              <button type="submit" class="btn btn-gold btn-lg">Complete Registration</button>
            </div>
          </form>

          <script>
          function toggleRegFields() {
            const type = document.querySelector('input[name="type"]:checked')?.value;
            document.querySelectorAll('.reg-field-exhibitor, .reg-field-sponsor, .reg-field-visitor').forEach(el => el.style.display = 'none');
            if (type === 'exhibitor') document.querySelectorAll('.reg-field-exhibitor').forEach(el => el.style.display = '');
            if (type === 'sponsor') document.querySelectorAll('.reg-field-sponsor').forEach(el => el.style.display = '');
            if (type === 'visitor') document.querySelectorAll('.reg-field-visitor').forEach(el => el.style.display = '');
          }
          // Restore from URL param
          const urlParams = new URLSearchParams(window.location.search);
          const typeParam = urlParams.get('type');
          if (typeParam) {
            const radio = document.getElementById('reg_' + typeParam);
            if (radio) { radio.checked = true; toggleRegFields(); }
          }
          </script>
        </div>
      </div>
    </div>
  </div>
</section>

<?php require_once 'includes/footer.php'; ?>