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

<!-- Contact Hero -->
<section class="internal-hero" style="background-image: linear-gradient(rgba(31, 134, 147, 0.4), rgba(31, 134, 147, 0.4)), url('home banner image.webp'); background-size: cover; background-position: center;">
    <div class="container py-5 text-center internal-hero-content">
        <h1 class="display-3 fw-bold text-white mb-3" style="font-family: var(--font-heading);">Contact Us</h1>
        <p class="lead text-white opacity-90 mx-auto" style="max-width: 700px;">Have questions? We'd love to hear from you. Get in touch and we'll respond as soon as possible.</p>
    </div>
</section>

<!-- Contact Section -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="row justify-content-center g-5">
            <div class="col-lg-8">
                <div class="mb-5">
                    <h2 class="fw-bold mb-4" style="font-family: var(--font-heading);">Get In Touch</h2>
                    
                    <div class="d-flex flex-column gap-3 mb-5">
                        <div class="event-info-card border-0 shadow-none bg-light" style="background-color: #f8fafc !important;">
                            <div class="event-info-card-icon" style="background-color: #e2e8f0; color: #1f8693;">
                                <i class="far fa-envelope"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-0">Email</h6>
                                <p class="text-muted small mb-0">bridgewatertrust@yahoo.com</p>
                            </div>
                        </div>
                        <div class="event-info-card border-0 shadow-none bg-light" style="background-color: #f8fafc !important;">
                            <div class="event-info-card-icon" style="background-color: #e2e8f0; color: #1f8693;">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-0">Venue</h6>
                                <p class="text-muted small mb-0">London Regatta Centre, Dockside Road, London, E16 2QT</p>
                            </div>
                        </div>
                    </div>
                    
                    <h6 class="fw-bold mb-3 small text-uppercase tracking-wider">Follow Us</h6>
                    <div class="d-flex gap-3 mb-5">
                        <a href="#" class="bg-light p-3 rounded-3 text-dark d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; text-decoration: none;">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="bg-light p-3 rounded-3 text-dark d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; text-decoration: none;">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>

                <div class="card border-0 shadow-lg p-5 rounded-4">
                    <form action="handlers/contact-handler.php" method="POST">
                        <div class="row g-4">
                            <div class="col-12">
                                <label class="form-label fw-bold">Full Name</label>
                                <input type="text" name="name" class="form-control border p-3 rounded-3 shadow-none" placeholder="Your name" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Email</label>
                                <input type="email" name="email" class="form-control border p-3 rounded-3 shadow-none" placeholder="you@example.com" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Phone (Optional)</label>
                                <input type="text" name="phone" class="form-control border p-3 rounded-3 shadow-none" placeholder="Your phone number">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Subject</label>
                                <input type="text" name="subject" class="form-control border p-3 rounded-3 shadow-none" placeholder="What's this about?" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Message</label>
                                <textarea name="message" class="form-control border p-3 rounded-3 shadow-none" rows="5" placeholder="Tell us more..." required></textarea>
                            </div>
                            <div class="col-12 pt-2">
                                <button type="submit" class="btn btn-teal w-100 py-3 fw-bold rounded-pill shadow-none" style="background-color: #318a99;">
                                    <i class="fas fa-paper-plane me-2"></i> Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

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