<?php
$contactHeroImg = 'https://media.base44.com/images/public/69e66d4f5cbdfbede14257e1/c35749a2d_generated_image.png';
include 'includes/header.php';
?>

<section class="ref-hero-image">
    <div class="ref-hero-image-bg" aria-hidden="true">
        <img src="<?php echo htmlspecialchars($contactHeroImg, ENT_QUOTES, 'UTF-8'); ?>" alt="Contact Us" width="1920" height="1080" class="ref-hero-image-photo" loading="eager" decoding="async">
        <div class="ref-hero-image-overlay"></div>
    </div>
    <div class="container ref-hero-image-inner px-3 px-sm-4">
        <h1 class="ref-hero-title text-white mb-4">Contact Us</h1>
        <p class="ref-hero-lead text-white opacity-75 mx-auto mb-0">Have questions? We'd love to hear from you. Get in touch and we'll respond as soon as possible.</p>
    </div>
</section>

<section class="ref-page-section">
    <div class="container ref-max-6xl px-3 px-sm-4 py-4 py-md-5">
        <div class="row g-5">
            <div class="col-lg-5">
                <h2 class="ref-sidebar-title mb-4">Get In Touch</h2>
                <div class="d-flex flex-column gap-4 mb-4">
                    <div class="d-flex gap-3">
                        <div class="form-page-icon-tile">
                            <i data-lucide="mail" class="lucide-20 text-primary"></i>
                        </div>
                        <div>
                            <p class="fw-medium small mb-1">Email</p>
                            <a href="mailto:Bridgewatertrust@yahoo.com" class="text-muted small text-decoration-none ref-link-muted">Bridgewatertrust@yahoo.com</a>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <div class="form-page-icon-tile">
                            <i data-lucide="map-pin" class="lucide-20 text-primary"></i>
                        </div>
                        <div>
                            <p class="fw-medium small mb-1">Venue</p>
                            <p class="text-muted small mb-0">London Regatta Centre, Dockside Road, London, E16 2QT</p>
                        </div>
                    </div>
                </div>
                <h3 class="fw-medium small mb-3">Follow Us</h3>
                <div class="d-flex gap-3">
                    <a href="https://www.facebook.com/charityboatrace" target="_blank" rel="noopener noreferrer" class="form-page-social" aria-label="Facebook">
                        <i data-lucide="facebook" class="lucide-20"></i>
                    </a>
                    <a href="https://www.youtube.com/channel/UCjKwxM_QV1ZMwTjQUdvQnOw" target="_blank" rel="noopener noreferrer" class="form-page-social" aria-label="YouTube">
                        <i data-lucide="youtube" class="lucide-20"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="form-page-card card border-0 shadow-lg rounded-4">
                    <div class="card-body p-4 p-md-5 ref-contact-form-body">
                        <form action="handlers/global-handler.php" method="POST" data-ajax-handler="global" autocomplete="on">
                            <input type="hidden" name="registration_type" value="contact">
                            <div class="d-flex flex-column gap-4 ref-form-stack">
                                <div class="row g-4 ref-form-row-tight">
                                    <div class="col-sm-6">
                                        <label class="form-label form-page-label" for="name">Full Name</label>
                                        <input type="text" class="form-control form-page-control ref-input-tight" id="name" name="name" placeholder="Your name" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="form-label form-page-label" for="email">Email</label>
                                        <input type="email" class="form-control form-page-control ref-input-tight" id="email" name="email" placeholder="you@example.com" required>
                                    </div>
                                </div>
                                <div>
                                    <label class="form-label form-page-label" for="phone">Phone (Optional)</label>
                                    <input type="tel" class="form-control form-page-control ref-input-tight mt-1" id="phone" name="phone" placeholder="Your phone number">
                                </div>
                                <div>
                                    <label class="form-label form-page-label" for="subject">Subject</label>
                                    <input type="text" class="form-control form-page-control ref-input-tight mt-1" id="subject" name="subject" placeholder="What's this about?" required>
                                </div>
                                <div>
                                    <label class="form-label form-page-label" for="message">Message</label>
                                    <textarea class="form-control form-page-control ref-input-tight mt-1" id="message" name="message" rows="5" placeholder="Tell us more..." required></textarea>
                                </div>
                                <div class="pt-1">
                                    <button type="submit" class="btn w-100 ref-btn-submit-primary d-inline-flex align-items-center justify-content-center gap-2 rounded-pill fw-semibold">
                                        <i data-lucide="send" class="lucide-16"></i>
                                        Send Message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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