{% extends 'base.html' %}
{% block title %}About Us{% 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);">About</span></div>
        <h1>About TCCP</h1>
        <p>An independent, non-profit organisation dedicated to mental health since 2017</p>
    </div>
</section>

<!-- INTRO with image -->
<section class="section">
    <div class="split">
        <div class="split-text container">
            <span class="section-label">Our Story</span>
            <h2>Who We Are</h2>
            <p>
                Ticia Counselling Centre Projects (TCCP) is an independent, non-governmental,
                non-profit organisation established in 2017. Started as Ticia Counselling Centre,
                registered as a sole proprietor on 22nd June 2020, we upgraded to a limited company
                on 22nd June 2022 to address gaps in community mental health counselling.
            </p>
            <p>
                Officially registered in January 2026 under the Trustees Incorporation Rules,
                CONGOMA, the Medical Council of Malawi, NGORA and Malawi Revenue Authority,
                TCCP headquarters is in Lilongwe and operates nationwide.
            </p>
            <a href="{{ url_for('services') }}" class="btn" style="margin-top:8px;">Our Services</a>
        </div>
        <div class="split-image">
            <img src="{{ url_for('static', filename='images/about-bg.png') }}" alt="TCCP community work">
        </div>
    </div>
</section>

<!-- MISSION & VISION -->
<section class="section bg-grey">
    <div class="container">
        <div class="grid-2" style="gap:32px;">
            <div class="feature-card reveal">
                <span class="section-label" style="margin-bottom:16px;">Mission</span>
                <h3 style="font-size:1.2rem;margin-bottom:14px;">Our Mission</h3>
                <p>
                    To contribute to stronger communities by creatively providing psychosocial support,
                    early intervention, treatment, and resilience with integrity.
                </p>
            </div>
            <div class="feature-card reveal">
                <span class="section-label" style="border-color:var(--purple);color:var(--purple);margin-bottom:16px;">Vision</span>
                <h3 style="font-size:1.2rem;margin-bottom:14px;">Our Vision</h3>
                <p>
                    To be the preferred, trusted, and accessible community counselling project promoting
                    wellness among children, adults, and families, while innovatively transforming
                    justice-involved services.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- MANDATE -->
<section class="section">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">Our Mandate</span>
            <h2>What We Stand For</h2>
            <p>
                TCCP is mandated to deliver quality psychosocial support, mental health services,
                and capacity-building interventions that enhance the wellbeing and resilience of
                vulnerable populations while strengthening community and institutional systems in Malawi.
            </p>
        </div>
        <div class="grid-3">
            <div class="feature-card reveal">
                <h3>Collaboration</h3>
                <p>Working with government ministries, councils, and NGOs for holistic community impact.</p>
            </div>
            <div class="feature-card reveal">
                <h3>Stakeholder Engagement</h3>
                <p>Approval processes and community buy-in before programme implementation.</p>
            </div>
            <div class="feature-card reveal">
                <h3>M&amp;E Accountability</h3>
                <p>Continuous monitoring, evaluation, and reporting to ensure transparency.</p>
            </div>
        </div>
    </div>
</section>

<!-- OBJECTIVES with large image -->
<section class="section bg-grey">
    <div class="split">
        <div style="padding:40px;display:flex;justify-content:center;">
            <div class="split-image rounded" style="width:400px;height:400px;">
                <img src="{{ url_for('static', filename='images/card-counselling.png') }}" alt="TCCP counselling">
            </div>
        </div>
        <div class="split-text container">
            <span class="section-label">Objectives</span>
            <h2>Driving Change</h2>
            <ul style="list-style:none;margin-top:12px;">
                {% set objectives = [
                    'Provide accessible, professional counselling services promoting mental well-being and social stability.',
                    'Deliver emotional and psychological support for stress, trauma, depression, and anxiety.',
                    'Promote mental health awareness and reduce stigma around counselling.',
                    'Collaborate with schools, organisations, and communities to strengthen conflict resolution.',
                    'Provide crisis intervention and psychosocial support to disaster survivors.',
                    'Deliver HIV/AIDS awareness, counselling, and support services.'
                ] %}
                {% for obj in objectives %}
                <li style="padding:8px 0;color:var(--text-light);font-size:0.9rem;border-bottom:1px solid var(--light-grey);">
                    {{ obj }}
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>

<!-- TIMELINE -->
<section class="section">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">Our Journey</span>
            <h2>Milestones</h2>
        </div>
        <div class="timeline">
            {% set milestones = [
                ('2017', 'TCCP founded as Ticia Counselling Centre, beginning our journey to address mental health gaps in Malawi.'),
                ('2020', 'Registered as sole proprietor (MBRS 1062401) on 22nd June 2020, formalising operations.'),
                ('2022', 'Upgraded to a limited company on 22nd June 2022, expanding capacity and reach.'),
                ('2026', 'Officially registered under Trustees Incorporation Rules, CONGOMA, Medical Council of Malawi, NGORA and MRA. Operating in all 28 districts.')
            ] %}
            {% for year, desc in milestones %}
            <div class="timeline-item reveal">
                <div class="timeline-dot" {% if loop.index is even %}style="background:var(--purple);"{% endif %}></div>
                <div class="timeline-content">
                    <div class="timeline-year" {% if loop.index is even %}style="color:var(--purple);"{% endif %}>{{ year }}</div>
                    <p style="margin-top:8px;color:var(--text-light);font-size:0.88rem;">{{ desc }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="cta-section">
    <div class="container reveal">
        <h2>Join Our Mission</h2>
        <p>Partner with us to create stronger, more resilient communities across Malawi.</p>
        <a href="{{ url_for('contact') }}" class="btn">Get in Touch</a>
    </div>
</section>
{% endblock %}