<?php

use ChurchCRM\dto\SystemURLs;

$sPageTitle = 'Contact Us - ' . $churchName;
require SystemURLs::getDocumentRoot() . '/Include/HeaderNotLoggedIn.php';
require 'header.php';
?>

<div class="container py-5">
  <div class="row g-5">
    <div class="col-lg-5 animate-on-scroll">
      <div class="mb-4">
        <h2 class="fw-bold">Get in Touch</h2>
        <p class="text-secondary">We'd love to hear from you. Whether you have a question, prayer request, or just want to say hello, feel free to reach out.</p>
      </div>

      <div class="d-flex align-items-start mb-4">
        <div class="feature-icon bg-primary bg-opacity-10 text-primary me-3 flex-shrink-0" style="width:48px;height:48px;font-size:1.1rem;margin-bottom:0;">
          <i class="fa-solid fa-location-dot"></i>
        </div>
        <div>
          <h6 class="fw-bold mb-1">Our Address</h6>
          <p class="text-secondary mb-0"><?= $churchAddress ?: '123 Church Street' ?><br><?= $churchCity ?>, <?= $churchState ?> <?= $churchZip ?></p>
        </div>
      </div>

      <div class="d-flex align-items-start mb-4">
        <div class="feature-icon bg-success bg-opacity-10 text-success me-3 flex-shrink-0" style="width:48px;height:48px;font-size:1.1rem;margin-bottom:0;">
          <i class="fa-solid fa-phone"></i>
        </div>
        <div>
          <h6 class="fw-bold mb-1">Phone</h6>
          <p class="text-secondary mb-0"><?= $churchPhone ?: '(555) 123-4567' ?></p>
        </div>
      </div>

      <div class="d-flex align-items-start mb-4">
        <div class="feature-icon bg-info bg-opacity-10 text-info me-3 flex-shrink-0" style="width:48px;height:48px;font-size:1.1rem;margin-bottom:0;">
          <i class="fa-solid fa-envelope"></i>
        </div>
        <div>
          <h6 class="fw-bold mb-1">Email</h6>
          <p class="text-secondary mb-0"><?= $churchEmail ?: 'info@church.org' ?></p>
        </div>
      </div>

      <div class="d-flex align-items-start">
        <div class="feature-icon bg-warning bg-opacity-10 text-warning me-3 flex-shrink-0" style="width:48px;height:48px;font-size:1.1rem;margin-bottom:0;">
          <i class="fa-solid fa-clock"></i>
        </div>
        <div>
          <h6 class="fw-bold mb-1">Service Times</h6>
          <p class="text-secondary mb-0">Sunday: 9:00 AM & 10:30 AM<br>Wednesday: 7:00 PM</p>
        </div>
      </div>
    </div>

    <div class="col-lg-6 offset-lg-1 animate-on-scroll">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
          <h4 class="mb-0 fw-bold"><i class="fa-solid fa-paper-plane me-2" style="color:#0d6efd;"></i>Send Us a Message</h4>
        </div>
        <div class="card-body">
          <?php if ($success): ?>
            <div class="alert alert-success d-flex align-items-center">
              <i class="fa-solid fa-circle-check me-2 fa-lg"></i>
              <div>Thank you! Your message has been sent. We will get back to you soon.</div>
            </div>
          <?php endif; ?>
          <?php if (!empty($error)): ?>
            <div class="alert alert-danger d-flex align-items-center">
              <i class="fa-solid fa-circle-exclamation me-2 fa-lg"></i>
              <div><?= $error ?></div>
            </div>
          <?php endif; ?>

          <form method="POST" action="<?= $rootPath ?>/external/contact">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label fw-medium">Your Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" placeholder="John Doe" required>
              </div>
              <div class="col-md-6 mb-3">
                <label class="form-label fw-medium">Email <span class="text-danger">*</span></label>
                <input type="email" name="email" class="form-control" placeholder="john@example.com" required>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label fw-medium">Subject</label>
              <input type="text" name="subject" class="form-control" placeholder="How can we help?">
            </div>
            <div class="mb-3">
              <label class="form-label fw-medium">Message <span class="text-danger">*</span></label>
              <textarea name="message" class="form-control" rows="6" placeholder="Tell us about your prayer need, question, or feedback..." required></textarea>
            </div>
            <button type="submit" class="btn btn-primary w-100 py-2">
              <i class="fa-solid fa-paper-plane me-2"></i>Send Message
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<?php require 'footer.php'; ?>
<?php require SystemURLs::getDocumentRoot() . '/Include/FooterNotLoggedIn.php'; ?>
