<?php
require_once 'includes/config.php';
$pageTitle = 'Contact | 20th Kenya Expo 2026';
$pageDesc  = 'Contact the 20th Kenya Expo team. Exhibitor enquiries, visitor information, sponsorship opportunities, and media requests. KICC, Nairobi.';
$images    = readJSON(IMAGES_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['nairobi'] ?? ''); ?>');"></div>
  <div class="hero-pattern"></div>
  <div class="container hero-content text-center">
    <div class="hero-badge reveal">CONTACT</div>
    <h1 class="hero-title reveal reveal-delay-1">Get in <span>Touch</span></h1>
    <p class="hero-subtitle reveal reveal-delay-2">Our team is ready to help</p>
  </div>
</section>

<!-- SECTION 2 — CONTACT INFO + FORM -->
<section class="section-padding">
  <div class="container">
    <div class="row g-5">
      <!-- Left: Contact Info -->
      <div class="col-lg-5 reveal">
        <span class="section-label">Contact Information</span>
        <h2 class="section-title">Reach Out to Us</h2>

        <div class="contact-info-card">
          <div class="contact-info-icon"><i class="fas fa-envelope"></i></div>
          <div>
            <div class="contact-info-title">Email</div>
            <div class="contact-info-text"><a href="mailto:<?php echo SITE_EMAIL; ?>"><?php echo SITE_EMAIL; ?></a></div>
          </div>
        </div>

        <div class="contact-info-card">
          <div class="contact-info-icon"><i class="fas fa-phone"></i></div>
          <div>
            <div class="contact-info-title">Phone</div>
            <div class="contact-info-text"><a href="tel:<?php echo str_replace(' ', '', SITE_PHONE); ?>"><?php echo SITE_PHONE; ?></a></div>
          </div>
        </div>

        <div class="contact-info-card">
          <div class="contact-info-icon"><i class="fas fa-map-marker-alt"></i></div>
          <div>
            <div class="contact-info-title">Venue</div>
            <div class="contact-info-text">Kenyatta International Convetion Center (KICC), Nairobi, Kenya</div>
          </div>
        </div>

        <div class="contact-info-card">
          <div class="contact-info-icon"><i class="fas fa-calendar-alt"></i></div>
          <div>
            <div class="contact-info-title">Event Dates</div>
            <div class="contact-info-text">November 19–22, 2026</div>
          </div>
        </div>

        <div class="contact-info-card">
          <div class="contact-info-icon"><i class="fas fa-building"></i></div>
          <div>
            <div class="contact-info-title">Organized by</div>
            <div class="contact-info-text"><?php echo ORG_NAME; ?></div>
          </div>
        </div>

        <!-- <div class="glass-card mt-4">
          <h5 style="color:var(--secondary);margin-bottom:12px;"><i class="fas fa-clock me-2"></i>Office Hours</h5>
          <p class="mb-1" style="color:var(--text);font-size:0.9rem;">Monday – Friday</p>
          <p style="color:var(--text-muted);font-size:0.85rem;">9:00 AM – 6:00 PM (EAT, UTC+3)</p>
          <p style="color:var(--text-muted);font-size:0.8rem;margin-top:8px;">Our team typically responds within 24 hours.</p>
        </div> -->
      </div>

      <!-- Right: Contact Form -->
      <div class="col-lg-7 reveal reveal-delay-2">
        <div class="glass-card">
          <h3 class="mb-4">Send us a Message</h3>
          <form data-ajax="true">
            <input type="hidden" name="type" value="contact">
            <input type="hidden" name="_csrf" value="<?php echo generateCSRF(); ?>">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">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">Subject <span class="required">*</span></label>
                <select name="interest" class="form-select" required>
                  <option value="">Select...</option>
                  <option>Exhibitor Enquiry</option>
                  <option>Visitor Information</option>
                  <option>Sponsorship</option>
                  <option>General Enquiry</option>
                </select>
              </div>
              <div class="col-12">
                <label class="form-label">Message <span class="required">*</span></label>
                <textarea name="message" class="form-control" rows="5" required placeholder="How can we help you?"></textarea>
              </div>
            </div>
            <div class="mt-4">
              <button type="submit" class="btn btn-gold btn-lg">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SECTION 3 — MAP -->
<section class="section-padding section-dark">
  <div class="container">
    <div class="text-center reveal">
      <span class="section-label">Location</span>
      <h2 class="section-title text-center">Find Us at KICC, Nairobi</h2>
    </div>
    <div class="mt-4 reveal">
      <iframe class="map-embed" src="https://www.google.com/maps?q=Kenyatta+International+Convention+Centre+Harambee+Avenue+Nairobi+Kenya&output=embed" width="100%" height="400" style="border:0;border-radius:12px;" allowfullscreen loading="lazy"></iframe>
    </div>
  </div>
</section>

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