<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Contact Us | SaniBook Kenya</title>
  <meta name="description"
    content="Contact the SaniBook Initiative. Reach out for partnerships, media inquiries, data submission support, or general information regarding Kenya's sanitation intelligence hub.">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: {
              dark: '#0f172a',
              blue: '#2563eb',
              cyan: '#0891b2',
              red: '#dc2626',
              lime: '#65a30d',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            display: ['Space Grotesk', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style>
    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
    }

    /* Animations */
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Cards */
    .card-hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

<body class="antialiased text-slate-900">

  <?php include 'navbar.php'; ?>
  <?php
  $breadcrumbs = [
      ['label' => 'Home', 'url' => '/'],
      ['label' => 'Contact Us']
  ];
  include 'breadcrumbs.php';
  ?>

  <!-- Main Content -->
  <main class="pt-20">
    <!-- Hero Section -->
    <section class="relative bg-brand-dark text-white py-20 overflow-hidden">
      <!-- Background Image -->
      <div class="absolute inset-0 opacity-40">
        <img src="images/Launch Gallery/launch_01.jpg" alt="Background" class="w-full h-full object-cover">
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/50 to-transparent"></div>

      <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-up">
        <h1 class="font-display text-3xl md:text-4xl font-bold mb-6 tracking-tight">Connect & Collaborate</h1>
        <p class="text-lg sm:text-xl text-slate-300 max-w-3xl mx-auto leading-relaxed">
          Your link to the SaniBook Initiative, key sector stakeholders, and investment opportunities.
        </p>
      </div>
    </section>

    <!-- Use strict grid for layout -->
    <section class="py-16 md:py-24 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-3 gap-12 lg:gap-16">

          <!-- Contact Info Column -->
          <div class="lg:col-span-1 space-y-8">
            <div class="fade-up">
              <h3 class="font-display text-2xl font-bold text-slate-900 mb-6">Departmental Inquiries</h3>
              <div class="space-y-4">
                <!-- Sales -->
                <div class="bg-slate-50 p-6 rounded-xl border border-slate-100 card-hover">
                  <h4 class="font-semibold text-slate-900 mb-2">Sales & Advertising</h4>
                  <p class="text-sm text-slate-600 mb-2">Inquiries regarding sponsorship or booths.</p>
                  <a href="mailto:sales@sanibook.ke"
                    class="text-brand-blue font-medium hover:underline">sales@sanibook.ke</a>
                </div>
                <!-- Marketing -->
                <div class="bg-slate-50 p-6 rounded-xl border border-slate-100 card-hover"
                  style="transition-delay: 0.1s;">
                  <h4 class="font-semibold text-slate-900 mb-2">Media & Marketing</h4>
                  <p class="text-sm text-slate-600 mb-2">For press releases and partnerships.</p>
                  <a href="mailto:marketing@sanibook.ke"
                    class="text-brand-blue font-medium hover:underline">marketing@sanibook.ke</a>
                </div>
                <!-- General -->
                <div class="bg-slate-50 p-6 rounded-xl border border-slate-100 card-hover"
                  style="transition-delay: 0.2s;">
                  <h4 class="font-semibold text-slate-900 mb-2">General Info</h4>
                  <p class="text-sm text-slate-600 mb-2">For general data inquiries.</p>
                  <a href="mailto:info@sanibook.ke"
                    class="text-brand-blue font-medium hover:underline">info@sanibook.ke</a>
                </div>
              </div>
            </div>

            <!-- Location -->
            <div class="fade-up" style="transition-delay: 0.3s;">
              <div class="bg-brand-dark text-white p-8 rounded-xl shadow-lg">
                <div class="flex items-center gap-4 mb-4">
                  <div class="w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
                    <i class="fa-solid fa-map-location-dot text-brand-lime"></i>
                  </div>
                  <h3 class="font-display text-xl font-bold">Our Location</h3>
                </div>
                <p class="text-slate-300">SaniBook Initiative Headquarters</p>
                <p class="text-lg font-semibold mt-1">Nairobi, Kenya</p>
              </div>
            </div>
          </div>

          <!-- Contact Form Column -->
          <div class="lg:col-span-2 fade-up" style="transition-delay: 0.2s;">
            <div class="bg-white rounded-2xl shadow-xl border border-slate-100 p-8 sm:p-10">
              <h3 class="font-display text-2xl font-bold text-slate-900 mb-8">Send Us a Message</h3>

              <form id="contact-form" class="grid md:grid-cols-2 gap-6">

                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">Full Name <span
                      class="text-brand-red">*</span></label>
                  <input type="text" name="full_name" required
                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand-blue focus:ring-1 focus:ring-brand-blue outline-none transition-colors">
                </div>

                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">Organization</label>
                  <input type="text" name="organization"
                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand-blue focus:ring-1 focus:ring-brand-blue outline-none transition-colors">
                </div>

                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">Email Address <span
                      class="text-brand-red">*</span></label>
                  <input type="email" name="email" required
                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand-blue focus:ring-1 focus:ring-brand-blue outline-none transition-colors">
                </div>

                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
                  <input type="tel" name="phone"
                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand-blue focus:ring-1 focus:ring-brand-blue outline-none transition-colors">
                </div>

                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-slate-700 mb-2">Topic of Inquiry <span
                      class="text-brand-red">*</span></label>
                  <select name="inquiry_type" required
                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand-blue focus:ring-1 focus:ring-brand-blue outline-none transition-colors bg-white">
                    <option value="">Select a Topic</option>
                    <option value="Sponsorship">Sponsorship/Sales</option>
                    <option value="Media">Media/Press</option>
                    <option value="General">General Information</option>
                    <option value="Data">Data Submission Help</option>
                    <option value="Technical">Technical Issue</option>
                  </select>
                </div>

                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-slate-700 mb-2">Your Message <span
                      class="text-brand-red">*</span></label>
                  <textarea name="message" rows="5" required
                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand-blue focus:ring-1 focus:ring-brand-blue outline-none transition-colors"
                    placeholder="How can we help?"></textarea>
                </div>

                <div class="md:col-span-2 pt-4">
                  <button type="submit"
                    class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-brand-blue text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-lg shadow-brand-blue/20">
                    Send Message <i class="fa-solid fa-paper-plane"></i>
                  </button>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <?php include 'footer.php'; ?>

  <script>


    // Fade-in animations
    const fadeElements = document.querySelectorAll('.fade-up');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

    fadeElements.forEach(el => observer.observe(el));

    // Form Logic — sends via local SMTP to info@sanibook.ke
    const form = document.getElementById('contact-form');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const btn = form.querySelector('button[type="submit"]');
      const originalContent = btn.innerHTML;

      btn.disabled = true;
      btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Sending...';

      try {
        const formData = new FormData(form);
        const res = await fetch('/api/send-contact.php', {
          method: 'POST',
          body: formData
        });
        const data = await res.json();

        if (data.ok) {
          alert("Message Sent! We will get back to you shortly.");
          form.reset();
        } else {
          alert(data.error || "Failed to send message. Please try again.");
        }
      } catch (err) {
        console.error(err);
        alert("Connection error. Please try again.");
      } finally {
        btn.disabled = false;
        btn.innerHTML = originalContent;
      }
    });
  </script>
</body>

</html>