</div> <!-- End of main-content -->

<footer class="footer pt-5 pb-4">
    <div class="container py-4">
        <div class="row g-5">
            <div class="col-lg-4">
                <div class="mb-4">
                    <img src="charityboatracelogo.webp" alt="Logo" height="60" class="brightness-0 invert">
                </div>
                <p class="mb-4 text-sm opacity-70" style="max-width: 320px;">Bringing communities together through a joyful family event while supporting meaningful charitable causes in the UK and around the world.</p>
                
                <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
                    <img src="Bridgewater Trust CIC.webp" alt="Bridgewater" height="35" class="bg-white p-1 rounded">
                    <img src="assets/images/newham-youth-link-logo.webp" alt="Newham Youth Link" height="35" class="bg-white p-1 rounded">
                    <img src="assets/images/gift-foundation-logo.webp" alt="Gift Foundation" height="35" class="bg-white p-1 rounded">
                    <img src="assets/images/sisters-forum-logo.webp" alt="Sisters Forum" height="35" class="bg-white p-1 rounded">
                </div>

                <div class="d-flex gap-3 mt-4">
                    <a href="#" class="social-circle-white"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-circle-white"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            
            <div class="col-lg-2 col-md-4">
                <h6 class="fw-bold text-white text-uppercase tracking-wider mb-4">Quick Links</h6>
                <ul class="list-unstyled">
                    <li><a href="index.php" class="footer-link">Home</a></li>
                    <li><a href="about.php" class="footer-link">About</a></li>
                    <li><a href="activities.php" class="footer-link">Activities</a></li>
                    <li><a href="corporate.php" class="footer-link">Corporate Sponsors</a></li>
                    <li><a href="partners.php" class="footer-link">Partners</a></li>
                </ul>
            </div>
            
            <div class="col-lg-3 col-md-4">
                <h6 class="fw-bold text-white text-uppercase tracking-wider mb-4">Race Categories</h6>
                <ul class="list-unstyled">
                    <li><a href="activity-upazilla.php" class="footer-link">Upazilla No-Ka Bais</a></li>
                    <li><a href="activity-sisters-race.php" class="footer-link">Sisters Race</a></li>
                    <li><a href="activity-masjid-challenge.php" class="footer-link">Masjid Challenge</a></li>
                    <li><a href="activity-community-cup.php" class="footer-link">Community Leaders Cup</a></li>
                </ul>
            </div>
            
            <div class="col-lg-3 col-md-4">
                <h6 class="fw-bold text-white text-uppercase tracking-wider mb-4">Contact</h6>
                <ul class="list-unstyled">
                    <li class="d-flex gap-3 mb-3">
                        <i class="fas fa-map-marker-alt mt-1 contact-icon-teal"></i>
                        <span class="text-sm">London Regatta Centre, Dockside Road, London, E16 2QT</span>
                    </li>
                    <li class="d-flex gap-3">
                        <i class="fas fa-envelope mt-1 contact-icon-teal"></i>
                        <span class="text-sm">Bridgewatertrust@yahoo.com</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="footer-bottom mt-5 pt-4 d-flex flex-column flex-md-row justify-content-between align-items-center gap-3 border-top border-white border-opacity-10">
            <p class="mb-0 text-sm opacity-60">© 2026 Charity Boat Race. All rights reserved.</p>
            <div class="text-sm opacity-60">
                Made with <i class="fas fa-heart text-orange mx-1"></i> for our community
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js"></script>

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 text-center p-4">
            <div class="modal-body p-4">
                <div class="bg-success-subtle p-3 rounded-circle d-inline-flex mb-4" style="width: 80px; height: 80px; align-items: center; justify-content: center; background-color: #d1e7dd;">
                    <i class="fas fa-check text-success fs-1"></i>
                </div>
                <h3 class="fw-bold mb-2">Success!</h3>
                <p class="text-muted mb-4" id="successModalMessage">Your submission has been received successfully. We will get back to you shortly.</p>
                <button type="button" class="btn btn-secondary w-100" data-bs-dismiss="modal">Great, thank you!</button>
            </div>
        </div>
    </div>
</div>

<!-- Form Handler Script -->
<script src="js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.lucide && typeof lucide.createIcons === 'function') {
        lucide.createIcons({ attrs: { 'stroke-width': 2 } });
    }

    document.querySelectorAll('form[data-ajax-handler="global"]').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            var action = form.getAttribute('action');
            if (!action || action === '#') {
                action = 'handlers/global-handler.php';
            }

            var submitBtn = form.querySelector('button[type="submit"]');
            if (!submitBtn) return;

            var originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Sending...';
            submitBtn.disabled = true;

            var formData = new FormData(form);

            fetch(action, {
                method: 'POST',
                body: formData
            })
            .then(function(response) { return response.json(); })
            .then(function(data) {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;

                if (data.success) {
                    var successModal = new bootstrap.Modal(document.getElementById('successModal'));
                    document.getElementById('successModalMessage').textContent = data.message || 'Your submission has been received successfully.';
                    successModal.show();
                    form.reset();
                    if (window.lucide && typeof lucide.createIcons === 'function') {
                        lucide.createIcons({ attrs: { 'stroke-width': 2 } });
                    }
                } else {
                    alert(data.message || 'Something went wrong.');
                }
            })
            .catch(function(error) {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                console.error('Error:', error);
                alert('Something went wrong. Please try again.');
            });
        });
    });
});
</script>
</body>
</html>
