{% extends "base.html" %}

{% block title %}Contact Us - A+ Academy{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="hero-section" style="padding: 150px 0 80px;">
    <div class="container text-center">
        <span class="section-label">Get In Touch</span>
        <h1 class="hero-title" style="font-size: 3rem;">Contact Us</h1>
        <p class="hero-subtitle">Ready to start your academic journey? We'd love to hear from you.</p>
    </div>
</section>

<!-- Contact Section -->
<section class="py-5">
    <div class="container py-5">
        <div class="row g-5">
            <!-- Contact Info -->
            <div class="col-lg-4">
                <div class="soft-card p-4 h-100">
                    <h4 class="mb-4">Contact Information</h4>

                    <div class="d-flex align-items-start gap-3 mb-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3 flex-shrink-0">
                            <i class="bi bi-geo-alt-fill text-primary"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Address</h6>
                            <p class="text-muted mb-0">123 Education Street<br>Johannesburg, South Africa</p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start gap-3 mb-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3 flex-shrink-0">
                            <i class="bi bi-telephone-fill text-primary"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Phone</h6>
                            <p class="text-muted mb-0">+27 11 123 4567<br>+27 82 123 4567</p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start gap-3 mb-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3 flex-shrink-0">
                            <i class="bi bi-envelope-fill text-primary"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Email</h6>
                            <p class="text-muted mb-0">info@aplusacademy.co.za<br>enquiries@aplusacademy.co.za</p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start gap-3">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3 flex-shrink-0">
                            <i class="bi bi-clock-fill text-primary"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Hours</h6>
                            <p class="text-muted mb-0">Mon - Fri: 8:00 AM - 6:00 PM<br>Sat: 9:00 AM - 2:00 PM</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="col-lg-8">
                <div class="soft-card p-4 p-md-5">
                    <h4 class="mb-4">Send us a Message</h4>

                    <form method="POST" action="{{ url_for('main.contact') }}">
                        {{ form.hidden_tag() }}

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.name.label(class="form-label") }}
                                    {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="Your full name") }}
                                    {% if form.name.errors %}
                                        <div class="invalid-feedback">
                                            {% for error in form.name.errors %}{{ error }}{% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.email.label(class="form-label") }}
                                    {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else ""), placeholder="your@email.com") }}
                                    {% if form.email.errors %}
                                        <div class="invalid-feedback">
                                            {% for error in form.email.errors %}{{ error }}{% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.phone.label(class="form-label") }}
                                    {{ form.phone(class="form-control", placeholder="+27 XX XXX XXXX") }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.subject.label(class="form-label") }}
                                    {{ form.subject(class="form-select" + (" is-invalid" if form.subject.errors else "")) }}
                                    {% if form.subject.errors %}
                                        <div class="invalid-feedback">
                                            {% for error in form.subject.errors %}{{ error }}{% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            {{ form.message.label(class="form-label") }}
                            {{ form.message(class="form-control" + (" is-invalid" if form.message.errors else ""), rows="5", placeholder="Tell us how we can help you...") }}
                            {% if form.message.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.message.errors %}{{ error }}{% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="d-grid">
                            {{ form.submit(class="soft-btn btn-lg") }}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section class="py-5" style="background: white;">
    <div class="container-fluid px-0">
        <div class="soft-card mx-3 mx-md-5 overflow-hidden">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d114584.7324629385!2d28.0045555!3d-26.205!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e950c68537d5f57%3A0x2c62e3e56fe4e6c5!2sJohannesburg%2C%20South%20Africa!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
                width="100%" 
                height="400" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</section>
{% endblock %}