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

<!-- Hero Section -->
<section class="hero-section"
    style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('home banner image.webp'); min-height: 90vh; display: flex; align-items: center; padding-top: 8rem;">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div>
                    <div class="glass-pill">
                        <i class="far fa-calendar-alt"></i>
                        <span>14th June 2026 • London Regatta Centre</span>
                    </div>
                </div>

                <h1 class="hero-title fw-bold mb-6 text-white" style="font-size: 5rem;">The Race for <span class="text-orange">Humanity</span>
                </h1>
                <p class="hero-subtitle mb-10 text-white opacity-90 mx-auto" style="font-size: 1.25rem; max-width: 700px;">Join us for a spectacular day of community,
                    competition and charity. Bringing families together to make a real difference.</p>

                <div class="d-flex justify-content-center gap-3 flex-wrap hero-cta-buttons mb-0 pt-2">
                    <a href="register-event.php" class="btn btn-primary px-5 py-3 rounded-pill fw-bold"
                        style="background-color: #f16522; border: none;">Register Your Team <i class="fas fa-arrow-right ms-2"></i></a>
                    <a href="about.php" class="btn btn-outline-light px-5 py-3 rounded-pill fw-bold">Learn More</a>
                </div>

                <!-- Countdown -->
                <div class="d-flex justify-content-center align-items-center gap-2 gap-md-3 countdown-container">
                    <div class="text-center">
                        <div class="glass-counter-box mb-2">
                            <div id="days" class="countdown-number mb-0">32</div>
                        </div>
                        <div class="countdown-label">Days</div>
                    </div>

                    <div class="display-6 fw-bold text-white mb-4 countdown-separator">:</div>

                    <div class="text-center">
                        <div class="glass-counter-box mb-2">
                            <div id="hours" class="countdown-number mb-0">19</div>
                        </div>
                        <div class="countdown-label">Hours</div>
                    </div>

                    <div class="display-6 fw-bold text-white mb-4 countdown-separator">:</div>

                    <div class="text-center">
                        <div class="glass-counter-box mb-2">
                            <div id="minutes" class="countdown-number mb-0">26</div>
                        </div>
                        <div class="countdown-label">Min</div>
                    </div>

                    <div class="display-6 fw-bold text-white mb-4 countdown-separator">:</div>

                    <div class="text-center">
                        <div class="glass-counter-box mb-2">
                            <div id="seconds" class="countdown-number mb-0">08</div>
                        </div>
                        <div class="countdown-label">Sec</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Powered By Section -->
<section class="py-5 bg-white border-bottom">
    <div class="container text-center">
        <p class="text-uppercase tracking-widest text-xs font-bold text-muted mb-5 opacity-70">POWERED BY & CHARITY
            PARTNER</p>
        <div class="d-flex justify-content-center align-items-center gap-5 flex-wrap">
            <div class="px-4">
                <div class="bg-light p-2 rounded mb-2">
                    <img src="Bridgewater Trust CIC.webp" alt="Bridgewater Trust" height="50">
                </div>
                <p class="text-xs text-dark mb-0 fw-bold">Bridgewater Trust CIC</p>
            </div>
            <div class="vr opacity-10 d-none d-md-block" style="height: 60px;"></div>
            <div class="px-4">
                <img src="muslimcharitylogo.webp" alt="Muslim Charity" height="50" class="mb-2">
                <p class="text-xs text-muted mb-0 fw-bold">Muslim Aid</p>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="py-5" style="background-color: #fbfaf8;">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h6 class="section-label">OUR STORY</h6>
                <h2 class="display-5 fw-bold mt-2 mb-4">More Than a Race — A Celebration of Community</h2>
                <p class="text-muted mb-4">The Charity Boat Race was created with a simple yet powerful vision — to
                    bring communities together through a joyful family event while supporting meaningful charitable
                    causes in the UK and around the world.</p>
                <p class="text-muted mb-5">Inspired by the late Sheikh Fahimul Anam, this partnership between Gift
                    Foundation, Sisters Forum, and Newham Youth Link is a true celebration of collaboration and social
                    impact.</p>

                <div class="row g-3 mb-5">
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm rounded-4 overflow-hidden text-center bg-white h-100">
                            <div class="position-relative">
                                <img src="assets/images/34d7f7626_generated_image.webp" class="card-img-top w-100" style="height: 90px; object-fit: cover;" alt="Partner Organisations">
                                <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(31, 134, 147, 0.2);"></div>
                                <div class="position-absolute top-50 start-50 translate-middle w-100">
                                    <h3 class="mb-0 fw-bold text-white" style="font-family: 'Playfair Display', serif; font-size: 2.8rem; text-shadow: 1px 1px 8px rgba(0,0,0,0.3);">3</h3>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <p class="text-dark mb-0 fw-bold" style="font-size: 0.85rem;">Partner Organisations</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm rounded-4 overflow-hidden text-center bg-white h-100">
                            <div class="position-relative">
                                <img src="assets/images/5caef8357_generated_image.webp" class="card-img-top w-100" style="height: 90px; object-fit: cover;" alt="Participants">
                                <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(31, 134, 147, 0.2);"></div>
                                <div class="position-absolute top-50 start-50 translate-middle w-100">
                                    <h3 class="mb-0 fw-bold text-white" style="font-family: 'Playfair Display', serif; font-size: 2.5rem; text-shadow: 1px 1px 8px rgba(0,0,0,0.3);">1000+</h3>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <p class="text-dark mb-0 fw-bold" style="font-size: 0.85rem;">Participants</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm rounded-4 overflow-hidden text-center bg-white h-100">
                            <div class="position-relative">
                                <img src="assets/images/79010f65b_generated_image.webp" class="card-img-top w-100" style="height: 90px; object-fit: cover;" alt="Impact">
                                <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(31, 134, 147, 0.2);"></div>
                                <div class="position-absolute top-50 start-50 translate-middle w-100">
                                    <h3 class="mb-0 fw-bold text-white" style="font-family: 'Playfair Display', serif; font-size: 2.5rem; text-shadow: 1px 1px 8px rgba(0,0,0,0.3);">Global</h3>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <p class="text-dark mb-0 fw-bold" style="font-size: 0.85rem;">Impact</p>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="about.php" class="btn btn-secondary px-4 py-2">Read Our Full Story <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="col-lg-6">
                <div class="position-relative h-100 d-flex align-items-center">
                    <div class="p-4 rounded-4 shadow-sm w-100 position-relative overflow-hidden" style="background: linear-gradient(135deg, #eef7f8 0%, #ffffff 100%); border: 1px solid rgba(0,0,0,0.05);">
                        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(31, 134, 147, 0.05);"></div>
                        <img src="assets/images/category-dragon.webp" class="img-fluid rounded-3 w-100 position-relative z-1" alt="About CBR" style="mix-blend-mode: multiply;">
                    </div>
                    <div class="p-4 rounded-4 position-absolute bottom-0 end-0 text-white shadow-lg d-none d-md-block"
                        style="background-color: #f16522; min-width: 160px; z-index: 2; transform: translate(15%, 15%);">
                        <h2 class="fw-bold mb-0 text-white" style="font-family: 'Playfair Display', serif;">2026</h2>
                        <p class="text-xs mb-0 opacity-90 fw-bold">Race for Humanity</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="race-categories-section">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="section-label">RACE CATEGORIES</h6>
            <h2 class="display-5 fw-bold mt-2">Choose Your Race</h2>
            <p class="race-categories-intro max-w-2xl mx-auto">Everyone can get involved! Form a team, pick your category, and race for<br> a cause close to your heart.</p>
        </div>

        <div class="row g-4">
            <div class="col-lg-3 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">
                        <h5 >Upazilla No-Ka Bais</h5>
                        <p class="mb-4">Join a team representing your area of Bangladesh to raise funds
                            for projects back home.</p>
                        <a href="activity-upazilla.php"
                            class="d-flex align-items-center gap-2">
                            Learn More <i class="fas fa-arrow-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 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">
                        <h5 >Sisters Race</h5>
                        <p class="mb-4">Encouraging female participation with the opportunity to compete
                            and raise funds for preferred causes.</p>
                        <a href="activity-sisters-race.php"
                            class="d-flex align-items-center gap-2">
                            Learn More <i class="fas fa-arrow-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 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">
                        <h5 >Masjid Challenge</h5>
                        <p class="mb-4">Teams representing different masjids race against each other
                            whilst raising funds.</p>
                        <a href="activity-masjid-challenge.php"
                            class="d-flex align-items-center gap-2">
                            Learn More <i class="fas fa-arrow-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 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">
                        <h5 >Community Leaders Cup</h5>
                        <p class="mb-4">Community organisations compete to become champions whilst
                            raising funds for their causes.</p>
                        <a href="activity-community-cup.php"
                            class="d-flex align-items-center gap-2">
                            Learn More <i class="fas fa-arrow-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action 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">
        <div class="mb-4">
            <img src="charityboatracelogo.webp" alt="CBR Logo" height="60" class="brightness-0 invert">
        </div>
        <h2 class="display-4 fw-bold text-white mb-3">Ready to Make a Splash?</h2>
        <p class="text-white opacity-90 mb-5 max-w-2xl mx-auto fs-5">Whether you want to race, volunteer, set up a
            stall, or sponsor — there's a place for everyone at the Charity Boat Race 2026.</p>

        <div class="d-flex flex-wrap justify-content-center gap-3">
            <a href="register-event.php" class="btn btn-primary px-5 py-3">Register Your Team <i class="fas fa-arrow-right ms-2"></i></a>
            <a href="register-stall.php" class="btn btn-outline-light px-5 py-3"><i class="fas fa-store me-2"></i> Book a Stall</a>
        </div>
    </div>
</section>

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