{% extends 'base.html' %}
{% block title %}Team{% endblock %}
{% block meta_desc %}Meet the TCCP leadership team — professionals in counselling, public health, and community development.{% 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);">Team</span></div>
        <h1>Our Team</h1>
        <p>A diverse team of professionals dedicated to mental health and community wellbeing</p>
    </div>
</section>

<!-- TEAM OVERVIEW -->
<section class="section">
    <div class="container">
        <div class="section-header reveal">
            <span class="label">Leadership</span>
            <h2>Meet Our Leadership</h2>
            <p>Guided by experienced professionals in counselling, public health, and social sciences</p>
            <div class="section-divider"></div>
        </div>
        <div class="grid-2" style="gap:32px;max-width:900px;margin:0 auto;">
            <div class="card reveal-left">
                <div class="card-body" style="text-align:center;padding:40px;">
                    <div style="width:100px;height:100px;border-radius:50%;margin:0 auto 20px;
                        background:linear-gradient(135deg,var(--deep-teal),var(--sage-green));
                        display:flex;align-items:center;justify-content:center;font-size:2.5rem;">
                        👩‍💼
                    </div>
                    <h3 style="margin-bottom:4px;">Ms. Patricia Singini</h3>
                    <div style="color:var(--deep-teal);font-size:0.85rem;font-weight:600;margin-bottom:14px;">
                        Executive Director
                    </div>
                    <p style="color:var(--text-muted);font-size:0.88rem;">
                        Providing strategic leadership in programme design, implementation,
                        and organisational growth.
                    </p>
                </div>
            </div>
            <div class="card reveal-right">
                <div class="card-body" style="text-align:center;padding:40px;">
                    <div style="width:100px;height:100px;border-radius:50%;margin:0 auto 20px;
                        background:linear-gradient(135deg,var(--rich-purple),var(--purple-light));
                        display:flex;align-items:center;justify-content:center;font-size:2.5rem;">
                        👨‍🎓
                    </div>
                    <h3 style="margin-bottom:4px;">Prof. Golden Msilimba</h3>
                    <div style="color:var(--rich-purple);font-size:0.85rem;font-weight:600;margin-bottom:14px;">
                        Board Chair
                    </div>
                    <p style="color:var(--text-muted);font-size:0.88rem;">
                        Providing governance oversight and strategic direction
                        for the organisation's mission and vision.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- TEAM STATS -->
<section class="section bg-dark">
    <div class="container">
        <div class="section-header reveal">
            <span class="label">Our People</span>
            <h2>A Growing Team of Experts</h2>
            <div class="section-divider"></div>
        </div>
        <div class="stats-row">
            <div class="stat-card reveal">
                <div class="stat-number counter" data-target="9">0</div>
                <div class="stat-label">Board Members</div>
            </div>
            <div class="stat-card reveal">
                <div class="stat-number counter" data-target="12">0</div>
                <div class="stat-label">Executive Members</div>
            </div>
            <div class="stat-card reveal">
                <div class="stat-number counter" data-target="53">0</div>
                <div class="stat-label">Volunteers</div>
            </div>
            <div class="stat-card reveal">
                <div class="stat-number" style="color:var(--sage-light);font-size:2rem;">Diverse</div>
                <div class="stat-label">Professional Backgrounds</div>
            </div>
        </div>
        <div class="reveal" style="text-align:center;margin-top:32px;">
            <p style="color:rgba(255,255,255,0.8);max-width:700px;margin:0 auto;font-size:0.95rem;">
                Our team includes professionals in counselling, public health, psychology,
                social sciences, management, programme design, monitoring & evaluation,
                and youth development.
            </p>
        </div>
    </div>
</section>

<!-- COMMITTEES -->
<section class="section">
    <div class="container">
        <div class="section-header reveal">
            <span class="label">Governance</span>
            <h2>Our Committees</h2>
            <p>Structured governance ensuring accountability and quality across all operations</p>
            <div class="section-divider"></div>
        </div>
        <div class="grid-3" style="gap:20px;">
            {% set committees = [
                ('🤝', 'Partnership Committee', 'Building and managing strategic partnerships with government, NGOs, and international organisations.'),
                ('📦', 'Procurement Committee', 'Ensuring transparent and efficient procurement processes for all organisational needs.'),
                ('📚', 'Research & Publication Ethics', 'Overseeing research standards, ethical considerations, and publication quality.'),
                ('✅', 'Quality Assurance Committee', 'Maintaining high standards in service delivery, training, and programme outcomes.'),
                ('💰', 'Finance Committee', 'Financial oversight, budgeting, and ensuring fiscal responsibility.')
            ] %}
            {% for icon, name, desc in committees %}
            <div class="value-card reveal" style="transition-delay:{{ loop.index * 0.1 }}s;">
                <div class="value-icon">{{ icon }}</div>
                <h3>{{ name }}</h3>
                <p>{{ desc }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- PARTNERS -->
<section class="section bg-lavender">
    <div class="container">
        <div class="section-header reveal">
            <span class="label">Partners</span>
            <h2>Working Partners</h2>
            <div class="section-divider"></div>
        </div>
        <div class="grid-3" style="gap:20px;">
            {% set partners = [
                ('🏛️', 'Ministry of Health', 'Mental Health & HIV/AIDS Departments'),
                ('👩‍👧', 'Ministry of Gender', 'Social Development'),
                ('📖', 'Ministry of Education', 'Inclusive Education'),
                ('🏥', 'Zomba Central Hospital', 'Clinical Partnership'),
                ('💚', 'Partners in Hope', 'Community Health'),
                ('🎓', 'Malawi Assoc. of Counsellors', 'Professional Standards'),
                ('🌍', 'HEARD Project (USAID)', 'University Research Co., LLC')
            ] %}
            {% for icon, name, sub in partners %}
            <div class="card reveal" style="transition-delay:{{ loop.index * 0.08 }}s;">
                <div class="card-body" style="text-align:center;padding:28px;">
                    <div style="font-size:2rem;margin-bottom:12px;">{{ icon }}</div>
                    <h3 style="font-size:0.95rem;">{{ name }}</h3>
                    <p style="font-size:0.82rem;color:var(--text-muted);margin-top:6px;">{{ sub }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="cta-section">
    <div class="container reveal">
        <h2>Join Our Team</h2>
        <p>We're always looking for passionate volunteers and partners to join our mission.</p>
        <a href="{{ url_for('contact') }}" class="btn">Get Involved →</a>
    </div>
</section>
{% endblock %}