function generatePlaceholderImage(text, width, height, bgColor) {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, width, height);

    // Text
    ctx.fillStyle = '#666666';
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, width/2, height/2);

    return canvas.toDataURL();
}

// Generate placeholder images
const images = {
    // ISP Management System
    'isp-overview': 'images/isp-overview.png',
    'isp-dashboard': 'images/isp-dashboard.png',
    'isp-subscribers': 'images/isp-subscribers.png',
    'isp-billing': 'images/isp-billing.png',
    
    // Hotspot System
    'hotspot-overview': 'images/hotspot-overview.png',
    'hotspot-login': 'images/hotspot-login.png',
    'hotspot-plans': generatePlaceholderImage('Plan Management', 800, 400, '#f8f9fa'),
    'hotspot-analytics': generatePlaceholderImage('Usage Analytics', 800, 400, '#f8f9fa'),
    
    // Enterprise Solutions
    'enterprise-hotspot-overview': 'images/enterprise-hotspot-overview.png',
    'enterprise-wifi': generatePlaceholderImage('Guest WiFi Portal', 800, 400, '#f8f9fa'),
    'enterprise-tracking': generatePlaceholderImage('Activity Monitoring', 800, 400, '#f8f9fa'),
    'enterprise-reports': generatePlaceholderImage('Advanced Reporting', 800, 400, '#f8f9fa'),
    
    // Other images
    // 'logo': generatePlaceholderImage('Netify Logo', 200, 40, '#ffffff'),
    'logo': 'images/logo.png',
    // 'hero': generatePlaceholderImage('Network Illustration', 600, 400, '#f8f9fa')
    'hero-image': 'images/hotspot.png'
};

// Replace image sources
document.addEventListener('DOMContentLoaded', function() {
    const imgElements = document.querySelectorAll('img');
    imgElements.forEach(img => {
        const src = img.src;
        Object.keys(images).forEach(key => {
            if (src.includes(key + '.png')) {
                img.src = images[key];
            }
        });
    });
});