<section id="hero" class="hero-section text-white d-flex align-items-center">
    <div class="overlay"></div>

    <div class="container position-relative">
        <div class="row align-items-center">

            <!-- Left Content -->
            <div class="col-lg-6">
                <h1 class="display-4 font-weight-bold mb-3">
                    Executive Mobility, <span class="text-gold">Redefined</span>
                </h1>
                <p class="lead mb-4">
                    Premium airport transfers, limousine services, and bespoke concierge coordination across Singapore.
                </p>
                <a href="booking.php" class="btn btn-gold btn-lg">
                    Book Now
                </a>
            </div>

            <!-- Right Quick Estimator -->
            <div class="col-lg-6">
                <div class="card estimator-card shadow-lg">
                    <div class="card-body">

                        <h5 class="mb-3 text-center">Quick Price Check</h5>

                        <form id="priceEstimatorForm">
                            <div class="form-group">
                                <label>Service Type</label>
                                <select class="form-control" name="service_type" required>
                                    <option value="">Select Service</option>
                                    <option value="arrival">Airport Arrival</option>
                                    <option value="departure">Airport Departure</option>
                                    <option value="point">Point to Point</option>
                                    <option value="city">City Tour</option>
                                    <option value="limousine">Limousine</option>
                                    <option value="hourly">Hourly Booking</option>
                                </select>
                            </div>

                            <div class="form-group zone-group d-none">
                                <label>Pickup Zone</label>
                                <select class="form-control" name="zone">
                                    <option value="east">East</option>
                                    <option value="north">North</option>
                                    <option value="west">West</option>
                                    <option value="central">Central</option>
                                </select>
                            </div>

                            <div class="form-group hour-group d-none">
                                <label>Number of Hours</label>
                                <input type="number" class="form-control" name="hours" min="1" value="1">
                            </div>

                            <button type="submit" class="btn btn-gold btn-block">
                                Calculate
                            </button>
                        </form>

                        <div class="result mt-3 text-center d-none">
                            <h4 class="text-gold">$<span id="estimatedPrice">0</span></h4>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
