{% extends 'base.html' %}
{% block title %}Contact Us — {{ site.site_name }}{% endblock %}
{% block content %}
<section class="page-header">
  <div class="container"><h1>Contact Us</h1><p>We're here to help you find your perfect property.</p></div>
</section>
<section class="section">
  <div class="container">
    <div class="row g-5">
      <div class="col-lg-5">
        <h3>Get In Touch</h3>
        <p class="text-muted">Reach out via any channel below or fill the form and we'll respond within 24 hours.</p>
        <ul class="contact-info-list">
          <li><i class="bi bi-geo-alt-fill"></i><div><strong>Address</strong><div>{{ site.address|default:"Abuja, Nigeria" }}</div></div></li>
          <li><i class="bi bi-telephone-fill"></i><div><strong>Phone</strong><div><a href="tel:{{ site.phone|default:CONTACT_PHONE }}">{{ site.phone|default:CONTACT_PHONE }}</a></div></div></li>
          <li><i class="bi bi-envelope-fill"></i><div><strong>Email</strong><div><a href="mailto:{{ site.email|default:CONTACT_EMAIL }}">{{ site.email|default:CONTACT_EMAIL }}</a></div></div></li>
          <li><i class="bi bi-whatsapp"></i><div><strong>WhatsApp</strong><div><a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}" target="_blank">Chat on WhatsApp</a></div></div></li>
        </ul>
      </div>
      <div class="col-lg-7">
        <div class="contact-form-card">
          <h4>Send Us a Message</h4>
          <form method="post" action="{% url 'leads:contact_submit' %}">
            {% csrf_token %}
            <div class="row g-3">
              <div class="col-md-6"><input type="text" name="name" class="form-control" placeholder="Your name *" required></div>
              <div class="col-md-6"><input type="email" name="email" class="form-control" placeholder="Email *" required></div>
              <div class="col-md-12"><input type="text" name="phone" class="form-control" placeholder="Phone number"></div>
              <div class="col-md-12"><textarea name="message" class="form-control" rows="5" placeholder="Your message *" required></textarea></div>
              <div class="col-md-12"><button type="submit" class="btn btn-primary btn-lg w-100">Send Message</button></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}