import os

HEADER = """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The DISC Initiatives - {title}</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="images/DISC_LOGO.png">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        html {{ scroll-behavior: smooth; }}
        .hero-bg {{
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1593113565694-c6ce19a3b2b4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
        }}
        .hero-bg-small {{
            background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
        }}
    </style>
</head>
<body class="font-sans text-gray-800 antialiased flex flex-col min-h-screen">

    <!-- Navigation -->
    <nav class="bg-white shadow-md fixed w-full z-50 top-0">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20">
                <div class="flex items-center">
                    <a href="index.html">
                        <img src="images/DISC_ECE_2.png" alt="DISC Initiatives" class="h-16 object-contain" onerror="this.src='images/DISC_LOGO.png'; this.onerror=null;">
                    </a>
                </div>
                <!-- Desktop Menu -->
                <div class="hidden lg:flex items-center space-x-6">
                    <a href="index.html" class="text-gray-600 hover:text-green-600 font-medium {active_home}">Home</a>
                    <a href="about.html" class="text-gray-600 hover:text-green-600 font-medium {active_about}">About Us</a>
                    <a href="programmes.html" class="text-gray-600 hover:text-green-600 font-medium {active_programmes}">Programmes</a>
                    <a href="projects.html" class="text-gray-600 hover:text-green-600 font-medium {active_projects}">Projects</a>
                    <a href="contact.html" class="text-gray-600 hover:text-green-600 font-medium {active_contact}">Contact</a>
                    <a href="contact.html#donate" class="bg-green-600 text-white px-5 py-2 rounded-md font-semibold hover:bg-green-700 transition">Donate</a>
                </div>
                <!-- Mobile menu button -->
                <div class="flex items-center lg:hidden">
                    <button id="mobile-menu-btn" class="text-gray-600 hover:text-green-600 focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden lg:hidden bg-white border-t mt-20 fixed w-full z-40 shadow-md">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.html" class="block px-3 py-2 text-gray-600 hover:text-green-600 font-medium">Home</a>
                <a href="about.html" class="block px-3 py-2 text-gray-600 hover:text-green-600 font-medium">About Us</a>
                <a href="programmes.html" class="block px-3 py-2 text-gray-600 hover:text-green-600 font-medium">Programmes</a>
                <a href="projects.html" class="block px-3 py-2 text-gray-600 hover:text-green-600 font-medium">Projects</a>
                <a href="contact.html" class="block px-3 py-2 text-gray-600 hover:text-green-600 font-medium">Contact</a>
            </div>
        </div>
    </nav>
"""

FOOTER = """
    <!-- Footer -->
    <footer class="bg-gray-900 text-white pt-16 pb-8 mt-auto">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
                <div>
                    <img src="images/DISC_ECE_WHITE.png" alt="DISC Initiatives" class="h-16 mb-6 object-contain" onerror="this.src='images/DISC_LOGO.png'; this.onerror=null;">
                    <p class="text-gray-400 mb-6">Discover Your Potential, Be Powerful. Enabling, promoting, and connecting local champions in Kenya since 2008.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-6">Quick Links</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="index.html" class="hover:text-green-400 transition">Home</a></li>
                        <li><a href="about.html" class="hover:text-green-400 transition">About Us</a></li>
                        <li><a href="programmes.html" class="hover:text-green-400 transition">Programmes</a></li>
                        <li><a href="projects.html" class="hover:text-green-400 transition">Projects</a></li>
                        <li><a href="contact.html" class="hover:text-green-400 transition">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-6">Contact Us</h3>
                    <ul class="space-y-4 text-gray-400">
                        <li class="flex items-start">
                            <i class="fas fa-phone mt-1 mr-3 text-green-500"></i>
                            <span>+254 796 206825</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-envelope mt-1 mr-3 text-green-500"></i>
                            <span>info@discinitiatives.org</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-500"></i>
                            <span>Nairobi, Kenya</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-6">Volunteer</h3>
                    <p class="text-gray-400 mb-4">Becoming a volunteer isn't just about giving back—it's about learning new skills and making networks.</p>
                    <a href="contact.html" class="inline-block px-4 py-2 bg-green-600 text-white font-bold rounded hover:bg-green-700 transition">Join Us Today</a>
                </div>
            </div>
            <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
                <p>&copy; 2026 The DISC Initiatives. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {{
            var menu = document.getElementById('mobile-menu');
            if (menu.classList.contains('hidden')) {{
                menu.classList.remove('hidden');
            }} else {{
                menu.classList.add('hidden');
            }}
        }});
    </script>
</body>
</html>
"""

def generate_page(filename, title, active_tab, content):
    tabs = ['home', 'about', 'programmes', 'projects', 'contact']
    format_args = {'title': title}
    for tab in tabs:
        format_args[f'active_{tab}'] = 'text-green-600' if tab == active_tab else ''
        
    page_html = HEADER.format(**format_args) + content + FOOTER.format()
    with open(filename, 'w') as f:
        f.write(page_html)

# --- INDEX HTML ---
index_content = """
    <section class="hero-bg h-screen flex items-center justify-center text-center">
        <div class="max-w-4xl px-4 sm:px-6 lg:px-8 text-white mt-16">
            <h1 class="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">Empowering Communities.<br>Building Sustainable Futures.</h1>
            <p class="text-lg md:text-xl mb-10 text-gray-200">Our message will not be clear if the voice of youth is missing. Our journey will be long and in vain if the youth are all not coming with us. Let's tell the world of African youth potential.</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                <a href="contact.html#donate" class="bg-green-600 text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-green-700 transition">Support Our Work</a>
                <a href="projects.html" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-white hover:text-green-700 transition">Explore Our Projects</a>
            </div>
        </div>
    </section>

    <!-- Brief About -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-10">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Welcome to DISC Initiatives</h2>
                <div class="w-24 h-1 bg-green-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600 mb-6">Founded in 2008 as a renaissance of the Donyo youths, we have evolved in search of community empowerment and transformation through enabling and promoting communities for change across Kenya.</p>
                <a href="about.html" class="text-green-600 font-bold hover:text-green-800">Read Our Story <i class="fas fa-arrow-right ml-2"></i></a>
            </div>
        </div>
    </section>
    
    <!-- Impact Stats -->
    <section id="impact" class="py-16 bg-green-700 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center mb-12">Our Impact</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="p-4">
                    <div class="text-4xl font-extrabold mb-2" data-target="15000">0</div>
                    <div class="text-green-200">Communities Reached</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-extrabold mb-2" data-target="5000">0</div>
                    <div class="text-green-200">Youth Empowered</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-extrabold mb-2" data-target="100000">0</div>
                    <div class="text-green-200">Trees Planted</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-extrabold mb-2" data-target="120">0</div>
                    <div class="text-green-200">Water Projects</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Partners -->
    <section class="py-16 bg-white border-t border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-bold text-center text-gray-900 mb-12">Our Partners & Beneficiaries</h2>
            <div class="flex flex-wrap justify-center items-center gap-10 md:gap-16">
                <img src="images/LEAPFROG.jpg" alt="Leapfrog" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/UNIVERSITY_OF_PASSAU.jpg" alt="University of Passau" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/ELIMU_EV.jpg" alt="Elimu EV" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/CIRCLE4LIFE.jpg" alt="Circle4Life" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/TGF.png" alt="TGF" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/S.A.V.I_Initiative.jpg" alt="S.A.V.I Initiative" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/HAMSHA_TECHNOLOGY_SOLUTION.png" alt="Hamsha Technology Solution" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/FEE0.jpg" alt="FEE0" class="h-16 md:h-20 object-contain mix-blend-multiply">
                <img src="images/Allan_Aquarums.jpg" alt="Allan Aquariums" class="h-16 md:h-20 object-contain mix-blend-multiply">
            </div>
        </div>
    </section>

    <script>
        const counters = document.querySelectorAll('[data-target]');
        const speed = 200;
        const animateCounters = () => {
            counters.forEach(counter => {
                const updateCount = () => {
                    const target = +counter.getAttribute('data-target');
                    const count = +counter.innerText.replace(/,/g, '');
                    const inc = target / speed;
                    if (count < target) {
                        counter.innerText = Math.ceil(count + inc).toLocaleString();
                        setTimeout(updateCount, 10);
                    } else {
                        counter.innerText = target.toLocaleString() + '+';
                    }
                };
                updateCount();
            });
        };
        let animated = false;
        window.addEventListener('scroll', () => {
            const impactSection = document.getElementById('impact');
            if(impactSection) {
                const rect = impactSection.getBoundingClientRect();
                if(rect.top < window.innerHeight && !animated) {
                    animated = true;
                    animateCounters();
                }
            }
        });
    </script>
"""
generate_page('index.html', 'Home', 'home', index_content)

# --- ABOUT HTML ---
about_content = """
    <div class="hero-bg-small pt-32 pb-20 text-center text-white mt-10">
        <h1 class="text-4xl md:text-5xl font-bold">About Us</h1>
    </div>

    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Story</h2>
                    <div class="w-16 h-1 bg-green-600 mb-6"></div>
                    <p class="text-gray-600 mb-4">The DISC Initiatives was founded in 2008 as a renaissance of the Donyo youths in collaboration with Charles Ochieng. Its establishment was founded on the basis of responding to the youth unemployment culture.</p>
                    <p class="text-gray-600 mb-4">Over time, we have slowly evolved and scaled in search of community empowerment and transformation through enabling and promoting communities for change across Kenya.</p>
                    <p class="text-gray-600">Today, our work spans education, environmental conservation, water security, youth development, research, livelihoods, and institutional capacity strengthening.</p>
                </div>
                <div class="bg-white p-8 rounded-lg shadow-md border-t-4 border-green-600">
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Our Mission</h3>
                    <p class="text-gray-600 mb-6">To empower our community by helping the youth to discover their potential and to improve community wellbeing through education, innovation, and environmental stewardship.</p>
                    
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Our Vision</h3>
                    <p class="text-gray-600">A future where empowered communities lead sustainable development and create opportunities for every individual to thrive.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Values -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900">Our Core Values</h2>
                <div class="w-16 h-1 bg-green-600 mx-auto mt-4"></div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-6 text-center">
                <div class="p-4 bg-gray-50 rounded"><i class="fas fa-shield-alt text-3xl text-green-600 mb-3"></i><h4 class="font-bold">Integrity</h4></div>
                <div class="p-4 bg-gray-50 rounded"><i class="fas fa-chart-line text-3xl text-green-600 mb-3"></i><h4 class="font-bold">Accountability</h4></div>
                <div class="p-4 bg-gray-50 rounded"><i class="fas fa-lightbulb text-3xl text-green-600 mb-3"></i><h4 class="font-bold">Innovation</h4></div>
                <div class="p-4 bg-gray-50 rounded"><i class="fas fa-users text-3xl text-green-600 mb-3"></i><h4 class="font-bold">Inclusion</h4></div>
                <div class="p-4 bg-gray-50 rounded"><i class="fas fa-leaf text-3xl text-green-600 mb-3"></i><h4 class="font-bold">Sustainability</h4></div>
                <div class="p-4 bg-gray-50 rounded"><i class="fas fa-handshake text-3xl text-green-600 mb-3"></i><h4 class="font-bold">Partnership</h4></div>
            </div>
        </div>
    </section>

    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Leadership</h2>
            <div class="w-24 h-1 bg-green-600 mx-auto mb-12"></div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded shadow-sm">
                    <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center text-gray-500"><i class="fas fa-user text-3xl"></i></div>
                    <h3 class="text-lg font-bold text-gray-900">Charles Ochieng</h3>
                    <p class="text-green-600 text-sm">Founder, DISC Initiatives</p>
                </div>
                <div class="bg-white p-6 rounded shadow-sm">
                    <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center text-gray-500"><i class="fas fa-user text-3xl"></i></div>
                    <h3 class="text-lg font-bold text-gray-900">Mohammed Mshangama</h3>
                    <p class="text-green-600 text-sm">Board Member / IT Specialist</p>
                </div>
                <div class="bg-white p-6 rounded shadow-sm">
                    <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center text-gray-500"><i class="fas fa-user text-3xl"></i></div>
                    <h3 class="text-lg font-bold text-gray-900">Silvester Ochieng</h3>
                    <p class="text-green-600 text-sm">Board Member / Director - TGF</p>
                </div>
                <div class="bg-white p-6 rounded shadow-sm">
                    <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center text-gray-500"><i class="fas fa-user text-3xl"></i></div>
                    <h3 class="text-lg font-bold text-gray-900">Vincent Were Juma</h3>
                    <p class="text-green-600 text-sm">Board Member / AO Chair</p>
                </div>
                <div class="bg-white p-6 rounded shadow-sm">
                    <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center text-gray-500"><i class="fas fa-user text-3xl"></i></div>
                    <h3 class="text-lg font-bold text-gray-900">Victor Muindi</h3>
                    <p class="text-green-600 text-sm">Finance Manager</p>
                </div>
                <div class="bg-white p-6 rounded shadow-sm">
                    <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center text-gray-500"><i class="fas fa-user text-3xl"></i></div>
                    <h3 class="text-lg font-bold text-gray-900">Emmanuel Juniour</h3>
                    <p class="text-green-600 text-sm">Communication Officer</p>
                </div>
            </div>
        </div>
    </section>
"""
generate_page('about.html', 'About Us', 'about', about_content)

# --- PROGRAMMES HTML ---
programmes_content = """
    <div class="hero-bg-small pt-32 pb-20 text-center text-white mt-10">
        <h1 class="text-4xl md:text-5xl font-bold">What We Do</h1>
    </div>

    <!-- G-Raise Highlight -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <div class="lg:w-1/2">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">G-Raise Mentorship Program</h2>
                    <div class="w-24 h-1 bg-green-600 mb-6"></div>
                    <p class="text-gray-600 mb-4">The DISC G-Raise accelerator program aims at supporting community-based early-phase social impact ventures — known to us as <strong>LOCAL CHAMPIONS</strong>. We support those who are motivated and enthusiastic with solutions to local problems in Kenya's disadvantaged communities.</p>
                    <p class="text-gray-600 mb-6">Through our extensive selection processes and live-in bootcamps (like the recent 5-day camp at Donyo Sabuk National Park), we focus on peer-to-peer support, regional scale-up across Machakos, Busia, and Mombasa, and providing ecosystem linkages.</p>
                    
                    <div class="space-y-6">
                        <div class="flex">
                            <div class="flex-shrink-0 mt-1"><div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600 font-bold">1</div></div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-gray-900">ENABLE</h4>
                                <p class="text-gray-600 mt-1">We support selected ventures through incubation programs and live-in sessions, refining business models and equipping local champions to operate as viable social enterprises.</p>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="flex-shrink-0 mt-1"><div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600 font-bold">2</div></div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-gray-900">PROMOTE</h4>
                                <p class="text-gray-600 mt-1">Businesses are supported with targeted mentorship, localized resources, and startup financing options to execute their community-driven social-economic models.</p>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="flex-shrink-0 mt-1"><div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600 font-bold">3</div></div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-gray-900">CONNECT</h4>
                                <p class="text-gray-600 mt-1">We link these champions to broader ecosystems, ensuring a continuous peer-to-peer support system for robust growth and potential external financing opportunities.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2 w-full">
                    <img src="images/report/img_p1_1.jpeg" alt="G-Raise Mentorship Youth Cohort" class="rounded-lg shadow-xl w-full object-cover mb-4">
                    <div class="grid grid-cols-2 gap-4">
                        <img src="images/report/img_p8_5.jpeg" alt="Camp Details" class="rounded-lg shadow w-full h-32 object-cover">
                        <img src="images/report/img_p9_2.jpeg" alt="Mentorship Groups" class="rounded-lg shadow w-full h-32 object-cover">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Programmes -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Core Focus Areas</h2>
                <div class="w-24 h-1 bg-green-600 mx-auto"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100">
                    <i class="fas fa-users text-4xl text-green-600 mb-4"></i>
                    <h3 class="text-xl font-bold mb-3 text-gray-900">Community Development</h3>
                    <p class="text-gray-600">Strengthening local leadership, governance, participation, and community ownership.</p>
                </div>
                <div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100">
                    <i class="fas fa-book-open text-4xl text-green-600 mb-4"></i>
                    <h3 class="text-xl font-bold mb-3 text-gray-900">Education</h3>
                    <p class="text-gray-600">Improving access to quality education, mentorship, leadership development, and lifelong learning.</p>
                </div>
                <div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100">
                    <i class="fas fa-child text-4xl text-green-600 mb-4"></i>
                    <h3 class="text-xl font-bold mb-3 text-gray-900">Youth Empowerment</h3>
                    <p class="text-gray-600">Building confident, skilled, innovative, and resilient young leaders.</p>
                </div>
                <div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100">
                    <i class="fas fa-hand-holding-water text-4xl text-green-600 mb-4"></i>
                    <h3 class="text-xl font-bold mb-3 text-gray-900">Water & Climate</h3>
                    <p class="text-gray-600">Improving water access while building climate-resilient communities.</p>
                </div>
                <div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100">
                    <i class="fas fa-leaf text-4xl text-green-600 mb-4"></i>
                    <h3 class="text-xl font-bold mb-3 text-gray-900">Environmental Conservation</h3>
                    <p class="text-gray-600">Protecting ecosystems through conservation, restoration, and environmental education.</p>
                </div>
                <div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100">
                    <i class="fas fa-lightbulb text-4xl text-green-600 mb-4"></i>
                    <h3 class="text-xl font-bold mb-3 text-gray-900">Research & Innovation</h3>
                    <p class="text-gray-600">Generating evidence-based solutions that improve development outcomes.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Priorities -->
    <section class="py-16 bg-green-700 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-8">Our Funding Priorities</h2>
            <div class="flex flex-wrap justify-center gap-4">
                <span class="px-6 py-2 bg-green-800 rounded-full font-semibold border border-green-600">Education</span>
                <span class="px-6 py-2 bg-green-800 rounded-full font-semibold border border-green-600">Economic & Family Empowerment</span>
                <span class="px-6 py-2 bg-green-800 rounded-full font-semibold border border-green-600">Climate Change</span>
                <span class="px-6 py-2 bg-green-800 rounded-full font-semibold border border-green-600">Health</span>
                <span class="px-6 py-2 bg-green-800 rounded-full font-semibold border border-green-600">Water Access</span>
                <span class="px-6 py-2 bg-green-800 rounded-full font-semibold border border-green-600">Food Security</span>
            </div>
        </div>
    </section>
"""
generate_page('programmes.html', 'Programmes', 'programmes', programmes_content)

# --- PROJECTS HTML ---
projects_content = """
    <div class="hero-bg-small pt-32 pb-20 text-center text-white mt-10">
        <h1 class="text-4xl md:text-5xl font-bold">Our Projects & Impact</h1>
    </div>

    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Featured Initiatives</h2>
                <div class="w-24 h-1 bg-green-600 mx-auto"></div>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">Addressing critical needs through sustainable, community-led action. Here are some of our ongoing and completed projects.</p>
            </div>
            
            <div class="space-y-12">
                
                <!-- Project 0: G-Raise Report Details -->
                <div class="bg-white rounded-lg overflow-hidden shadow flex flex-col md:flex-row-reverse">
                    <div class="md:w-1/3 bg-gray-200 min-h-[250px] bg-cover bg-center" style="background-image: url('images/report/img_p10_1.jpeg')"></div>
                    <div class="md:w-2/3 p-8">
                        <div class="uppercase tracking-wide text-sm text-yellow-500 font-bold mb-1">Youth Empowerment</div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">G-Raise 2021 Cohorts</h3>
                        <p class="text-gray-600 mb-4">As detailed in our most recent program report, we conducted an intensive 5-day live-in mentorship camp at Donyo Sabuk National Park. 5 additional local champions were integrated into our ecosystem, participating in peer-to-peer learning with a focus on resolving social-economic challenges through localized enterprises in Machakos, Busia, and Mombasa.</p>
                        <a href="programmes.html" class="text-yellow-600 font-semibold hover:text-yellow-700">Learn about our framework &rarr;</a>
                    </div>
                </div>

                <!-- Project 1 -->
                <div class="bg-white rounded-lg overflow-hidden shadow flex flex-col md:flex-row">
                    <div class="md:w-1/3 bg-gray-200 min-h-[250px] bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1599059813005-11265ba4b4ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')"></div>
                    <div class="md:w-2/3 p-8">
                        <div class="uppercase tracking-wide text-sm text-green-600 font-bold mb-1">Economic Empowerment</div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">#BWMProgram (Table Banking)</h3>
                        <p class="text-gray-600 mb-4">Awarding 3rd phase grants to 50 Self Help groups drawn in Bwiri ward/Location to foster economic empowerment and family financial stability.</p>
                        <a href="#" class="text-green-600 font-semibold hover:text-green-800">Learn more &rarr;</a>
                    </div>
                </div>

                <!-- Project 2 -->
                <div class="bg-white rounded-lg overflow-hidden shadow flex flex-col md:flex-row-reverse">
                    <div class="md:w-1/3 bg-gray-200 min-h-[250px] bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1581093458791-9f3c3900df4b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')"></div>
                    <div class="md:w-2/3 p-8">
                        <div class="uppercase tracking-wide text-sm text-blue-500 font-bold mb-1">Water & Research</div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Water Project Studies</h3>
                        <p class="text-gray-600 mb-4">Conducting baseline surveys and focused group discussions with water actors to establish sustainable financing models for water access worldwide.</p>
                        <a href="#" class="text-blue-500 font-semibold hover:text-blue-700">Learn more &rarr;</a>
                    </div>
                </div>

                <!-- Project 3 -->
                <div class="bg-white rounded-lg overflow-hidden shadow flex flex-col md:flex-row">
                    <div class="md:w-1/3 bg-gray-200 min-h-[250px] bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')"></div>
                    <div class="md:w-2/3 p-8">
                        <div class="uppercase tracking-wide text-sm text-yellow-500 font-bold mb-1">Education</div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Elimu Bwiri Mashinani</h3>
                        <p class="text-gray-600 mb-4">Mobilising school lockers, school desks, teacher cabinets, and teacher chairs for 8 schools drawn from Hakati and Namuduru sub locations to advance rural education infrastructure.</p>
                        <a href="#" class="text-yellow-600 font-semibold hover:text-yellow-700">Learn more &rarr;</a>
                    </div>
                </div>

            </div>
        </div>
    </section>
"""
generate_page('projects.html', 'Projects', 'projects', projects_content)

# --- CONTACT HTML ---
contact_content = """
    <div class="hero-bg-small pt-32 pb-20 text-center text-white mt-10">
        <h1 class="text-4xl md:text-5xl font-bold">Get In Touch & Get Involved</h1>
    </div>

    <section class="py-20 bg-gray-50 flex-grow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
                <!-- Contact Info -->
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">Contact Us Now</h2>
                    <p class="text-gray-600 mb-8">Whether you're looking to partner, volunteer, support our work, or learn more about our programmes, our team is ready to connect.</p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                                <i class="fas fa-phone text-xl"></i>
                            </div>
                            <div class="ml-4 pt-1">
                                <h4 class="text-lg font-bold text-gray-900">Call Us</h4>
                                <p class="text-gray-600">+254 796 206825</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                                <i class="fas fa-envelope text-xl"></i>
                            </div>
                            <div class="ml-4 pt-1">
                                <h4 class="text-lg font-bold text-gray-900">Email Us</h4>
                                <p class="text-gray-600">info@discinitiatives.org</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                                <i class="fas fa-map-marker-alt text-xl"></i>
                            </div>
                            <div class="ml-4 pt-1">
                                <h4 class="text-lg font-bold text-gray-900">Location</h4>
                                <p class="text-gray-600">Nairobi, Kenya</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form -->
                <div class="bg-white p-8 rounded-lg shadow-md border border-gray-100">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Send a Message</h3>
                    <form onsubmit="event.preventDefault(); alert('Message sent successfully!');">
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Full Name</label>
                            <input class="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-green-500" id="name" type="text" placeholder="John Doe" required>
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email Address</label>
                            <input class="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-green-500" id="email" type="email" placeholder="john@example.com" required>
                        </div>
                        <div class="mb-6">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="message">Message</label>
                            <textarea class="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-green-500 h-32" id="message" placeholder="How can we help?" required></textarea>
                        </div>
                        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded focus:outline-none focus:shadow-outline transition" type="submit">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Get Involved & Donate -->
    <section id="donate" class="py-20 bg-green-700 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 text-center md:text-left">
                <div>
                    <h3 class="text-3xl font-bold mb-4">Become A Volunteer</h3>
                    <p class="text-green-100 mb-6 text-lg">Becoming a volunteer isn't just about giving back to your community. It's also about learning new skills, making lifelong networks, and being part of the world's biggest entrepreneurship network striving for a safe, peaceful, business self-oriented world.</p>
                    <button class="bg-white text-green-700 font-bold py-3 px-8 rounded hover:bg-gray-100 transition shadow">Apply to Volunteer</button>
                </div>
                <div>
                    <h3 class="text-3xl font-bold mb-4">Support Our Cause</h3>
                    <p class="text-green-100 mb-6 text-lg">100% of your donation funds clean water, education, and economic empowerment. 785 million people lack basic access to clean and safe drinking water. We're on a mission to change that.</p>
                    <button class="bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded hover:bg-yellow-400 transition shadow">Donate Now</button>
                </div>
            </div>
        </div>
    </section>
"""
generate_page('contact.html', 'Contact & Get Involved', 'contact', contact_content)

