{% extends 'base.html' %}
{% block title %}Contact{% endblock %}
{% block meta_desc %}Get in touch with Ticia Counselling Centre Projects — based in Lilongwe, Malawi.{% endblock %}

{% block content %}
<section class="page-hero">
    <div class="container">
        <div class="breadcrumb"><a href="{{ url_for('index') }}">Home</a><span>/</span><span
                style="color:rgba(255,255,255,0.8);">Contact</span></div>
        <h1>Contact Us</h1>
        <p>We'd love to hear from you — whether for counselling, partnerships, or enquiries</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="grid-2" style="gap:48px;align-items:start;">
            <!-- FORM -->
            <div class="reveal-left">
                <h2 style="margin-bottom:8px;">Send Us a Message</h2>
                <p style="color:var(--text-muted);margin-bottom:32px;">
                    Fill out the form below and we'll get back to you as soon as possible.
                </p>
                <form method="POST" action="{{ url_for('contact') }}">
                    <div class="grid-2" style="gap:16px;">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" name="name" class="form-control" placeholder="Your name"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" class="form-control"
                                placeholder="your@email.com" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" name="subject" class="form-control"
                            placeholder="How can we help?">
                    </div>
                    <div class="form-group">
                        <label for="message">Message *</label>
                        <textarea id="message" name="message" class="form-control"
                            placeholder="Tell us more about your enquiry..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">
                        Send Message →
                    </button>
                </form>
            </div>

            <!-- INFO -->
            <div class="reveal-right">
                <h2 style="margin-bottom:8px;">Get in Touch</h2>
                <p style="color:var(--text-muted);margin-bottom:32px;">
                    Reach out through any of these channels.
                </p>
                <div class="card" style="margin-bottom:20px;">
                    <div class="card-body">
                        <div class="card-icon icon-teal">📍</div>
                        <h3 style="font-size:1rem;margin-bottom:8px;">Our Location</h3>
                        <p style="color:var(--text-muted);font-size:0.9rem;">
                            Ticia Counseling Centre Projects, <br>
                            Off Chilambula Road, Paul Kagame <br>
                            Corporate Mall Building, 2nd Floor <br>
                            C/O Box 3292 <br>
                            Blantyre. <br>
                            Lilongwe, Malawi<br>
                            +265994522097 \ +265992294905\ +265212522017 <br>
                        </p>
                    </div>
                </div>
                <div class="card" style="margin-bottom:20px;">
                    <div class="card-body">
                        <div class="card-icon icon-purple">🌍</div>
                        <h3 style="font-size:1rem;margin-bottom:8px;">Coverage</h3>
                        <p style="color:var(--text-muted);font-size:0.9rem;">
                            Northern, Central, and Southern regions<br>
                            Face-to-face and online services
                        </p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="card-icon icon-sage">🕐</div>
                        <h3 style="font-size:1rem;margin-bottom:8px;">Hours</h3>
                        <p style="color:var(--text-muted);font-size:0.9rem;">
                            Monday – Friday: 8:00 AM – 5:00 PM<br>
                            Emergency support available
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}