{% extends 'base.html' %}
{% block title %}Impact{% 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);">Impact</span></div>
        <h1>Our Impact</h1>
        <p>Transforming lives and strengthening communities across Malawi</p>
    </div>
</section>

<!-- ACHIEVEMENTS with image cards -->
<section class="section">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-label">Achievements</span>
            <h2>Key Achievements</h2>
            <p>Milestones that demonstrate our commitment to mental health in Malawi</p>
        </div>
        <div class="grid-3">
            <div class="img-card reveal">
                <div class="img-card-image">
                    <img src="{{ url_for('static', filename='images/card-community.png') }}" alt="Disaster response">
                    <span class="img-card-tag tag-teal">Disaster Response</span>
                </div>
                <div class="img-card-body">
                    <h3>Cyclone Survivors Support</h3>
                    <p>Implemented MHPSS for survivors of Cyclones Ana and Fred across Blantyre, Chikwawa, Nsanje, Mulanje, and Zomba.</p>
                </div>
            </div>
            <div class="img-card reveal">
                <div class="img-card-image">
                    <img src="{{ url_for('static', filename='images/card-training.png') }}" alt="Training">
                    <span class="img-card-tag tag-purple">Training</span>
                </div>
                <div class="img-card-body">
                    <h3>1,000+ Counsellors Trained</h3>
                    <p>Trained close to 1,000 participants in mental health counselling face-to-face and online from all regions.</p>
                </div>
            </div>
            <div class="img-card reveal">
                <div class="img-card-image">
                    <img src="{{ url_for('static', filename='images/hero-bg.png') }}" alt="School programs">
                    <span class="img-card-tag tag-sage">Schools</span>
                </div>
                <div class="img-card-body">
                    <h3>School Health Programs</h3>
                    <p>Awareness sessions on mental health, relationships, academic performance, and substance abuse at schools.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- MORE ACHIEVEMENTS -->
<section class="section bg-grey">
    <div class="container">
        <div class="grid-2" style="gap:28px;">
            <div class="feature-card reveal" style="border-left:3px solid var(--teal);">
                <h3>Back to School Campaigns</h3>
                <p style="color:var(--text-light);">
                    Supported displaced students in Naotcha Primary and Kapeni Demonstration Schools,
                    addressing stigma and reintegration challenges after natural disasters.
                </p>
            </div>
            <div class="feature-card reveal" style="border-left:3px solid var(--purple);">
                <h3>Inmates Psychosocial Support</h3>
                <p style="color:var(--text-light);">
                    Regular support at Chichiri (5 days per week), and monthly at Bvumbwe, Mulanje,
                    Mwanza, Makande, Chikwawa, Nsanje, Zomba Central, Mikuyu 1 & 2, and Domasi.
                </p>
            </div>
            <div class="feature-card reveal" style="border-left:3px solid var(--sage);">
                <h3>Facilitators Database</h3>
                <p style="color:var(--text-light);">
                    Established a database of psychosocial and mental health facilitators who respond
                    to emergency and crisis situations across the country.
                </p>
            </div>
            <div class="feature-card reveal" style="border-left:3px solid var(--teal);">
                <h3>Nationwide Coverage</h3>
                <p style="color:var(--text-light);">
                    Operating across all 28 districts, serving Northern, Central, and Southern regions
                    with both face-to-face and online services.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- STATS -->
<section class="section bg-dark">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">By The Numbers</span>
            <h2>Our Impact in Numbers</h2>
        </div>
        <div class="stats-row">
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="1000" data-suffix="+">0</div>
                <div class="stat-label">People Trained</div>
            </div>
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="28">0</div>
                <div class="stat-label">Districts Reached</div>
            </div>
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="12" data-suffix="+">0</div>
                <div class="stat-label">Prison Facilities</div>
            </div>
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="7">0</div>
                <div class="stat-label">Partner Organisations</div>
            </div>
        </div>
    </div>
</section>

<!-- STRATEGIC DIRECTION — split with image -->
<section class="section">
    <div class="split">
        <div class="split-text container">
            <span class="section-label">Strategy</span>
            <h2>Strategic Direction</h2>
            <p>
                Apart from the health model, TCCP embraces a social model of offering counselling
                and psychotherapy services. Our strategic principles focus on diversifying income streams,
                using counselling income to support free services, documenting impact to attract donors,
                and building long-term relationships.
            </p>
            <a href="{{ url_for('contact') }}" class="btn" style="margin-top:8px;">Partner With Us</a>
        </div>
        <div class="split-image">
            <img src="{{ url_for('static', filename='images/card-counselling.png') }}" alt="Strategic growth">
        </div>
    </div>
</section>

<!-- FUNDING -->
<section class="section-sm bg-grey">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">Sustainability</span>
            <h2>Funding Strategy</h2>
        </div>
        <div class="grid-3">
            <div class="feature-card reveal">
                <h3>Diversified Income</h3>
                <p>Sustained through grants, fee-for-service counselling, individual donations, and corporate partnerships.</p>
            </div>
            <div class="feature-card reveal">
                <h3>Social Model</h3>
                <p>Using counselling income to support free services for vulnerable populations who cannot afford help.</p>
            </div>
            <div class="feature-card reveal">
                <h3>Long-term Partnerships</h3>
                <p>Documenting impact to attract donors and build lasting relationships with development partners.</p>
            </div>
        </div>
    </div>
</section>

<section class="cta-section">
    <div class="container reveal">
        <h2>Support Our Impact</h2>
        <p>Help us reach more communities and transform more lives across Malawi.</p>
        <a href="{{ url_for('contact') }}" class="btn">Partner With Us</a>
    </div>
</section>
{% endblock %}