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

<!-- Venue Hero -->
<section class="py-5" style="background-image: linear-gradient(rgba(31, 134, 147, 0.85), rgba(31, 134, 147, 0.85)), url('Upazilla No-Ka Bais banner background image.webp'); background-size: cover; background-position: center; min-height: 450px; display: flex; align-items: center;">
    <div class="container py-5 text-center">
        <h1 class="display-3 fw-bold text-white mb-3">The Venue</h1>
        <p class="lead text-white opacity-90 mx-auto" style="max-width: 700px;">London Regatta Centre — A premier, Olympic-standard rowing facility in the heart of the Docklands.</p>
    </div>
</section>

<!-- Venue Details -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <div class="bg-white p-2 rounded-4 shadow-2xl">
                    <img src="Upazilla No-Ka Bais event picture.webp" class="img-fluid rounded-3" alt="London Regatta Centre">
                </div>
            </div>
            <div class="col-lg-6">
                <h2 class="display-5 fw-bold mb-4 text-dark">London Regatta Centre</h2>
                <p class="text-muted mb-5">The London Regatta Centre is a premier, Olympic-standard rowing and dragon boat facility in the Docklands, featuring a 2,000m, seven-lane course in the Royal Albert Dock.</p>
                
                <div class="d-flex flex-column gap-4 mb-5">
                    <div class="d-flex align-items-center gap-3">
                        <div class="event-info-card-icon" style="flex-shrink: 0;">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0">Address</h6>
                            <p class="text-muted small mb-0">London Regatta Centre, Dockside Road, London, E16 2QT</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <div class="event-info-card-icon" style="flex-shrink: 0;">
                            <i class="fas fa-train"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0">Public Transport</h6>
                            <p class="text-muted small mb-0">Nearest station: Royal Albert DLR. We recommend using public transport where possible.</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <div class="event-info-card-icon" style="flex-shrink: 0;">
                            <i class="fas fa-parking"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0">Parking</h6>
                            <p class="text-muted small mb-0">Limited paid on-site parking available.</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <div class="event-info-card-icon" style="flex-shrink: 0;">
                            <i class="far fa-calendar-alt"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0">Event Date</h6>
                            <p class="text-muted small mb-0">14th June 2026</p>
                        </div>
                    </div>
                </div>
                
                <a href="https://maps.google.com/?q=London+Regatta+Centre" target="_blank" class="btn btn-teal px-5 py-3 rounded-pill fw-bold">Open in Maps <i class="fas fa-external-link-alt ms-2"></i></a>
            </div>
        </div>
    </div>
</section>

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