<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}TCCP{% endblock %} — Ticia Counselling Centre Projects</title>
    <meta name="description"
        content="{% block meta_desc %}Ticia Counselling Centre Projects — Psychosocial support, counselling, and empowerment services in Malawi.{% endblock %}">
    <link rel="icon" href="{{ url_for('static', filename='images/logo.png') }}" type="image/png">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <nav class="navbar" id="navbar">
        <div class="nav-inner">
            <a href="{{ url_for('index') }}" class="nav-logo">
                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="TCCP Logo">
                <div class="nav-logo-text">
                    <span>TCCP</span>
                    <small>Counselling Centre</small>
                </div>
            </a>
            <ul class="nav-links" id="navLinks">
                <li><a href="{{ url_for('index') }}">Home</a></li>
                <li><a href="{{ url_for('about') }}">About</a></li>
                <li><a href="{{ url_for('services') }}">Services</a></li>
                <li><a href="{{ url_for('impact') }}">Impact</a></li>
                <li><a href="{{ url_for('team') }}">Team</a></li>
                <li><a href="{{ url_for('contact') }}" class="nav-cta">Contact Us</a></li>
            </ul>
            <button class="mobile-toggle" id="mobileToggle" aria-label="Menu">
                <span></span><span></span><span></span>
            </button>
        </div>
    </nav>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div style="position:fixed;top:78px;right:24px;z-index:9999;max-width:380px;">
        {% for cat, msg in messages %}
        <div class="flash flash-{{ cat }}">{{ msg }}</div>
        {% endfor %}
    </div>
    {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}

    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div>
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
                        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="TCCP" style="height:40px;">
                        <div>
                            <h4 style="margin-bottom:0;">TCCP</h4>
                            <div
                                style="font-size:0.68rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.4);">
                                Ticia Counselling Centre Projects
                            </div>
                        </div>
                    </div>
                    <p style="max-width:320px;">
                        An independent, non-profit organisation delivering psychosocial support,
                        mental health services, and capacity-building across all 28 districts of Malawi.
                    </p>
                </div>
                <div>
                    <h4>Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="{{ url_for('about') }}">About Us</a></li>
                        <li><a href="{{ url_for('services') }}">Our Services</a></li>
                        <li><a href="{{ url_for('impact') }}">Our Impact</a></li>
                        <li><a href="{{ url_for('team') }}">Our Team</a></li>
                        <li><a href="{{ url_for('contact') }}">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4>Core Areas</h4>
                    <ul class="footer-links">
                        <li><a href="{{ url_for('services') }}">Counselling</a></li>
                        <li><a href="{{ url_for('services') }}">Capacity Building</a></li>
                        <li><a href="{{ url_for('services') }}">Project Management</a></li>
                        <li><a href="{{ url_for('services') }}">Consultancies</a></li>
                    </ul>
                </div>
                <div>
                    <h4>Contact</h4>
                    <ul class="footer-links">
                        <li>Lilongwe, Malawi</li>
                        <li>Nationwide — 28 Districts</li>
                        <li style="margin-top:14px;">
                            <a href="{{ url_for('contact') }}" class="btn btn-sm"
                                style="border-color:rgba(255,255,255,0.3);color:rgba(255,255,255,0.7);">
                                Get in Touch
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                &copy; 2026 Ticia Counselling Centre Projects. All rights reserved.
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% block extra_js %}{% endblock %}
</body>

</html>