<!-- Footer Component -->
<footer class="bg-dark text-light py-5 mt-5 border-top border-secondary">
    <div class="container-fluid">
        <div class="row">
            <!-- About Section -->
            <div class="col-lg-3 col-md-6 mb-4">
                <h6 class="fw-bold mb-3">
                    <i class="fas fa-box me-2"></i> MHA Flow
                </h6>
                <p class="small text-muted">
                    Advanced metaheuristic optimization platform for solving complex computational problems with ease.
                </p>
                <div class="mt-3">
                    <span class="badge bg-primary me-2">v2.0.8</span>
                    <span class="badge bg-success">Active</span>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="col-lg-2 col-md-6 mb-4">
                <h6 class="fw-bold mb-3">Quick Links</h6>
                <ul class="list-unstyled small">
                    <li class="mb-2">
                        <a href="/" class="text-muted text-decoration-none">
                            <i class="fas fa-home me-1"></i> Home
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/optimize" class="text-muted text-decoration-none">
                            <i class="fas fa-rocket me-1"></i> Optimize
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/results" class="text-muted text-decoration-none">
                            <i class="fas fa-chart-line me-1"></i> Results
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/history" class="text-muted text-decoration-none">
                            <i class="fas fa-history me-1"></i> History
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Resources -->
            <div class="col-lg-2 col-md-6 mb-4">
                <h6 class="fw-bold mb-3">Resources</h6>
                <ul class="list-unstyled small">
                    <li class="mb-2">
                        <a href="/docs" class="text-muted text-decoration-none">
                            <i class="fas fa-book me-1"></i> Documentation
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/api" class="text-muted text-decoration-none">
                            <i class="fas fa-code me-1"></i> API Reference
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/examples" class="text-muted text-decoration-none">
                            <i class="fas fa-lightbulb me-1"></i> Examples
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/help" class="text-muted text-decoration-none">
                            <i class="fas fa-question-circle me-1"></i> Help & Support
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Community -->
            <div class="col-lg-2 col-md-6 mb-4">
                <h6 class="fw-bold mb-3">Community</h6>
                <ul class="list-unstyled small">
                    <li class="mb-2">
                        <a href="#" class="text-muted text-decoration-none">
                            <i class="fab fa-github me-1"></i> GitHub
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="#" class="text-muted text-decoration-none">
                            <i class="fab fa-twitter me-1"></i> Twitter
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="#" class="text-muted text-decoration-none">
                            <i class="fab fa-discord me-1"></i> Discord
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="/feedback" class="text-muted text-decoration-none">
                            <i class="fas fa-envelope me-1"></i> Feedback
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Newsletter -->
            <div class="col-lg-3 col-md-6 mb-4">
                <h6 class="fw-bold mb-3">Stay Updated</h6>
                <p class="small text-muted">Subscribe to our newsletter for updates and tips.</p>
                <div class="input-group input-group-sm">
                    <input type="email" class="form-control" placeholder="Your email" id="newsletterEmail">
                    <button class="btn btn-primary" type="button" onclick="subscribeNewsletter()">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <small id="newsletterMsg" class="text-muted d-block mt-2"></small>
            </div>
        </div>

        <!-- Divider -->
        <hr class="border-secondary my-4">

        <!-- Bottom Section -->
        <div class="row align-items-center">
            <div class="col-lg-6 mb-3 mb-lg-0">
                <small class="text-muted">
                    <i class="fas fa-copyright me-1"></i>
                    2024-2026 MHA Flow. All rights reserved. | 
                    <a href="/privacy" class="text-muted text-decoration-none">Privacy Policy</a> | 
                    <a href="/terms" class="text-muted text-decoration-none">Terms of Service</a>
                </small>
            </div>
            <div class="col-lg-6 text-lg-end">
                <div class="d-flex justify-content-lg-end gap-2 flex-wrap">
                    <a href="#" class="text-muted text-decoration-none small">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="text-muted text-decoration-none small">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="text-muted text-decoration-none small">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-muted text-decoration-none small">
                        <i class="fab fa-youtube"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Status Bar -->
        <div class="row mt-4">
            <div class="col-12">
                <small class="text-muted d-block">
                    <span id="serverStatus">
                        <i class="fas fa-circle text-success me-1"></i> Server Status: Online
                    </span>
                    |
                    <span id="lastUpdated" class="ms-2">
                        Last Updated: <span id="lastUpdateTime">-</span>
                    </span>
                </small>
            </div>
        </div>
    </div>
</footer>

<script>
function subscribeNewsletter() {
    const email = document.getElementById('newsletterEmail').value;
    const msg = document.getElementById('newsletterMsg');

    if (!email) {
        msg.textContent = 'Please enter an email address';
        msg.style.color = '#dc3545';
        return;
    }

    if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
        msg.textContent = 'Please enter a valid email address';
        msg.style.color = '#dc3545';
        return;
    }

    // Simulate subscription
    msg.textContent = 'Thank you for subscribing!';
    msg.style.color = '#28a745';
    document.getElementById('newsletterEmail').value = '';

    setTimeout(() => {
        msg.textContent = '';
    }, 3000);
}

// Update last updated time
function updateLastUpdated() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
    document.getElementById('lastUpdateTime').textContent = timeString;
}

// Check server status
async function checkServerStatus() {
    try {
        const response = await fetch('/api/health');
        if (response.ok) {
            document.getElementById('serverStatus').innerHTML = '<i class="fas fa-circle text-success me-1"></i> Server Status: Online';
        } else {
            document.getElementById('serverStatus').innerHTML = '<i class="fas fa-circle text-warning me-1"></i> Server Status: Degraded';
        }
    } catch (error) {
        document.getElementById('serverStatus').innerHTML = '<i class="fas fa-circle text-danger me-1"></i> Server Status: Offline';
    }
}

// Initialize footer
document.addEventListener('DOMContentLoaded', () => {
    updateLastUpdated();
    checkServerStatus();
    setInterval(updateLastUpdated, 60000); // Update every minute
    setInterval(checkServerStatus, 30000); // Check status every 30 seconds
});
</script>
