<!-- footer.html -->
<footer class="footer bg-light text-center text-lg-start">
    <div class="container-fluid p-4">
        <div class="row">
            <div class="col-lg-4 mb-4 mb-md-0">
                <h5 class="text-uppercase mb-4">Contact Information</h5>
                <ul class="list-unstyled contact-links">
                    <li><i class="fa fa-phone me-2"></i><a href="tel:+250787870624">Phone</a></li>
                    <li><i class="fa fa-whatsapp me-2"></i><a href="https://wa.me/+250787870624" target="_blank">WhatsApp</a></li>
                    <li><i class="fa fa-envelope me-2"></i><a href="{% url 'contacts:index' %}">Email me</a></li>
                </ul>
            </div>
            
            <div class="col-lg-4 mb-4 mb-md-0">
                <h5 class="text-uppercase mb-4">Follow me</h5>
                <ul class="list-unstyled contact-links">
                    <li><i class="fa fa-github me-2"></i><a href="https://github.com/Thimethane" target="_blank">GitHub</a></li>
                    <li><i class="fa fa-linkedin me-2"></i><a href="https://www.linkedin.com/in/thimothee-ringuyeneza-2ab537361/" target="_blank">LinkedIn</a></li>
                    <li><i class="fa-brands fa-kaggle me-2"></i><a href="https://www.kaggle.com/ringuyenezathimothe" target="_blank">Kaggle</a></li>
                </ul>
            </div>
            
            <div class="col-lg-4 mb-4 mb-md-0">
                <h5 class="text-uppercase mb-4">About Timothee</h5>
                <p class="about-text">Building tech and data-driven solutions with passion. Explore my projects and get in touch for collaborations.</p>
            </div>
        </div>
    </div>

    <div class="text-center p-3 bg-dark text-light">
        &copy; <span id="current-year"></span> <strong>Codescraftsman</strong>. All rights reserved.
    </div>

    <script>
        // Set the current year dynamically
        document.getElementById("current-year").textContent = new Date().getFullYear();
    </script>
</footer>