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

<section class="form-page-hero form-page-hero--secondary">
    <div class="form-page-hero-decoration form-page-hero-decoration--secondary" aria-hidden="true"></div>
    <div class="container text-center position-relative" style="z-index: 2;">
        <div class="form-page-pill form-page-pill--secondary text-white mb-4 mx-auto">
            <i data-lucide="store" class="lucide-16"></i>
            <span>Stall Booking</span>
        </div>
        <h1 class="form-page-hero-title text-white mb-3">Book a Stall</h1>
        <p class="form-page-hero-lead text-white opacity-75 mx-auto mb-0">Showcase your business, food, or cause at the Charity Boat Race 2026. All vendors welcome!</p>
    </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="stall">

                        <div class="mb-4">
                            <h2 class="form-page-card-title mb-1">Stall Booking Form</h2>
                            <p class="form-page-card-sub text-muted small mb-0">Please fill in the details below and we'll get back to you with pricing and availability.</p>
                        </div>

                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label form-page-label" for="contact_name">Contact Name *</label>
                                <input type="text" class="form-control form-page-control" id="contact_name" name="contact_name" placeholder="Your full name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label form-page-label" for="business_name">Business / Organisation *</label>
                                <input type="text" class="form-control form-page-control" id="business_name" name="business_name" placeholder="Your business 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="stall_type">Stall Type *</label>
                                <select class="form-select form-page-control" id="stall_type" name="stall_type" required>
                                    <option value="" disabled selected>What type of stall?</option>
                                    <option value="food">Food &amp; Drink</option>
                                    <option value="clothing">Clothing &amp; Fashion</option>
                                    <option value="crafts">Handmade Crafts</option>
                                    <option value="community">Community Organisation</option>
                                    <option value="charity">Charity / Non-Profit</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label form-page-label" for="description">Description of Products / Services *</label>
                                <textarea class="form-control form-page-control" id="description" name="description" rows="4" placeholder="Tell us what you'll be offering..." required></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label form-page-label" for="requirements">Special Requirements</label>
                                <textarea class="form-control form-page-control" id="requirements" name="requirements" rows="2" placeholder="Power supply, extra space, etc."></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 Stall Booking</button>
                            </div>
                            <div class="col-12">
                                <p class="text-center text-muted small mb-0">Want to register a race team instead? <a href="register-event.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'; ?>
