<?php
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/countries-list.php';
$settings = getSettings();

$pageTitle = $settings['seo_register_title'];
$pageDesc = $settings['seo_register_desc'];

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

<section class="page-hero">
    <div class="container">
        <span class="section-label">Exhibit</span>
        <h1 class="section-title">Book a Stand — 16th Ethiopia Food Expo 2026</h1>
        <nav class="breadcrumb-nav mt-2">
            <a href="<?php echo BASE_URL; ?>/index.php">Home</a>
            <span>/</span>
            Book a Stand
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row g-4">
            <!-- Left — Enquiry Form -->
            <div class="col-lg-7 reveal">
                <div class="section-card">
                    <h3 style="font-family:var(--font-heading);font-size:1rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:1.25rem;">Stand Enquiry Form</h3>
                    <p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1.25rem;">Fill in the form below and our team will get back to you within 24 hours with stand availability and pricing.</p>

                    <form action="<?php echo BASE_URL; ?>/send-form.php" method="POST" class="ajax-form">
                        <input type="hidden" name="form_type" value="register">
                        <div class="form-error alert alert-danger" style="display:none;margin-bottom:1rem;"></div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Company Name *</label>
                                <input type="text" name="company_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Website</label>
                                <input type="url" name="website" class="form-control" placeholder="https://">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">First Name *</label>
                                <input type="text" name="first_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Last Name *</label>
                                <input type="text" name="last_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email *</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone *</label>
                                <input type="tel" name="phone" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Country *</label>
                                <select name="country" class="form-select" required>
                                    <option value="">Select Country</option>
                                    <?php renderCountryOptions(); ?>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Stand Type *</label>
                                <select name="stand_type" class="form-select" required>
                                    <option value="">Select Stand Type</option>
                                    <option value="Shell Scheme 9 sqm">Shell Scheme — 9 sqm</option>
                                    <option value="Shell Scheme 12 sqm">Shell Scheme — 12 sqm</option>
                                    <option value="Shell Scheme 18 sqm">Shell Scheme — 18 sqm</option>
                                    <option value="Space Only 18 sqm">Space Only — 18 sqm</option>
                                    <option value="Space Only 36 sqm">Space Only — 36 sqm</option>
                                    <option value="Country Pavilion 36sqm+">Country Pavilion — 36 sqm+</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Stand Size</label>
                                <input type="text" name="stand_size" class="form-control" placeholder="e.g., 18 sqm">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Product Sectors</label>
                                <input type="text" name="sectors" class="form-control" placeholder="e.g., Food Products, Beverages">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Message / Additional Requirements</label>
                                <textarea name="message" class="form-control" rows="4" placeholder="Tell us about your requirements..."></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn-green">Send Enquiry</button>
                            </div>
                        </div>
                    </form>

                    <!-- Success State -->
                    <div id="formSuccess" class="form-success" style="display:none;">
                        <div style="font-size:3rem;margin-bottom:1rem;">✓</div>
                        <h3 style="font-family:var(--font-heading);font-size:1.1rem;text-transform:uppercase;color:var(--green);margin-bottom:0.5rem;">Enquiry Received</h3>
                        <p style="color:var(--text-secondary);font-size:0.9rem;">Thank you for your interest. Our team will contact you within 24 hours with stand availability and pricing information.</p>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar -->
            <div class="col-lg-5">
                <div class="section-card mb-3 reveal">
                    <h4 style="font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1rem;">Event Details</h4>
                    <p style="font-size:0.88rem;color:var(--text-body);margin-bottom:0.5rem;"><strong>Date:</strong> 16–18 November 2026</p>
                    <p style="font-size:0.88rem;color:var(--text-body);margin-bottom:0.5rem;"><strong>Venue:</strong> Millennium Hall, Addis Ababa</p>
                    <p style="font-size:0.88rem;color:var(--text-body);margin:0;"><strong>Edition:</strong> 16th Ethiopia Food Expo</p>
                </div>

                <div class="section-card mb-3 reveal">
                    <h4 style="font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1rem;">Countdown to Expo</h4>
                    <div class="countdown-wrap" data-countdown="2026-11-16" style="justify-content:center;">
                        <div class="countdown-box" style="background:var(--green-dim);border-color:var(--green);"><span class="countdown-number" style="color:var(--green-dark);">00</span><span class="countdown-label" style="color:var(--text-secondary);">Days</span></div>
                        <span class="countdown-sep" style="color:var(--green);">:</span>
                        <div class="countdown-box" style="background:var(--green-dim);border-color:var(--green);"><span class="countdown-number" style="color:var(--green-dark);">00</span><span class="countdown-label" style="color:var(--text-secondary);">Hours</span></div>
                        <span class="countdown-sep" style="color:var(--green);">:</span>
                        <div class="countdown-box" style="background:var(--green-dim);border-color:var(--green);"><span class="countdown-number" style="color:var(--green-dark);">00</span><span class="countdown-label" style="color:var(--text-secondary);">Mins</span></div>
                        <span class="countdown-sep" style="color:var(--green);">:</span>
                        <div class="countdown-box" style="background:var(--green-dim);border-color:var(--green);"><span class="countdown-number" style="color:var(--green-dark);">00</span><span class="countdown-label" style="color:var(--text-secondary);">Secs</span></div>
                    </div>
                </div>

                <div class="section-card mb-3 reveal">
                    <h4 style="font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1rem;">Contact</h4>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        <a href="tel:<?php echo e(preg_replace('/[^0-9+]/','',$settings['phone'])); ?>" style="color:var(--text-body);text-decoration:none;"><?php echo e($settings['phone']); ?></a>
                    </div>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                        <a href="mailto:<?php echo e($settings['email']); ?>" style="color:var(--text-body);text-decoration:none;"><?php echo e($settings['email']); ?></a>
                    </div>
                    <a href="https://wa.me/<?php echo e($settings['whatsapp']); ?>" class="btn-green w-100 text-center mt-2" target="_blank" style="font-size:0.8rem;padding:0.5rem;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:middle;margin-right:0.4rem;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                        Chat on WhatsApp
                    </a>
                </div>

                <div class="section-card reveal">
                    <h4 style="font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1rem;">What Happens Next?</h4>
                    <div class="process-step">
                        <div class="process-num">1</div>
                        <div>
                            <div class="process-title">Submit Enquiry</div>
                            <div class="process-desc">Fill in the form with your details and stand preferences.</div>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="process-num">2</div>
                        <div>
                            <div class="process-title">Receive Proposal</div>
                            <div class="process-desc">Our team sends stand options and pricing within 24 hours.</div>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="process-num">3</div>
                        <div>
                            <div class="process-title">Confirm &amp; Prepare</div>
                            <div class="process-desc">Sign the contract, make payment, and receive your exhibitor manual.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="cta-banner">
    <div class="container reveal">
        <span class="section-label" style="color:rgba(255,255,255,0.7);border-left-color:rgba(255,255,255,0.4);">We're Here to Help</span>
        <h2 class="cta-title">Need Help Choosing a Stand?</h2>
        <p class="cta-sub">Our team is available to help you select the best stand option for your budget and objectives.</p>
        <div>
            <a href="https://wa.me/<?php echo e($settings['whatsapp']); ?>" class="btn-white me-2 mb-2" target="_blank">WhatsApp Us</a>
            <a href="<?php echo BASE_URL; ?>/contact.php" class="btn-red-outline mb-2">Contact Us</a>
        </div>
    </div>
</section>

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