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

<section class="form-page-hero form-page-hero--primary">
    <div class="form-page-hero-decoration" aria-hidden="true"></div>
    <div class="container text-center position-relative" style="z-index: 2;">
        <div class="form-page-pill text-white mb-4 mx-auto">
            <i data-lucide="users" class="lucide-16"></i>
            <span>Team Registration</span>
        </div>
        <h1 class="form-page-hero-title text-white mb-3">Register Your Team</h1>
        <p class="form-page-hero-lead text-white opacity-75 mx-auto mb-4">Join the Charity Boat Race 2026. Fill in the form below and we'll be in touch.</p>
        <div class="form-page-meta text-white opacity-75 mt-4">
            <div class="form-page-meta-item">
                <i data-lucide="calendar" class="lucide-16"></i>
                <span>14th June 2026</span>
            </div>
            <div class="form-page-meta-item">
                <i data-lucide="ship" class="lucide-16"></i>
                <span>Team-based racing</span>
            </div>
            <div class="form-page-meta-item">
                <i data-lucide="trophy" class="lucide-16"></i>
                <span>Trophies &amp; prizes</span>
            </div>
        </div>
    </div>
</section>

<section class="py-5 form-page-section">
    <div class="container py-0">
        <div class="form-page-frame mx-auto">
            <div class="form-page-card card border-0 shadow-lg rounded-4">
                <div class="card-body p-4 p-md-5">
                    <form action="handlers/global-handler.php" method="POST" data-ajax-handler="global" autocomplete="on">
                        <input type="hidden" name="registration_type" value="event">

                        <div class="mb-4">
                            <h2 class="form-page-card-title mb-1">Team Registration</h2>
                            <p class="form-page-card-sub text-muted small mb-0">Entry: FREE with £2,000 fundraising target for Muslim Charity, or £600 flat fee.</p>
                        </div>

                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label form-page-label" for="full_name">Full Name *</label>
                                <input type="text" class="form-control form-page-control" id="full_name" name="full_name" placeholder="Your full name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label form-page-label" for="team_name">Team Name *</label>
                                <input type="text" class="form-control form-page-control" id="team_name" name="team_name" placeholder="Your team name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label form-page-label" for="email">Email *</label>
                                <input type="email" class="form-control form-page-control" id="email" name="email" placeholder="you@example.com" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label form-page-label" for="phone">Phone *</label>
                                <input type="tel" class="form-control form-page-control" id="phone" name="phone" placeholder="Your phone number" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label form-page-label" for="category">Category *</label>
                                <select class="form-select form-page-control" id="category" name="category" required>
                                    <option value="" disabled selected>Select your category</option>
                                    <option value="upazilla">Upazilla No-Ka Bais</option>
                                    <option value="sisters">Sisters Race</option>
                                    <option value="masjid">Masjid Challenge</option>
                                    <option value="community">Community Leaders Cup</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label form-page-label" for="notes">Additional Notes</label>
                                <textarea class="form-control form-page-control" id="notes" name="notes" rows="3" placeholder="Anything else you'd like us to know?"></textarea>
                            </div>
                            <div class="col-12 pt-1">
                                <button type="submit" class="btn w-100 form-page-btn-secondary py-2 rounded-pill fw-semibold">Submit Registration</button>
                            </div>
                            <div class="col-12">
                                <p class="text-center text-muted small mb-0">Looking to book a stall instead? <a href="register-stall.php" class="text-decoration-none fw-medium" style="color: hsl(187, 65%, 35%);">Register here</a></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

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