<?php include 'includes/header.php'; ?>

<!-- Event Hero -->
<section class="py-5" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('masjidchallengebanner.webp'); background-size: cover; background-position: center; min-height: 500px; display: flex; align-items: center;">
    <div class="container py-5 text-center">
        <div class="event-hero-icon mx-auto">
            <i class="fas fa-mosque"></i>
        </div>
        <h1 class="display-3 fw-bold text-white mb-3">Masjid Challenge</h1>
        <p class="lead text-white opacity-90 mx-auto" style="max-width: 800px;">Teams representing different masjids race against each other while raising funds for their respective institutions and community projects.</p>
    </div>
</section>

<!-- Info Cards -->
<div class="container">
    <div class="info-card-container">
        <div class="event-info-card">
            <div class="event-info-card-icon">
                <i class="far fa-calendar-alt"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-0">14th June 2026</h6>
            </div>
        </div>
        <div class="event-info-card">
            <div class="event-info-card-icon">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-0">London Regatta Centre</h6>
            </div>
        </div>
        <div class="event-info-card">
            <div class="event-info-card-icon">
                <i class="fas fa-place-of-worship"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-0">Masjid-based teams</h6>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <h2 class="display-5 fw-bold mb-5">What to Expect</h2>
                
                <div class="numbered-list-item">
                    <div class="numbered-list-circle">1</div>
                    <div class="text-muted">Friendly competition between local masjid communities</div>
                </div>
                <div class="numbered-list-item">
                    <div class="numbered-list-circle">2</div>
                    <div class="text-muted">A platform to raise funds for masjid renovations or outreach programs</div>
                </div>
                <div class="numbered-list-item">
                    <div class="numbered-list-circle">3</div>
                    <div class="text-muted">Engage youth and elders alike in a collective community effort</div>
                </div>
                <div class="numbered-list-item">
                    <div class="numbered-list-circle">4</div>
                    <div class="text-muted">Showcase the unity and spirit of your local congregation</div>
                </div>
                <div class="numbered-list-item">
                    <div class="numbered-list-circle">5</div>
                    <div class="text-muted">Professional support to help your team prepare for the race</div>
                </div>

                <div class="who-box shadow-sm">
                    <h5 class="fw-bold mb-3">Who Is This For?</h5>
                    <p class="text-muted mb-0">The Masjid Challenge is ideal for masjid committees, youth groups, and regular congregants who want to represent their local masjid on the water.</p>
                </div>

                <div class="d-flex flex-wrap gap-3 mt-5">
                    <a href="register-event.php" class="btn btn-primary px-5 py-3 rounded-pill fw-bold" style="background-color: #f16522; border: none; ">Register Now <i class="fas fa-arrow-right ms-2"></i></a>
                    <a href="index.php" class="btn btn-outline-dark px-5 py-3 rounded-pill fw-bold" style="border: 1px solid #eee; background: #fafafa;"><i class="fas fa-arrow-left me-2"></i> Back to Home</a>
                </div>
            </div>
        </div>
    </div>
</section>

<?php include 'includes/footer.php'; ?>
