{% extends 'base.html' %}

{% block content %}
<!-- Programs Hero Section -->
<div class="container-fluid bg-primary text-white py-5">
    <div class="container">
        <h1 class="display-4">Our Programs</h1>
        <p class="lead">Making a difference through targeted initiatives</p>
    </div>
</div>

<!-- Education Program Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Education</h2>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="/static/images/education.jpg" alt="Education Program" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h3 class="mt-4 mt-lg-0">Adopt a Child Program</h3>
                <p>Our Education Program is committed to transforming the future of young minds in Rabai through access to quality education. We focus on sponsorship and scholarship opportunities to support bright but underprivileged students.</p>
                <div class="card bg-light mt-3">
                    <div class="card-body">
                        <h5 class="card-title">How It Works</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-primary me-2"></i> Identification of eligible students</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Matching with sponsors</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Regular progress updates</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Mentorship opportunities</li>
                        </ul>
                    </div>
                </div>
                <a href="#" class="btn btn-primary mt-3">Support a Child</a>
            </div>
        </div>
    </div>
</section>

<!-- Livelihood Program Section -->
<section class="bg-light py-5">
    <div class="container">
        <h2 class="mb-4">Livelihood and Economic Impact</h2>
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-2">
                <img src="/static/images/livelihood.jpg" alt="Livelihood Program" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6 order-lg-1">
                <h3 class="mt-4 mt-lg-0">Farmers' SACCO Initiative</h3>
                <p>Our Livelihood Program focuses on enhancing economic resilience and financial sustainability through agricultural support and business development.</p>
                <div class="card bg-light mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Program Benefits</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-danger me-2"></i> Access to affordable credit</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Agricultural training</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Market access support</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Financial management training</li>
                        </ul>
                    </div>
                </div>
                <a href="#" class="btn btn-primary mt-3">Join SACCO</a>
            </div>
        </div>
    </div>
</section>

<!-- WASH Program Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Water, Hygiene and Sanitation</h2>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="/static/images/wash.jpg" alt="WASH Program" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h3 class="mt-4 mt-lg-0">Community Health Initiatives</h3>
                <p>Our WASH Program improves community health through access to clean water, better sanitation facilities, and hygiene education.</p>
                <div class="row g-3 mt-2">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">Water Access</h5>
                                <p class="card-text">Distribution of water tanks to women's groups and community centers.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">Health Education</h5>
                                <p class="card-text">Regular workshops and awareness campaigns on hygiene practices.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Social Justice Section -->
<section class="bg-light py-5">
    <div class="container">
        <h2 class="mb-4">Social Justice and Inclusivity</h2>
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-2">
                <img src="/static/images/social-justice.jpg" alt="Social Justice Program" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6 order-lg-1">
                <h3 class="mt-4 mt-lg-0">Advocacy and Empowerment</h3>
                <p>Our Social Justice Program promotes equality, equity, and empowerment of marginalized communities through advocacy and capacity building.</p>
                <div class="card bg-light mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Focus Areas</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-primary me-2"></i> Gender equality</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Youth empowerment</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Disability rights</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Community advocacy</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Climate Change Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Climate Change and Environment</h2>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="/static/images/climate.jpg" alt="Climate Program" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h3 class="mt-4 mt-lg-0">Environmental Conservation</h3>
                <p>Our Climate Change Program focuses on environmental sustainability and building community resilience through conservation efforts.</p>
                <div class="row g-3 mt-2">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">Reforestation</h5>
                                <p class="card-text">Community-led tree planting and forest restoration initiatives.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">Sustainable Agriculture</h5>
                                <p class="card-text">Training in climate-smart agricultural practices.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}