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

<!-- Activities Hero -->
<section class="internal-hero" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('activitiesbackground.webp');">
    <div class="container py-5 text-center">
        <h1 class="display-3 fw-bold mb-3 text-white">Activities</h1>
        <p class="lead opacity-95 max-w-2xl mx-auto text-white">From traditional boat racing to community festivals — there's something for everyone.</p>
    </div>
</section>

<!-- Main Activities -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="row g-4">
            <!-- 1. Upazilla -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <img src="Upazilla No-Ka Bais event picture.webp" class="card-img-top" alt="Upazilla" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Upazilla No-Ka Bais</h5>
                        <p class="text-muted text-sm mb-4">Traditional dragon boat racing representing different regions of Bangladesh.</p>
                        <a href="register-event.php" class="btn btn-warning w-100 py-3 fw-bold text-white rounded-pill" style="background-color: #f16522; border: none; font-size: 0.9rem;">Register <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 2. Sisters Race -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <img src="sisters race event picture.webp" class="card-img-top" alt="Sisters Race" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Sisters Race</h5>
                        <p class="text-muted text-sm mb-4">An exclusive racing category for women and girls in an empowering environment.</p>
                        <a href="register-event.php" class="btn btn-warning w-100 py-3 fw-bold text-white rounded-pill" style="background-color: #f16522; border: none; font-size: 0.9rem;">Register <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 3. Masjid Challenge -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <img src="masjid challenge.webp" class="card-img-top" alt="Masjid Challenge" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Masjid Challenge</h5>
                        <p class="text-muted text-sm mb-4">A friendly competition between local masjids to raise funds and strengthen bonds.</p>
                        <a href="register-event.php" class="btn btn-warning w-100 py-3 fw-bold text-white rounded-pill" style="background-color: #f16522; border: none; font-size: 0.9rem;">Register <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 4. Community Leaders Cup -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <img src="community leader cup.webp" class="card-img-top" alt="Community Cup" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Community Leaders Cup</h5>
                        <p class="text-muted text-sm mb-4">Community organisations compete to demonstrate unity while raising funds.</p>
                        <a href="register-event.php" class="btn btn-warning w-100 py-3 fw-bold text-white rounded-pill" style="background-color: #f16522; border: none; font-size: 0.9rem;">Register <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 5. Henna Painting -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <img src="assets/images/activity-henna.webp" class="card-img-top" alt="Henna" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Henna Painting</h5>
                        <p class="text-muted text-sm mb-4">Exquisite henna designs by talented artists in our festival atmosphere.</p>
                        <a href="activity-henna.php" class="btn btn-warning w-100 py-3 fw-bold text-white rounded-pill" style="background-color: #f16522; border: none; font-size: 0.9rem;">Register <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 6. Carrom Board -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <img src="assets/images/activity-carrom.webp" class="card-img-top" alt="Carrom" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold mb-3">Carrom Board</h5>
                        <p class="text-muted text-sm mb-4">A traditional game for all ages, fostering friendly competition throughout the day.</p>
                        <a href="activity-carrom.php" class="btn btn-warning w-100 py-3 fw-bold text-white rounded-pill" style="background-color: #f16522; border: none; font-size: 0.9rem;">Register <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Want to Set Up a Stall? Section -->
<section class="py-5 position-relative overflow-hidden" style="background-image: url('greenbackgorund.webp'); background-size: cover; background-position: center;">
    
    <div class="container py-5 text-center position-relative z-1">
        <h2 class="display-4 fw-bold text-white mb-3">Want to Set Up a Stall?</h2>
        <p class="text-white opacity-90 mb-5 max-w-2xl mx-auto fs-5">Join our vibrant festival bazaar! Whether you sell food, crafts, or want to promote your services, we have a space for you.</p>
        
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <a href="register-stall.php" class="btn btn-teal px-5 py-3 rounded-pill fw-bold text-white shadow-sm">Book Your Stall <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
    </div>
</section>

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