{% extends "layout.html" %}

{% block content %}
<section class="section-2025" style="background: var(--gradient-primary); color: white; text-align: center;">
  <div class="container-2025">
    <div class="section-header scroll-reveal">
      <h1 class="section-title serif" style="color: white;">Contact Us</h1>
      <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">We'd love to hear from you and answer any questions</p>
    </div>
  </div>
</section>

{% if success %}
<section class="section-2025">
  <div class="container-2025">
    <div class="card-2025 scroll-reveal" style="text-align: center; background: #d4edda; border-left: 4px solid #28a745;">
      <h3 style="color: #155724;">Message Sent Successfully!</h3>
      <p style="color: #155724;">Thank you for your message. We'll get back to you soon.</p>
    </div>
  </div>
</section>
{% endif %}

{% if error %}
<section class="section-2025">
  <div class="container-2025">
    <div class="card-2025 scroll-reveal" style="text-align: center; background: #f8d7da; border-left: 4px solid #dc3545;">
      <h3 style="color: #721c24;">Error Sending Message</h3>
      <p style="color: #721c24;">There was an error sending your message. Please try again later.</p>
    </div>
  </div>
</section>
{% endif %}

<section class="section-2025">
  <div class="container-2025">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;">
      <!-- Contact Information -->
      <div class="card-2025 scroll-reveal">
        <div class="card-icon-2025">
          <i class="fas fa-church"></i>
        </div>
        <h3 class="card-title">Church Information</h3>
        
        <h4 style="margin: 1.5rem 0 1rem;">{{ church_name }}</h4>
        
        {% if church_address %}
          <p style="margin: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-map-marker-alt" style="color: var(--soft-gold);"></i>
            {{ church_address }}
          </p>
        {% endif %}
        
        {% if po_box %}
          <p style="margin: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-mail-bulk" style="color: var(--soft-gold);"></i>
            {{ po_box }}
          </p>
        {% endif %}
        
        {% if contact_phone %}
          <p style="margin: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-phone" style="color: var(--soft-gold);"></i>
            {{ contact_phone }}
          </p>
        {% endif %}
        
        {% if google_maps_url %}
          <div style="margin-top: 1.5rem;">
            <a href="{{ google_maps_url }}" target="_blank" class="btn-2025 btn-primary">
              <i class="fas fa-map"></i>
              View on Google Maps
            </a>
          </div>
        {% endif %}
        
        <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--soft-gray);">
          <h4>Service Times</h4>
          <p><strong>Sabbath School:</strong> 9:30 AM</p>
          <p><strong>Divine Worship:</strong> 11:00 AM</p>
          <p><strong>Prayer Meeting:</strong> Wednesday 7:00 PM</p>
        </div>
      </div>

      <!-- Contact Form -->
      <div class="card-2025 scroll-reveal">
        <div class="card-icon-2025">
          <i class="fas fa-envelope"></i>
        </div>
        <h3 class="card-title">Send Us a Message</h3>
        
        <form method="post" style="margin-top: 2rem;">
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy);">First Name *</label>
            <input type="text" name="first_name" required 
                   style="width: 100%; padding: 0.75rem; border: 2px solid var(--soft-gray); border-radius: 8px; font-size: 1rem;">
          </div>
          
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy);">Last Name</label>
            <input type="text" name="last_name" 
                   style="width: 100%; padding: 0.75rem; border: 2px solid var(--soft-gray); border-radius: 8px; font-size: 1rem;">
          </div>
          
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy);">Email Address *</label>
            <input type="email" name="email" required 
                   style="width: 100%; padding: 0.75rem; border: 2px solid var(--soft-gray); border-radius: 8px; font-size: 1rem;">
          </div>
          
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy);">Phone Number</label>
            <input type="tel" name="phone" 
                   style="width: 100%; padding: 0.75rem; border: 2px solid var(--soft-gray); border-radius: 8px; font-size: 1rem;">
          </div>
          
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy);">Subject *</label>
            <input type="text" name="subject" required 
                   style="width: 100%; padding: 0.75rem; border: 2px solid var(--soft-gray); border-radius: 8px; font-size: 1rem;">
          </div>
          
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy);">Message *</label>
            <textarea name="message" required rows="5" 
                      style="width: 100%; padding: 0.75rem; border: 2px solid var(--soft-gray); border-radius: 8px; font-size: 1rem; resize: vertical;"></textarea>
          </div>
          
          <button type="submit" class="btn-2025 btn-primary" style="width: 100%;">
            <i class="fas fa-paper-plane"></i>
            Send Message
          </button>
        </form>
      </div>
    </div>
  </div>
</section>
{% endblock %}