<?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 & Fun</h1>
        <p class="lead opacity-95 max-w-2xl mx-auto text-white">There's something for everyone! Discover the range of
            fun activities at the Charity Boat Race.
        </p>
    </div>
</section>

<!-- Main Activities -->
<section class="py-5 bg-white activities-cards-section">
    <div class="container py-5">
        <div class="row g-4">
            <!-- 1. Fun Day -->
            <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/1cb366a02_generated_image.webp" class="card-img-top" alt="Fun Day"
                        style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Fun Day</h5>
                        <p class="mb-4">A full day of entertainment and fun for all ages — face painting,
                            games, bouncy castles and so much more for the whole family to enjoy.</p>
                        <a href="register-activity.php?activity=fun-day" class="btn btn-primary w-100 justify-content-center">14th June 2026<i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 2. Rickshaw Ride-->
            <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/category-family.webp" class="card-img-top" alt="Rickshaw Ride"
                        style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Rickshaw Ride</h5>
                        <p class="mb-4">Hop on a colourful rickshaw for a traditional ride around the venue.
                            A unique cultural experience that brings joy to everyone.</p>
                        <a href="register-activity.php?activity=rickshaw-ride" class="btn btn-primary w-100 justify-content-center"> 14th June 2026 <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 3. Food & Market Stalls -->
            <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/945bf8c49_generated_46279168.webp" class="card-img-top"
                        alt="Food & Market Stalls" style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Food & Market Stalls</h5>
                        <p class="mb-4">Explore a vibrant marketplace with delicious food from around the
                            world, handmade crafts, clothing, and community stalls.</p>
                        <a href="register-activity.php?activity=food-stalls" class="btn btn-primary w-100 justify-content-center"> 14th June 2026 <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 4. Longhi 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="Upazilla No-Ka Bais event picture.webp" class="card-img-top" alt="Longhi Race"
                        style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Longhi Race</h5>
                        <p class="mb-4">Watch or participate in the thrilling longhi (traditional boat) races
                            — a spectacular display of teamwork and determination.</p>
                        <a href="register-activity.php?activity=longhi-race" class="btn btn-primary w-100 justify-content-center"> 14th June 2026 <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 5. Family Picnic
 -->
            <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="Family Picnic"
                        style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Family Picnic</h5>
                        <p class="mb-4">Bring your blanket and enjoy a relaxing picnic by the water. The
                            perfect way to unwind while soaking in the festive atmosphere.</p>
                        <a href="register-activity.php?activity=family-picnic" class="btn btn-primary w-100 justify-content-center"> 14th June 2026 <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- 6. Sack 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="Sack Race"
                        style="height: 200px; object-fit: cover;">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Sack Race</h5>
                        <p class="mb-4">A classic and hilarious sack race competition for kids and adults
                            alike. Bring your competitive spirit and have a great time!</p>
                        <a href="register-activity.php?activity=sack-race" class="btn btn-primary w-100 justify-content-center"> 14th June 2026 <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-secondary px-5 py-3">Book Your Stall <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
    </div>
</section>

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