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

<!-- Hero Section -->
<section class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('home banner image.webp'); min-height: 90vh; display: flex; align-items: center;">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="mb-5">
                    <div class="glass-pill">
                        <i class="far fa-calendar-alt text-orange"></i>
                        <span>14th June 2026 • London Regatta Centre</span>
                    </div>
                </div>
                
                <h1 class="hero-title fw-bold mb-4 text-white">The Race for <span class="text-orange">Humanity</span></h1>
                <p class="hero-subtitle mb-5 text-white opacity-90 mx-auto">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 mb-5 pt-2">
                    <a href="register-event.php" class="btn btn-primary px-5 py-3 rounded-pill fw-bold" style="">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 mt-5">
                    <div class="text-center">
                        <div class="glass-counter-box mb-2">
                            <div id="days" class="display-5 fw-bold mb-0">32</div>
                        </div>
                        <div class="text-uppercase small tracking-wider opacity-75 text-white">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="display-5 fw-bold mb-0">19</div>
                        </div>
                        <div class="text-uppercase small tracking-wider opacity-75 text-white">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="display-5 fw-bold mb-0">26</div>
                        </div>
                        <div class="text-uppercase small tracking-wider opacity-75 text-white">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="display-5 fw-bold mb-0">08</div>
                        </div>
                        <div class="text-uppercase small tracking-wider opacity-75 text-white">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 bg-light">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="text-teal fw-bold small text-uppercase tracking-wider">OUR STORY</span>
                <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">
                            <img src="assets/images/34d7f7626_generated_image.webp" class="card-img-top" style="height: 80px; object-fit: cover;" alt="Partner Organisations">
                            <div class="card-body p-3">
                                <p class="text-xs text-muted mb-0 uppercase tracking-widest font-bold">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">
                            <img src="assets/images/5caef8357_generated_image.webp" class="card-img-top" style="height: 80px; object-fit: cover;" alt="Participants">
                            <div class="card-body p-3">
                                <p class="text-xs text-muted mb-0 uppercase tracking-widest font-bold">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">
                            <img src="assets/images/79010f65b_generated_image.webp" class="card-img-top" style="height: 80px; object-fit: cover;" alt="Impact">
                            <div class="card-body p-3">
                                <p class="text-xs text-muted mb-0 uppercase tracking-widest font-bold">Impact</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <a href="about.php" class="btn btn-teal px-5 py-3 rounded-pill fw-bold">Read Our Full Story <i class="fas fa-arrow-right ms-2"></i></a>
            </div>
            <div class="col-lg-6">
                <div class="position-relative">
                    <div class="bg-white p-2 rounded-4 shadow-2xl">
                        <img src="assets/images/our-story.webp" class="img-fluid rounded-3" alt="About CBR">
                    </div>
                    <div class="p-4 rounded-4 position-absolute bottom-0 end-0 m-4 text-white shadow-lg d-none d-md-block" style="background-color: #f16522; min-width: 160px;">
                        <h2 class="fw-bold mb-0">2026</h2>
                        <p class="text-xs mb-0 opacity-80 uppercase tracking-widest font-bold">Race for Humanity</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="text-center mb-5">
            <span class="text-teal fw-bold small text-uppercase tracking-wider">RACE CATEGORIES</span>
            <h2 class="display-5 fw-bold mt-2">Choose Your Race</h2>
            <p class="text-muted max-w-2xl mx-auto">Everyone can get involved! Form a team, pick your category, and race for 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 class="fw-bold mb-3 text-teal">Upazilla No-Ka Bais</h5>
                        <p class="text-muted text-sm mb-4">Join a team representing your area of Bangladesh to raise funds for projects back home.</p>
                        <a href="activity-upazilla.php" class="text-teal fw-bold text-decoration-none 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 class="fw-bold mb-3 text-teal">Sisters Race</h5>
                        <p class="text-muted text-sm mb-4">Encouraging female participation with the opportunity to compete and raise funds for preferred causes.</p>
                        <a href="activity-sisters-race.php" class="text-teal fw-bold text-decoration-none 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 class="fw-bold mb-3 text-teal">Masjid Challenge</h5>
                        <p class="text-muted text-sm mb-4">Teams representing different masjids race against each other whilst raising funds.</p>
                        <a href="activity-masjid-challenge.php" class="text-teal fw-bold text-decoration-none 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 class="fw-bold mb-3 text-teal">Community Leaders Cup</h5>
                        <p class="text-muted text-sm mb-4">Community organisations compete to become champions whilst raising funds for their causes.</p>
                        <a href="activity-community-cup.php" class="text-teal fw-bold text-decoration-none 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 px-5 py-3 rounded-pill fw-bold text-white" style="background-color: #f16522; border: none;">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 rounded-pill fw-bold"><i class="fas fa-store me-2"></i> Book a Stall</a>
        </div>
    </div>
</section>

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