{% extends 'base.html' %}
{% block title %}Home{% endblock %}

{% block content %}
<!-- HERO — full screen background image with centered content -->
<section class="hero">
    <div class="hero-overlay">
        <div class="hero-content">
            <h1>Counselling to Transform Lives</h1>

            <p class="hero-sub">
                Providing quality psychosocial support, mental health services, and
                capacity-building interventions to empower vulnerable communities across Malawi.
            </p>

            <div class="hero-buttons">
                <a href="{{ url_for('about') }}" class="btn btn-filled">Discover Our Work</a>
                <a href="{{ url_for('contact') }}" class="btn">Get in Touch</a>
            </div>

            {% if quote and quote.text %}
            <div class="hero-quote">
                <blockquote>"{{ quote.text }}"</blockquote>
                {% if quote.author %}
                <cite>— {{ quote.author }}</cite>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- SPLIT — about section with large image -->
<section class="section">
    <div class="split">
        <div class="split-text container">
            <span class="section-label">About TCCP</span>
            <h2>Strengthening Communities Since 2017</h2>
            <p>
                TCCP is an independent, non-governmental, non-profit organisation addressing
                gaps in community mental health counselling through psychosocial support,
                counselling, and empowerment services.
            </p>
            <p>
                Based in Lilongwe with approval to operate in all 28 districts of Malawi,
                we serve vulnerable and marginalised groups — including youth, women,
                disaster survivors, and GBV survivors.
            </p>
            <a href="{{ url_for('about') }}" class="btn" style="margin-top:12px;">About Us</a>
        </div>
        <div class="split-image">
            <img src="{{ url_for('static', filename='images/school.png') }}" alt="TCCP in action">
        </div>
    </div>
</section>


<!-- LATEST FROM TCCP — 3 image cards like the inspiration -->
<section class="section">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-label">Latest</span>
            <h2>Our Work in Action</h2>
        </div>
        <div class="grid-3">
            <div class="img-card reveal">
                <div class="img-card-image">
                    <img src="{{ url_for('static', filename='images/card-counselling.png') }}"
                        alt="Counselling services">
                    <span class="img-card-tag tag-teal">Counselling</span>
                </div>
                <div class="img-card-body">
                    <h3>Professional Counselling Services</h3>
                    <p>One-on-one and group counselling for stress, trauma, depression, and anxiety across all regions.
                    </p>
                    <a href="{{ url_for('services') }}" class="img-card-link">Learn more →</a>
                </div>
            </div>
            <div class="img-card reveal">
                <div class="img-card-image">
                    <img src="{{ url_for('static', filename='images/school.png') }}" alt="Training workshops">
                    <span class="img-card-tag tag-purple">Training</span>
                </div>
                <div class="img-card-body">
                    <h3>Capacity Building Workshops</h3>
                    <p>Training 1,000+ facilitators in mental health counselling, safeguarding, and psychological first
                        aid.</p>
                    <a href="{{ url_for('impact') }}" class="img-card-link">View impact →</a>
                </div>
            </div>
            <div class="img-card reveal">
                <div class="img-card-image">
                    <img src="{{ url_for('static', filename='images/card-community.png') }}" alt="Community outreach">
                    <span class="img-card-tag tag-sage">Community</span>
                </div>
                <div class="img-card-body">
                    <h3>Community Empowerment</h3>
                    <p>Youth and women empowerment programmes building confidence, skills, and resilience.</p>
                    <a href="{{ url_for('services') }}" class="img-card-link">Read more →</a>
                </div>
            </div>
        </div>
        <div style="text-align:center;margin-top:40px;" class="reveal">
            <a href="{{ url_for('services') }}" class="btn">All Services</a>
        </div>
    </div>
</section>

<!-- IN FOCUS — large image cards, 2 columns -->
<section class="section bg-grey">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-label">In focus</span>
            <h2>Focus Areas</h2>
        </div>
        <div class="grid-2">
            <div class="img-card reveal">
                <div class="img-card-image" style="height:280px;">
                    <img src="{{ url_for('static', filename='images/about-bg.png') }}" alt="Mental health awareness">
                    <span class="img-card-tag tag-teal">Mental Health</span>
                </div>
                <div class="img-card-body">
                    <h3>Mental Health & Psychosocial Support</h3>
                    <p>Comprehensive MHPSS services for individuals and communities, addressing stigma and providing
                        accessible care across 28 districts.</p>
                    <a href="{{ url_for('services') }}" class="img-card-link">Learn more →</a>
                </div>
            </div>
            <div class="img-card reveal">
                <div class="img-card-image" style="height:280px;">
                    <img src="{{ url_for('static', filename='images/services-bg.png') }}" alt="Disaster response">
                    <span class="img-card-tag tag-purple">Disaster Response</span>
                </div>
                <div class="img-card-body">
                    <h3>Crisis Intervention & Disaster Support</h3>
                    <p>Psychological first aid for survivors of Cyclones Ana and Fred across Blantyre, Chikwawa, Nsanje,
                        Mulanje, and Zomba.</p>
                    <a href="{{ url_for('impact') }}" class="img-card-link">View impact →</a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- STATS -->
<section class="section bg-dark">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">Our Reach</span>
            <h2>Making a Difference Across Malawi</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">Counsellors Trained</div>
            </div>
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="28">0</div>
                <div class="stat-label">Districts Covered</div>
            </div>
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="53" data-suffix="+">0</div>
                <div class="stat-label">Active Volunteers</div>
            </div>
            <div class="stat-item reveal">
                <div class="stat-number counter" data-target="7">0</div>
                <div class="stat-label">Key Partners</div>
            </div>
        </div>
    </div>
</section>

<!-- VALUES -->
<section class="section">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">Our Values</span>
            <h2>What Drives Us</h2>
        </div>
        <div class="grid-3">
            {% set values = [
            ('Teamwork & Diversity', 'Embracing diverse perspectives to deliver inclusive, culturally sensitive
            services.'),
            ('Integrity & Innovation', 'Upholding the highest standards while innovating our approaches to mental health
            care.'),
            ('Social Justice & Equality', 'Ensuring equitable access to mental health services for all communities.'),
            ('Impact Maximisation', 'Delivering measurable, sustainable outcomes that transform lives.'),
            ('Ethical Practice', 'Maintaining professional ethics in every counselling interaction.'),
            ('Counselling to Transform', 'Empowering individuals through professional counselling for lasting growth.')
            ] %}
            {% for title, desc in values %}
            <div class="feature-card reveal">
                <h3>{{ title }}</h3>
                <p>{{ desc }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- PARTNERS -->
<section class="section-sm bg-grey">
    <div class="container">
        <div class="section-header centered reveal">
            <span class="section-label">Partners</span>
            <h2>Working Together</h2>
        </div>
        <div class="partners-strip reveal">
            <span class="partner-tag">Ministry of Health</span>
            <span class="partner-tag">Ministry of Gender</span>
            <span class="partner-tag">Ministry of Education</span>
            <span class="partner-tag">Zomba Central Hospital</span>
            <span class="partner-tag">Partners in Hope</span>
            <span class="partner-tag">Malawi Assoc. of Counsellors</span>
            <span class="partner-tag">HEARD Project (USAID)</span>
        </div>
    </div>
</section>

<!-- CTA — split with rounded image -->
<section class="section">
    <div class="split" style="background:var(--off-white);">
        <div class="split-text">
            <h2>Together we can make a difference</h2>
            <p>
                Whether you need counselling support, want to partner with us,
                or wish to contribute to our mission — we'd love to hear from you.
            </p>
            <a href="{{ url_for('contact') }}" class="btn" style="margin-top:8px;">Contact Us</a>
        </div>
        <div style="padding:40px;display:flex;justify-content:center;">
            <div class="split-image rounded" style="width:360px;height:360px;">
                <img src="{{ url_for('static', filename='images/card-counselling.png') }}" alt="Get in touch">
            </div>
        </div>
    </div>
</section>
{% endblock %}