{% extends 'base.html' %}
{% load static %}

{% block title %}Contact Us | {{ site.site_name }} — Abuja Real Estate Experts{% endblock %}
{% block meta_description %}Get in touch with {{ site.site_name }}. Call, WhatsApp, or send a message. We respond to
all enquiries within 24 hours.{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Get in Touch</h1>
            <p>We respond to all enquiries within 24 hours. No pressure, just helpful.</p>
        </div>
    </div>
</div>

<div class="breadcrumb-bar">
    <div class="container">
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="{% url 'core:home' %}">Home</a>
            <span>&rsaquo;</span>
            <span class="current">Contact</span>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">
        <div class="contact-grid">

            <!-- Info Side -->
            <div>
                <div class="contact-side-img">
                    <img src="{% static 'images/contact-img.jpg' %}" alt="Contact Villaco" loading="lazy">
                </div>

                <span class="section-label">Reach Us</span>
                <h2 class="h-2 about-header">We're Here to Help</h2>

                {% if site.phone_1 %}
                <div class="contact-info-item fade-up">
                    <div class="contact-icon"><i class="fas fa-phone-alt"></i></div>
                    <div>
                        <h4>Call Us</h4>
                        <p><a href="tel:{{ site.phone_1 }}">{{ site.phone_1 }}</a>{% if site.phone_2 %}<br><a
                                href="tel:{{ site.phone_2 }}">{{ site.phone_2 }}</a>{% endif %}</p>
                    </div>
                </div>
                {% endif %}

                {% if site.whatsapp %}
                <div class="contact-info-item fade-up">
                    <div class="contact-icon contact-icon-wa"><i class="fab fa-whatsapp"></i></div>
                    <div>
                        <h4>WhatsApp</h4>
                        <p><a href="https://wa.me/{{ site.whatsapp }}" target="_blank">{{ site.whatsapp }}</a></p>
                    </div>
                </div>
                {% endif %}

                {% if site.email %}
                <div class="contact-info-item fade-up">
                    <div class="contact-icon"><i class="fas fa-envelope"></i></div>
                    <div>
                        <h4>Email</h4>
                        <p><a href="mailto:{{ site.email }}">{{ site.email }}</a></p>
                    </div>
                </div>
                {% endif %}

                {% if site.address %}
                <div class="contact-info-item fade-up">
                    <div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
                    <div>
                        <h4>Office Address</h4>
                        <p>{{ site.address }}</p>
                    </div>
                </div>
                {% endif %}

                <div class="contact-social-row">
                    <h4>Follow Us</h4>
                    <div class="contact-social-btns">
                        {% if site.facebook_url %}<a href="{{ site.facebook_url }}" target="_blank"
                            class="btn btn-outline btn-sm"><i class="fab fa-facebook-f"></i> Facebook</a>{% endif %}
                        {% if site.instagram_url %}<a href="{{ site.instagram_url }}" target="_blank"
                            class="btn btn-outline btn-sm"><i class="fab fa-instagram"></i> Instagram</a>{% endif %}
                        {% if site.twitter_url %}<a href="{{ site.twitter_url }}" target="_blank"
                            class="btn btn-outline btn-sm"><i class="fab fa-x-twitter"></i> Twitter</a>{% endif %}
                    </div>
                </div>

                {% if site.google_maps_embed %}
                <div class="map-container">
                    {{ site.google_maps_embed|safe }}
                </div>
                {% endif %}
            </div>

            <!-- Form -->
            <div class="contact-form-card fade-up">
                <h2 class="h-3">Send Us a Message</h2>
                {% if form %}
                <form action="{% url 'enquiries:contact' %}" method="post" id="contact-form">
                    {% csrf_token %}
                    {% for field in form %}
                    <div class="form-group">
                        <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                        <div class="field-error">{{ field.errors.0 }}</div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary w-100" id="enquiry-submit-btn">
                        <i class="fas fa-paper-plane"></i> Send Message
                    </button>
                </form>
                {% else %}
                <p class="text-muted">Contact form will appear here.</p>
                {% endif %}
            </div>

        </div>
    </div>
</section>

{% endblock %}