<?php
$page_title = "Contact";
$page_description = "Have questions or need help? Reach out to our 24/7 support team.";

// POST handler
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (!defined('VALID_ACCESS')) { include('include/config.php'); }
    $fullname = trim($_POST['ContactForm']['fullname']);
    $email    = trim($_POST['ContactForm']['email']);
    $phone    = trim($_POST['ContactForm']['phone']);
    $subject  = trim($_POST['ContactForm']['subject']);
    $body     = trim($_POST['ContactForm']['body']);
    $captcha_verified = $_POST['captcha_verified'] ?? '0';

    if ($captcha_verified !== '1') { $_SESSION['contact_error'] = "Please complete the security verification!"; header('Location: contact.php'); exit(); }
    if (empty($fullname) || empty($email) || empty($phone) || empty($subject) || empty($body)) { $_SESSION['contact_error'] = "All fields are required"; header('Location: contact.php'); exit(); }
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $_SESSION['contact_error'] = "Invalid email address"; header('Location: contact.php'); exit(); }

    try {
        $to = WEB_EMAIL;
        $email_subject = "Contact Form: " . $subject;
        $message = "<html><body><h2>New Contact Form - " . WEB_NAME . "</h2><p><strong>Name:</strong> {$fullname}</p><p><strong>Email:</strong> {$email}</p><p><strong>Phone:</strong> {$phone}</p><p><strong>Subject:</strong> {$subject}</p><p><strong>Message:</strong><br>{$body}</p></body></html>";
        if (send_system_email($to, $email_subject, $message, $pdo, $site_data, ['from_email' => $email, 'from_name' => $fullname])) {
            $_SESSION['contact_success'] = "Thank you! We'll get back to you soon.";
        } else {
            $_SESSION['contact_error'] = "Failed to send message. Please try again.";
        }
    } catch (Exception $e) { $_SESSION['contact_error'] = "An error occurred. Please try again."; }
    header('Location: contact.php'); exit();
}

include('include/header.php');
?>

<!-- Hero -->
<section class="pt-16 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
  <div class="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-full px-4 py-1.5 mb-6">
    <span class="text-xs font-semibold text-slate-800 tracking-wide uppercase">Get in Touch</span>
  </div>
  <h1 class="text-4xl sm:text-5xl font-extrabold text-slate-900 mb-4">Contact & <span class="text-accent italic">Support</span></h1>
  <p class="text-slate-600 max-w-lg mx-auto">Have questions or need help? We're available 24/7 — reach out through any channel below.</p>
</section>

<!-- Content -->
<section class="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto pb-20">
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">

    <!-- Left: Contact Channels -->
    <div class="lg:col-span-2 space-y-4">
      <?php if (!empty($site_data['web_telegram'])): ?>
      <a href="<?php echo $site_data['web_telegram']; ?>" target="_blank" class="glassmorphism rounded-2xl p-5 flex items-start gap-4 hover:border-primary/30 hover:translate-x-1 transition-all shadow-sm block">
        <div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
          <i class="fa-brands fa-telegram text-primary text-lg"></i>
        </div>
        <div>
          <h4 class="text-sm font-bold text-slate-900 mb-1">Telegram</h4>
          <p class="text-xs text-slate-600 mb-1">Fastest response — typically under 5 minutes.</p>
          <span class="text-xs font-bold text-accent">Chat on Telegram →</span>
        </div>
      </a>
      <?php endif; ?>

      <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $site_data['whatsapp_number'] ?? ''); ?>" target="_blank" class="glassmorphism rounded-2xl p-5 flex items-start gap-4 hover:border-primary/30 hover:translate-x-1 transition-all shadow-sm block">
        <div class="w-11 h-11 rounded-xl bg-green-100 flex items-center justify-center flex-shrink-0">
          <i class="fa-brands fa-whatsapp text-green-600 text-lg"></i>
        </div>
        <div>
          <h4 class="text-sm font-bold text-slate-900 mb-1">WhatsApp</h4>
          <p class="text-xs text-slate-600 mb-1">Send us a direct message for quick support.</p>
          <span class="text-xs font-bold text-accent"><?php echo $site_data['whatsapp_number'] ?? 'Chat now'; ?> →</span>
        </div>
      </a>

      <?php if (!empty($site_data['web_email'])): ?>
      <div class="glassmorphism rounded-2xl p-5 flex items-start gap-4 shadow-sm">
        <div class="w-11 h-11 rounded-xl bg-accent/10 flex items-center justify-center flex-shrink-0">
          <i class="fa-solid fa-envelope text-accent text-lg"></i>
        </div>
        <div>
          <h4 class="text-sm font-bold text-slate-900 mb-1">Email</h4>
          <p class="text-xs text-slate-600"><?php echo htmlspecialchars($site_data['web_email']); ?></p>
        </div>
      </div>
      <?php endif; ?>

      <div class="bg-primary/5 border border-primary/15 rounded-2xl p-5 flex items-start gap-3">
        <div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
          <i class="fa-solid fa-clock text-primary text-sm"></i>
        </div>
        <div>
          <h4 class="text-xs font-bold text-primary mb-1">Response Times</h4>
          <p class="text-xs text-slate-600">Telegram & WhatsApp: Under 5 min<br>Email / Form: Under 2 hours</p>
        </div>
      </div>
    </div>

    <!-- Right: Contact Form -->
    <div class="lg:col-span-3 glassmorphism rounded-2xl p-6 sm:p-8 shadow-premium">
      <h2 class="text-xl font-bold text-slate-900 mb-1">Send us a Message</h2>
      <p class="text-slate-600 text-sm mb-6">Fill out the form and we'll get back to you shortly.</p>

      <?php if (isset($_SESSION['contact_success'])): ?>
      <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-4 flex items-center gap-3">
        <i class="fa-solid fa-circle-check text-green-600"></i>
        <span class="text-sm text-green-800"><?php echo htmlspecialchars($_SESSION['contact_success']); unset($_SESSION['contact_success']); ?></span>
      </div>
      <?php endif; ?>
      <?php if (isset($_SESSION['contact_error'])): ?>
      <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4 flex items-center gap-3">
        <i class="fa-solid fa-circle-exclamation text-red-500"></i>
        <span class="text-sm text-red-800"><?php echo htmlspecialchars($_SESSION['contact_error']); unset($_SESSION['contact_error']); ?></span>
      </div>
      <?php endif; ?>

      <form method="POST" action="contact.php" id="contactForm">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div>
            <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Full Name</label>
            <input type="text" name="ContactForm[fullname]" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm text-slate-800 focus:outline-none focus:border-primary transition-all" placeholder="John Doe" required>
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Email</label>
            <input type="email" name="ContactForm[email]" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm text-slate-800 focus:outline-none focus:border-primary transition-all" placeholder="you@example.com" required>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div>
            <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Phone</label>
            <input type="tel" name="ContactForm[phone]" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm text-slate-800 focus:outline-none focus:border-primary transition-all" placeholder="+234..." required>
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Subject</label>
            <input type="text" name="ContactForm[subject]" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm text-slate-800 focus:outline-none focus:border-primary transition-all" placeholder="What's this about?" required>
          </div>
        </div>
        <div class="mb-4">
          <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Message</label>
          <textarea name="ContactForm[body]" rows="5" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm text-slate-800 focus:outline-none focus:border-primary transition-all resize-y" placeholder="Type your message here..." required></textarea>
        </div>

        <!-- Captcha -->
        <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-5">
          <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" id="robotCheck" class="w-5 h-5 accent-primary rounded" onchange="document.getElementById('captchaVal').value=this.checked?'1':'0'; document.getElementById('submitBtn').disabled=!this.checked;">
            <span class="text-sm text-slate-700 font-medium">I'm not a robot</span>
          </label>
        </div>
        <input type="hidden" id="captchaVal" name="captcha_verified" value="0">

        <button type="submit" id="submitBtn" disabled class="w-full bg-primary hover:bg-primary-light disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold text-sm py-4 rounded-xl transition-all shadow-glow-purple flex items-center justify-center gap-2">
          <i class="fa-solid fa-paper-plane"></i> Send Message
        </button>
      </form>
    </div>
  </div>
</section>

<?php include('include/footer.php'); ?>
