At Grantera, we bridge the gap between generous donors and communities in need. Our unique approach leverages existing community networks to ensure funding reaches the grassroots level with maximum impact and transparency.
                        </p>
                        <ul class="mission-points">
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <div class="mission-point-content">
                                    <h4>Community-Driven Approach</h4>
                                    <p>We work with local leaders who understand their communities' real needs</p>
                                </div>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <div class="mission-point-content">
                                    <h4>Transparent Impact Tracking</h4>
                                    <p>Every donor can see exactly how their contribution makes a difference</p>
                                </div>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <div class="mission-point-content">
                                    <h4>Sustainable Solutions</h4>
                                    <p>We focus on long-term empowerment, not just immediate relief</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="mission-image" id="missionImageContainer">
                        <!-- Replace this placeholder with your actual image -->
                        <!-- To add your image: Upload to images/ folder via cPanel and replace src below -->
                        <img src="images/mission-photo.jpg" alt="Our Mission" style="display: none;">
                        <div id="missionPlaceholder">
                            <i class="fas fa-image" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.6;"></i>
                            <p><strong>Mission Image</strong><br><small>Upload 'mission-photo.jpg' to images/ folder via cPanel</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Areas of Impact -->
        <section class="areas-section" id="impact">
            <div class="container">
                <h2>Areas of Impact</h2>
                <p class="areas-description">
                    Our work spans multiple sectors, addressing the most pressing needs in our communities
                </p>
                <div class="areas-grid">
                    <div class="area-card">
                        <div class="area-icon"><i class="fas fa-heart"></i></div>
                        <h3>Healthcare Access</h3>
                        <p>Connecting rural communities with essential medical services and supplies</p>
                    </div>
                    <div class="area-card">
                        <div class="area-icon"><i class="fas fa-graduation-cap"></i></div>
                        <h3>Education Support</h3>
                        <p>Funding schools, teachers, and educational resources in underserved areas</p>
                    </div>
                    <div class="area-card">
                        <div class="area-icon"><i class="fas fa-chart-line"></i></div>
                        <h3>Economic Empowerment</h3>
                        <p>Supporting small businesses and income-generating activities</p>
                    </div>
                    <div class="area-card">
                        <div class="area-icon"><i class="fas fa-globe-africa"></i></div>
                        <h3>Community Development</h3>
                        <p>Infrastructure projects that benefit entire communities</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Where We Work -->
        <section class="countries-section" id="where-we-work">
            <div class="container">
                <h2>Where We Work</h2>
                <p class="countries-description">
                    Operating across four countries in West and Central Africa, reaching communities where help is needed most
                </p>
                <div class="countries-grid">
                    <div class="country-card">
                        <div class="country-flag">NG</div>
                        <div class="country-name">Nigeria</div>
                        <div class="country-communities">
                            <i class="fas fa-map-marker-alt"></i>
                            <span id="nigeriaCommunities">180 Communities</span>
                        </div>
                    </div>
                    <div class="country-card">
                        <div class="country-flag">BJ</div>
                        <div class="country-name">Benin</div>
                        <div class="country-communities">
                            <i class="fas fa-map-marker-alt"></i>
                            <span id="beninCommunities">120 Communities</span>
                        </div>
                    </div>
                    <div class="country-card">
                        <div class="country-flag">GH</div>
                        <div class="country-name">Ghana</div>
                        <div class="country-communities">
                            <i class="fas fa-map-marker-alt"></i>
                            <span id="ghanaCommunities">95 Communities</span>
                        </div>
                    </div>
                    <div class="country-card">
                        <div class="country-flag">CM</div>
                        <div class="country-name">Cameroon</div>
                        <div class="country-communities">
                            <i class="fas fa-map-marker-alt"></i>
                            <span id="cameroonCommunities">105 Communities</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Testimonial -->
        <section class="testimonial-section">
            <div class="container">
                <div class="testimonial-card">
                    <div class="quote-icon">"</div>
                    <p class="testimonial-text">
                        Grantera didn't just provide funding – they understood our community's unique needs and helped us implement solutions that truly work for our people.
                    </p>
                    <div class="testimonial-author">Aminat Okafor</div>
                    <div class="testimonial-title">Community Leader, Lagos State</div>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="cta-section">
            <div class="container">
                <h2>Ready to Make Real Impact?</h2>
                <p class="cta-description">
                    Join us in ensuring that charitable funding reaches the communities that need it most
                </p>
                <div class="cta-buttons">
                    <button class="btn-cta-primary" onclick="openModal('communityModal')">Become a Partner</button>
                    <button class="btn-cta-secondary" onclick="openModal('supportModal')">Support Our Work</button>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div class="logo">
                        <i class="fas fa-heart"></i>
                        Grantera
                    </div>
                    <p>Connecting donors to grassroots impact across West and Central Africa through community networks and transparent funding.</p>
                </div>
                
                <div class="footer-section">
                    <h4>Contact Us</h4>
                    <p>info@grantera.org</p>
                    <p>+234 (0) 123 456 7890</p>
                </div>
                
                <div class="footer-section">
                    <h4>Our Countries</h4>
                    <div class="countries-list">
                        <div class="country-item">
                            <span>NG</span>
                            <span>Nigeria</span>
                        </div>
                        <div class="country-item">
                            <span>BJ</span>
                            <span>Benin</span>
                        </div>
                        <div class="country-item">
                            <span>GH</span>
                            <span>Ghana</span>
                        </div>
                        <div class="country-item">
                            <span>CM</span>
                            <span>Cameroon</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2025 Grantera. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Support Our Work Modal -->
    <div id="supportModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('supportModal')">&times;</span>
            <h2><i class="fas fa-heart"></i> Support Our Work</h2>
            <div class="message" id="supportMessage"></div>
            
            <form id="supportForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="supporterFirstName">First Name</label>
                        <input type="text" id="supporterFirstName" required>
                    </div>
                    <div class="form-group">
                        <label for="supporterLastName">Last Name</label>
                        <input type="text" id="supporterLastName" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="supporterOccupation">Occupation</label>
                    <input type="text" id="supporterOccupation" required placeholder="e.g., Teacher, Engineer, Student">
                </div>
                
                <div class="form-group">
                    <label for="supporterState">State</label>
                    <select id="supporterState" required>
                        <option value="">Select your state</option>
                        <option value="abia">Abia</option>
                        <option value="adamawa">Adamawa</option>
                        <option value="akwa-ibom">Akwa Ibom</option>
                        <option value="anambra">Anambra</option>
                        <option value="bauchi">Bauchi</option>
                        <option value="bayelsa">Bayelsa</option>
                        <option value="benue">Benue</option>
                        <option value="borno">Borno</option>
                        <option value="cross-river">Cross River</option>
                        <option value="delta">Delta</option>
                        <option value="ebonyi">Ebonyi</option>
                        <option value="edo">Edo</option>
                        <option value="ekiti">Ekiti</option>
                        <option value="enugu">Enugu</option>
                        <option value="gombe">Gombe</option>
                        <option value="imo">Imo</option>
                        <option value="jigawa">Jigawa</option>
                        <option value="kaduna">Kaduna</option>
                        <option value="kano">Kano</option>
                        <option value="katsina">Katsina</option>
                        <option value="kebbi">Kebbi</option>
                        <option value="kogi">Kogi</option>
                        <option value="kwara">Kwara</option>
                        <option value="lagos">Lagos</option>
                        <option value="nasarawa">Nasarawa</option>
                        <option value="niger">Niger</option>
                        <option value="ogun">Ogun</option>
                        <option value="ondo">Ondo</option>
                        <option value="osun">Osun</option>
                        <option value="oyo">Oyo</option>
                        <option value="plateau">Plateau</option>
                        <option value="rivers">Rivers</option>
                        <option value="sokoto">Sokoto</option>
                        <option value="taraba">Taraba</option>
                        <option value="yobe">Yobe</option>
                        <option value="zamfara">Zamfara</option>
                        <option value="fct">FCT Abuja</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="supportAmount">Support Amount</label>
                    <input type="text" id="supportAmount" value="₦5,000" readonly>
                    <small style="color: #666; font-size: 0.9rem;">Fixed amount for all supporters</small>
                </div>
                
                <div class="form-group">
                    <label for="supportAccountNumber">Your Account Number</label>
                    <input type="text" id="supportAccountNumber" readonly placeholder="Will be generated automatically">
                    <small style="color: #666; font-size: 0.9rem;">Unique account number will be assigned</small>
                </div>
                
                <button type="submit" class="btn-primary" style="width: 100%;">
                    <span id="generateSupportBtn">Generate My Support Account</span>
                    <span id="supportLoadingSpinner" class="loading" style="display: none;"></span>
                </button>
            </form>

            <!-- Payment Information Section -->
            <div id="supportPaymentSection" style="display: none;">
                <div class="payment-info">
                    <h4><i class="fas fa-university"></i> Your Support Payment Details</h4>
                    <p>Thank you for supporting our work! Here are your payment details:</p>
                    <div class="account-details">
                        <div class="account-detail-row">
                            <div>
                                <strong>Your Account Number:</strong><br>
                                <span id="supportAccountDisplay" style="font-size: 1.2rem; font-weight: 600; color: #006750;">-</span>
                            </div>
                            <button class="copy-btn" onclick="copyToClipboard('supportAccountDisplay')">Copy</button>
                        </div>
                        <div class="account-detail-row">
                            <div>
                                <strong>Support Amount:</strong><br>
                                <span style="font-size: 1.1rem; color: #28a745; font-weight: 600;">₦5,000</span>
                            </div>
                        </div>
                        <div class="account-detail-row">
                            <div>
                                <strong>Bank:</strong><br>
                                <span id="supportBankName">-</span>
                            </div>
                        </div>
                        <div class="account-detail-row">
                            <div>
                                <strong>Account Name:</strong><br>
                                <span id="supportAccountName">-</span>
                            </div>
                        </div>
                        <div class="account-detail-row">
                            <div>
                                <strong>Reference:</strong><br>
                                <span id="supportPaymentReference">-</span>
                            </div>
                            <button class="copy-btn" onclick="copyToClipboard('supportPaymentReference')">Copy</button>
                        </div>
                    </div>
                    <div class="payment-note">
                        <i class="fas fa-heart"></i>
                        Please transfer exactly ₦5,000 to complete your support. Thank you for making a difference!
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Community Registration Modal -->
    <div id="communityModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('communityModal')">&times;</span>
            <h2><i class="fas fa-users"></i> Partner With Us</h2>
            <div class="message" id="communityMessage"></div>
            
            <form id="communityForm">
                <div class="form-group">
                    <label for="communityName">Community/Organization Name</label>
                    <input type="text" id="communityName" required>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="leaderFirstName">Leader First Name</label>
                        <input type="text" id="leaderFirstName" required>
                    </div>
                    <div class="form-group">
                        <label for="leaderLastName">Leader Last Name</label>
                        <input type="text" id="leaderLastName" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="leaderEmail">Leader Email</label>
                    <input type="email" id="leaderEmail" required>
                </div>
                
                <div class="form-group">
                    <label for="leaderPhone">Leader Phone</label>
                    <input type="tel" id="leaderPhone" required>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="communityCountry">Country</label>
                        <select id="communityCountry" required>
                            <option value="">Select Country</option>
                            <option value="nigeria">Nigeria</option>
                            <option value="benin">Benin</option>
                            <option value="ghana">Ghana</option>
                            <option value="cameroon">Cameroon</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="communityState">State/Region</label>
                        <input type="text" id="communityState" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="communityAddress">Community Address</label>
                    <textarea id="communityAddress" rows="3" required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="communitySize">Community Size</label>
                    <select id="communitySize" required>
                        <option value="">Select size</option>
                        <option value="small">Small (Under 500 people)</option>
                        <option value="medium">Medium (500 - 2,000 people)</option>
                        <option value="large">Large (2,000 - 10,000 people)</option>
                        <option value="very-large">Very Large (Over 10,000 people)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="primaryNeeds">Primary Needs</label>
                    <select id="primaryNeeds" required>
                        <option value="">Select primary need</option>
                        <option value="healthcare">Healthcare Access</option>
                        <option value="education">Education Support</option>
                        <option value="economic">Economic Empowerment</option>
                        <option value="community">Community Development</option>
                        <option value="water">Clean Water & Sanitation</option>
                        <option value="infrastructure">Infrastructure</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="communityDescription">Tell us about your community and needs</label>
                    <textarea id="communityDescription" rows="4" placeholder="Describe your community, current challenges, and how partnerships would help..." required></textarea>
                </div>
                
                <button type="submit" class="btn-primary" style="width: 100%;">
                    Submit Partnership Application
                </button>
            </form>
        </div>
    </div>

    <!-- Admin Panel -->
    <div class="admin-panel">
        <button class="admin-toggle" onclick="toggleAdminMenu()">
            <i class="fas fa-cog"></i> Admin
        </button>
        <div class="admin-menu" id="adminMenu">
            <button onclick="showAdminLogin()">
                <i class="fas fa-sign-in-alt"></i> Admin Login
            </button>
            <div id="adminLoggedInMenu" style="display: none;">
                <button onclick="openContentEditor()">
                    <i class="fas fa-edit"></i> Edit Website Text
                </button>
                <button onclick="openImageManager()">
                    <i class="fas fa-image"></i> Manage Images
                </button>
                <button onclick="viewSupporters()">
                    <i class="fas fa-heart"></i> View Supporters
                </button>
                <button onclick="viewCommunities()">
                    <i class="fas fa-users"></i> View Communities
                </button>
                <button onclick="openPasswordChange()">
                    <i class="fas fa-key"></i> Change Password
                </button>
                <button onclick="adminLogout()" style="color: #dc3545;">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </button>
            </div>
        </div>
    </div>

    <!-- Admin Login Modal -->
    <div id="adminLoginModal" class="modal">
        <div class="modal-content" style="max-width: 400px;">
            <span class="close" onclick="closeModal('adminLoginModal')">&times;</span>
            <h2><i class="fas fa-shield-alt"></i> Admin Login</h2>
            <div class="message" id="adminLoginMessage"></div>
            
            <form id="adminLoginForm">
                <div class="form-group">
                    <label for="adminEmail">Email</label>
                    <input type="email" id="adminEmail" required>
                </div>
                
                <div class="form-group">
                    <label for="adminPassword">Password</label>
                    <input type="password" id="adminPassword" required>
                </div>
                
                <button type="submit" class="btn-primary" style="width: 100%;">
                    Login as Admin
                </button>
            </form>
            
            <div style="margin-top: 1rem; padding: 1rem; background: #e9f7f5; border-radius: 8px; font-size: 0.9rem;">
                <strong>Default Admin Credentials:</strong><br>
                Email: admin@grantera.org<br>
                Password: grantera2025<br>
                <small style="color: #666;">Please change these immediately after first login!</small>
            </div>
        </div>
    </div>

    <!-- Password Change Modal -->
    <div id="passwordChangeModal" class="modal">
        <div class="modal-content" style="max-width: 400px;">
            <span class="close" onclick="closeModal('passwordChangeModal')">&times;</span>
            <h2><i class="fas fa-key"></i> Change Admin Password</h2>
            <div class="message" id="passwordMessage"></div>
            
            <form id="passwordChangeForm">
                <div class="form-group">
                    <label for="currentPassword">Current Password</label>
                    <input type="password" id="currentPassword" required>
                </div>
                
                <div class="form-group">
                    <label for="newPassword">New Password</label>
                    <input type="password" id="newPassword" required minlength="8">
                    <small style="color: #666;">Must be at least 8 characters</small>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">Confirm New Password</label>
                    <input type="password" id="confirmPassword" required>
                </div>
                
                <button type="submit" class="btn-primary" style="width: 100%;">
                    Update Password
                </button>
            </form>
        </div>
    </div>

    <!-- Content Editor Modal -->
    <div id="contentEditorModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('contentEditorModal')">&times;</span>
            <h2><i class="fas fa-edit"></i> Edit Website Content</h2>
            <div class="message" id="contentMessage"></div>
            
            <div style="margin-bottom: 2rem;">
                <h3>Hero Section</h3>
                <div class="form-group">
                    <label for="heroTitle">Main Title</label>
                    <input type="text" id="heroTitle" value="Connecting Donors to Grassroots Impact">
                </div>
                <div class="form-group">
                    <label for="heroSubtitle">Subtitle</label>
                    <input type="text" id="heroSubtitle" value="Empowering Communities Across West & Central Africa">
                </div>
                <div class="form-group">
                    <label for="heroDescription">Description</label>
                    <textarea id="heroDescription" rows="3">We ensure that charitable funding reaches those who need it most by working through existing community networks across Benin, Nigeria, Ghana, and Cameroon.</textarea>
                </div>
            </div>

            <div style="margin-bottom: 2rem;">
                <h3>Mission Section</h3>
                <div class="form-group">
                    <label for="missionText">Mission Statement</label>
                    <textarea id="missionText" rows="4">At Grantera, we bridge the gap between generous donors and communities in need. Our unique approach leverages existing community networks to ensure funding reaches the grassroots level with maximum impact and transparency.</textarea>
                </div>
            </div>

            <div style="margin-bottom: 2rem;">
                <h3>Contact Information</h3>
                <div class="form-row">
                    <div class="form-group">
                        <label for="contactEmail">Email</label>
                        <input type="email" id="contactEmail" value="info@grantera.org">
                    </div>
                    <div class="form-group">
                        <label for="contactPhone">Phone</label>
                        <input type="tel" id="contactPhone" value="+234 (0) 123 456 7890">
                    </div>
                </div>
            </div>
            
            <button onclick="saveContent()" class="btn-primary" style="width: 100%;">
                Save Changes
            </button>
        </div>
    </div>

    <!-- Image Manager Modal -->
    <div id="imageManagerModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('imageManagerModal')">&times;</span>
            <h2><i class="fas fa-image"></i> Image Management</h2>
            <div class="message" id="imageManagerMessage"></div>
            
            <div style="background: #e9f7f5; padding: 2rem; border-radius: 10px; margin-bottom: 2rem;">
                <h3 style="color: #006750; margin-bottom: 1rem;">
                    <i class="fas fa-info-circle"></i> How to Add Images
                </h3>
                
                <div style="margin-bottom: 1.5rem;">
                    <h4>Step 1: Upload via Namecheap cPanel</h4>
                    <ol style="margin-left: 1.5rem; color: #666;">
                        <li>Login to your Namecheap cPanel</li>
                        <li>Click "File Manager"</li>
                        <li>Navigate to "public_html" folder</li>
                        <li>Create "images" folder if it doesn't exist</li>
                        <li>Upload your images to the "images" folder</li>
                    </ol>
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <h4>Step 2: Image Specifications</h4>
                    <ul style="margin-left: 1.5rem; color: #666;">
                        <li><strong>Mission Image:</strong> Name it "mission-photo.jpg" (recommended: 800x600px)</li>
                        <li><strong>Supported formats:</strong> JPG, PNG, WebP</li>
                        <li><strong>File size:</strong> Under 2MB for fast loading</li>
                    </ul>
                </div>
                
                <div>
                    <h4>Step 3: Test Your Images</h4>
                    <p style="color: #666;">After uploading, your mission image should automatically appear on the website. If not, check that the filename matches exactly: <code style="background: white; padding: 2px 5px; border-radius: 3px;">mission-photo.jpg</code></p>
                </div>
            </div>
            
            <div style="background: white; border: 2px dashed #a8e6cf; padding: 2rem; border-radius: 10px; text-align: center;">
                <i class="fas fa-folder-open" style="font-size: 3rem; color: #006750; margin-bottom: 1rem;"></i>
                <h4 style="color: #006750; margin-bottom: 1rem;">Current Image Status</h4>
                <div id="imageStatus">
                    <p style="color: #666;">Mission Image: <span id="missionImageStatus" style="color: orange;">Not Found</span></p>
                    <small style="color: #666;">Upload "mission-photo.jpg" to images/ folder to display</small>
                </div>
                <button onclick="checkImageStatus()" class="btn-secondary" style="margin-top: 1rem;">
                    Check Image Status
                </button>
            </div>
        </div>
    </div>

    <script>
        // Monify Configuration - REPLACE WITH YOUR ACTUAL MONIFY API DETAILS
        const MONIFY_CONFIG = {
            apiKey: 'YOUR_MONIFY_API_KEY', // Replace with your actual Monify API key
            contractCode: 'YOUR_MONIFY_CONTRACT_CODE', // Replace with your actual contract code
            baseUrl: 'https://api.monnify.com', // Production URL for live environment
            // For testing, use: 'https://sandbox-api.monnify.com'
        };

        // Global variables
        let isAdminLoggedIn = false;
        let adminCredentials = {
            email: 'admin@grantera.org',
            password: 'grantera2025'
        };

        // Load admin credentials from Firebase or use defaults
        async function loadAdminCredentials() {
            try {
                const querySnapshot = await window.firebase.getDocs(
                    window.firebase.collection(window.firebase.db, 'admin_settings')
                );
                
                if (!querySnapshot.empty) {
                    const doc = querySnapshot.docs[0];
                    const data = doc.data();
                    if (data.email && data.password) {
                        adminCredentials = data;
                    }
                }
            } catch (error) {
                console.log('Using default admin credentials');
            }
        }

        // Save admin credentials to Firebase
        async function saveAdminCredentials(email, password) {
            try {
                // First, try to update existing credentials
                const querySnapshot = await window.firebase.getDocs(
                    window.firebase.collection(window.firebase.db, 'admin_settings')
                );
                
                if (!querySnapshot.empty) {
                    const doc = querySnapshot.docs[0];
                    await window.firebase.updateDoc(doc.ref, {
                        email: email,
                        password: password,
                        updatedAt: new Date()
                    });
                } else {
                    // Create new credentials document
                    await window.firebase.addDoc(
                        window.firebase.collection(window.firebase.db, 'admin_settings'),
                        {
                            email: email,
                            password:<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grantera - Connecting Donors to Grassroots Impact</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
    
    <!-- Firebase SDK (Firestore only, no Storage) -->
    <script type="module">
        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
        import { getFirestore, collection, addDoc, getDocs, query, where, orderBy, updateDoc, doc, onSnapshot } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
        import { getAuth, signInAnonymously } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js';

        // Firebase Configuration - Replace with your actual config
        const firebaseConfig = {
            apiKey: "YOUR_FIREBASE_API_KEY",
            authDomain: "grantera-ngo.firebaseapp.com",
            projectId: "grantera-ngo", 
            storageBucket: "grantera-ngo.appspot.com",
            messagingSenderId: "123456789",
            appId: "1:123456789:web:abcdef123456"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        const auth = getAuth(app);

        // Make Firebase available globally (no storage)
        window.firebase = { db, auth, collection, addDoc, getDocs, query, where, orderBy, updateDoc, doc, onSnapshot, signInAnonymously };
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            padding: 1rem 0;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 600;
            color: #006750;
        }

        .logo i {
            background: #006750;
            color: white;
            padding: 8px;
            border-radius: 50%;
            margin-right: 10px;
            font-size: 1rem;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: #666;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #006750;
        }

        .support-btn {
            background: #006750;
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            cursor: pointer;
        }

        .support-btn:hover {
            background: #004d3c;
            transform: translateY(-2px);
        }

        /* Main Content */
        main {
            margin-top: 80px;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9f7f5 100%);
            padding: 4rem 0;
            text-align: center;
        }

        .hero-subtitle {
            color: #006750;
            font-size: 1rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }

        .hero-description {
            font-size: 1.1rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto 2.5rem;
            line-height: 1.6;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-primary, .btn-secondary {
            padding: 1rem 2rem;
            border: 2px solid #006750;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: #006750;
            color: white;
        }

        .btn-primary:hover {
            background: #004d3c;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: transparent;
            color: #006750;
        }

        .btn-secondary:hover {
            background: #006750;
            color: white;
        }

        /* Stats Section */
        .stats-section {
            background: linear-gradient(135deg, #006750 0%, #004d3c 100%);
            color: white;
            padding: 3rem 0;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }

        .stat-card {
            text-align: center;
            padding: 1rem;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #a8e6cf;
        }

        .stat-label {
            font-size: 1rem;
            opacity: 0.9;
        }

        /* Mission Section */
        .mission-section {
            padding: 4rem 0;
            background: white;
        }

        .mission-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .mission-text h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #006750;
            margin-bottom: 1.5rem;
        }

        .mission-description {
            font-size: 1.1rem;
            color: #666;
            line-height: 1.7;
            margin-bottom: 2rem;
        }

        .mission-points {
            list-style: none;
        }

        .mission-points li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
            padding-left: 0;
        }

        .mission-points i {
            color: #006750;
            margin-right: 1rem;
            margin-top: 0.25rem;
            font-size: 1.1rem;
        }

        .mission-point-content h4 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.25rem;
        }

        .mission-point-content p {
            color: #666;
            font-size: 0.95rem;
        }

        .mission-image {
            background: linear-gradient(135deg, #e9f7f5 0%, #d1f0e6 100%);
            height: 400px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #006750;
            font-size: 1.1rem;
            text-align: center;
            border: 2px solid #a8e6cf;
            overflow: hidden;
        }

        .mission-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 13px;
        }

        /* Areas Section */
        .areas-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9f7f5 100%);
            padding: 4rem 0;
        }

        .areas-section h2 {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: #006750;
            margin-bottom: 1rem;
        }

        .areas-description {
            text-align: center;
            color: #666;
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 3rem;
        }

        .areas-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .area-card {
            background: white;
            padding: 2.5rem 2rem;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0,103,80,0.1);
            transition: all 0.3s;
            border: 1px solid #e9f7f5;
        }

        .area-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,103,80,0.15);
        }

        .area-icon {
            font-size: 2.5rem;
            color: #006750;
            margin-bottom: 1.5rem;
            display: inline-block;
            padding: 1rem;
            background: #e9f7f5;
            border-radius: 50%;
        }

        .area-card h3 {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1rem;
        }

        .area-card p {
            color: #666;
            line-height: 1.6;
        }

        /* Countries Section */
        .countries-section {
            background: white;
            padding: 4rem 0;
        }

        .countries-section h2 {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: #006750;
            margin-bottom: 1rem;
        }

        .countries-description {
            text-align: center;
            color: #666;
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 3rem;
        }

        .countries-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .country-card {
            background: linear-gradient(135deg, #e9f7f5 0%, #d1f0e6 100%);
            padding: 2.5rem 2rem;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s;
            border: 2px solid #a8e6cf;
        }

        .country-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,103,80,0.15);
        }

        .country-flag {
            font-size: 3rem;
            font-weight: 700;
            color: #006750;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .country-name {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1rem;
        }

        .country-communities {
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }

        .country-communities i {
            margin-right: 0.5rem;
            color: #006750;
        }

        /* Testimonial Section */
        .testimonial-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9f7f5 100%);
            padding: 4rem 0;
        }

        .testimonial-card {
            background: white;
            padding: 3rem;
            border-radius: 20px;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 15px 35px rgba(0,103,80,0.1);
            border: 1px solid #e9f7f5;
        }

        .quote-icon {
            font-size: 3rem;
            color: #006750;
            margin-bottom: 1.5rem;
            opacity: 0.8;
        }

        .testimonial-text {
            font-size: 1.3rem;
            color: #333;
            line-height: 1.6;
            margin-bottom: 2rem;
            font-style: italic;
        }

        .testimonial-author {
            font-weight: 600;
            color: #006750;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .testimonial-title {
            color: #666;
            font-size: 0.95rem;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #006750 0%, #004d3c 100%);
            color: white;
            padding: 4rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23ffffff" opacity="0.05"><polygon points="0,0 1000,100 1000,0"/></svg>');
            pointer-events: none;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .cta-description {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto 2.5rem;
            position: relative;
            z-index: 1;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

        .btn-cta-primary, .btn-cta-secondary {
            padding: 1rem 2rem;
            border: 2px solid white;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-cta-primary {
            background: white;
            color: #006750;
        }

        .btn-cta-primary:hover {
            background: #f0f9f7;
            transform: translateY(-2px);
        }

        .btn-cta-secondary {
            background: transparent;
            color: white;
        }

        .btn-cta-secondary:hover {
            background: white;
            color: #006750;
        }

        /* Footer */
        footer {
            background: white;
            padding: 3rem 0 2rem;
            border-top: 1px solid #e9ecef;
        }

        .footer-content {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 2rem;
        }

        .footer-section h4 {
            color: #006750;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .footer-section p, .footer-section a {
            color: #666;
            text-decoration: none;
            line-height: 1.6;
        }

        .footer-section a:hover {
            color: #006750;
        }

        .countries-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        .country-item {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 0.95rem;
        }

        .country-item span:first-child {
            font-weight: 600;
            margin-right: 0.5rem;
            color: #006750;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #e9ecef;
            color: #666;
            font-size: 0.9rem;
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,103,80,0.15);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background-color: white;
            margin: 3% auto;
            padding: 2.5rem;
            border-radius: 20px;
            width: 90%;
            max-width: 600px;
            position: relative;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0,103,80,0.2);
            border: 1px solid #e9f7f5;
        }

        .close {
            position: absolute;
            right: 20px;
            top: 15px;
            font-size: 28px;
            font-weight: bold;
            color: #aaa;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close:hover {
            color: #006750;
        }

        .modal h2 {
            color: #006750;
            margin-bottom: 2rem;
            font-size: 1.8rem;
        }

        /* Form Styles */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #333;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.875rem;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
            font-family: inherit;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #006750;
            box-shadow: 0 0 0 3px rgba(0,103,80,0.1);
        }

        .form-group input[readonly] {
            background: linear-gradient(135deg, #e9f7f5 0%, #d1f0e6 100%);
            cursor: not-allowed;
            color: #006750;
            font-weight: 500;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        /* Payment Section */
        .payment-info {
            background: linear-gradient(135deg, #e9f7f5 0%, #d1f0e6 100%);
            padding: 2rem;
            border-radius: 15px;
            border: 2px solid #006750;
            margin: 2rem 0;
        }

        .payment-info h4 {
            color: #006750;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            font-size: 1.2rem;
        }

        .payment-info h4 i {
            margin-right: 0.5rem;
        }

        .account-details {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 4px solid #006750;
        }

        .account-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e9ecef;
        }

        .account-detail-row:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .copy-btn {
            background: #006750;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s;
            font-weight: 500;
        }

        .copy-btn:hover {
            background: #004d3c;
            transform: translateY(-1px);
        }

        .payment-note {
            margin-top: 1.5rem;
            padding: 1rem;
            background: white;
            border-radius: 10px;
            font-size: 0.9rem;
            color: #006750;
            border: 1px solid #a8e6cf;
        }

        .payment-note i {
            margin-right: 0.5rem;
        }

        /* Success/Error Messages */
        .message {
            padding: 1rem 1.5rem;
            border-radius: 10px;
            margin: 1rem 0;
            display: none;
            font-weight: 500;
        }

        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .message.info {
            background: #e9f7f5;
            color: #006750;
            border: 1px solid #a8e6cf;
        }

        /* Loading Spinner */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #006750;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Admin Panel Styles */
        .admin-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1500;
        }

        .admin-toggle {
            background: #006750;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 20px;
            cursor: pointer;
            font-size: 0.9rem;
            box-shadow: 0 8px 20px rgba(0,103,80,0.3);
            transition: all 0.3s;
        }

        .admin-toggle:hover {
            background: #004d3c;
            transform: translateY(-2px);
        }

        .admin-menu {
            display: none;
            position: absolute;
            bottom: 60px;
            right: 0;
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,103,80,0.2);
            padding: 1rem;
            min-width: 200px;
            border: 1px solid #e9f7f5;
        }

        .admin-menu button {
            display: block;
            width: 100%;
            background: none;
            border: none;
            padding: 0.75rem;
            text-align: left;
            cursor: pointer;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            transition: all 0.3s;
        }

        .admin-menu button:hover {
            background: #e9f7f5;
            color: #006750;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .modal-content {
                margin: 5% auto;
                width: 95%;
                padding: 1.5rem;
            }

            .mission-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
            }

            .areas-grid,
            .countries-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Toast Notification */
        .toast {
            position: fixed;
            top: 100px;
            right: 20px;
            background: #006750;
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 10px;
            z-index: 9999;
            box-shadow: 0 8px 20px rgba(0,103,80,0.3);
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast.success {
            background: #28a745;
        }

        .toast.error {
            background: #dc3545;
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <div class="logo">
                <i class="fas fa-heart"></i>
                Grantera
            </div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#impact">Impact</a></li>
                <li><a href="#where-we-work">Where We Work</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="support-btn" onclick="openModal('supportModal')">Support Our Work</button>
        </nav>
    </header>

    <main>
        <!-- Hero Section -->
        <section class="hero">
            <div class="container">
                <div class="hero-subtitle">Empowering Communities Across West & Central Africa</div>
                <h1>Connecting Donors<br>to Grassroots Impact</h1>
                <p class="hero-description">
                    We ensure that charitable funding reaches those who need it most by working through existing community networks across Benin, Nigeria, Ghana, and Cameroon.
                </p>
                <div class="hero-buttons">
                    <button class="btn-primary" onclick="openModal('communityModal')">Partner With Us</button>
                    <a href="#impact" class="btn-secondary">See Our Impact</a>
                </div>
            </div>
        </section>

        <!-- Stats Section -->
        <section class="stats-section">
            <div class="container">
                <div class="stats">
                    <div class="stat-card">
                        <div class="stat-number" id="communitiesReached">500+</div>
                        <div class="stat-label">Communities Reached</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="activeDonors">150+</div>
                        <div class="stat-label">Active Donors</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="grantsDistributed">$2.5M+</div>
                        <div class="stat-label">Grants Distributed</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="livesImpacted">25,000+</div>
                        <div class="stat-label">Lives Impacted</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Mission Section -->
        <section class="mission-section" id="about">
            <div class="container">
                <div class="mission-content">
                    <div class="mission-text">
                        <h2>Our Mission</h2>
                        <p class="mission-description">
                            At Grantera, we bridge the gap between generous donors and communities in need. Our unique approach leverages existing community networks to ensure funding