@include('header')

<style>
.flyer-curr-loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(212, 167, 98, 0.15);
    border: 1px solid rgba(212, 167, 98, 0.45);
    color: #F5D78E;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.1;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.flyer-curr-loc-btn:hover {
    background: #D4A762;
    color: #080A0E;
    border-color: #D4A762;
    box-shadow: 0 0 8px rgba(212, 167, 98, 0.4);
}
.flyer-curr-loc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
@media (max-width: 767px) {
    .flyer-curr-loc-btn {
        font-size: 7.5px !important;
        padding: 1px 4px !important;
        border-radius: 2px !important;
    }
}
/* Explore All / View All button small view on Home Page */
@media (min-width: 992px) {
    .flyer-section-header .sec-link,
    .sec-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: rgba(212, 167, 98, 0.08) !important;
        color: #F5D78E !important;
        border: 1px solid rgba(212, 167, 98, 0.65) !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 8px rgba(212, 167, 98, 0.1) !important;
        white-space: nowrap !important;
    }

    .flyer-section-header .sec-link i,
    .sec-link i {
        font-size: 10px !important;
        transition: transform 0.2s ease !important;
    }
}

@media (max-width: 991px) {
    .flyer-section-header .sec-link,
    .sec-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        background: rgba(212, 167, 98, 0.1) !important;
        border: 0.8px solid rgba(212, 167, 98, 0.6) !important;
        color: #F5D78E !important;
        padding: 2px 7px !important;
        border-radius: 12px !important;
        font-size: 7.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        line-height: 1.15 !important;
        transition: all 0.2s ease !important;
    }

    .flyer-section-header .sec-link i,
    .sec-link i {
        font-size: 6px !important;
    }
}

.flyer-section-header .sec-link:hover,
.sec-link:hover {
    background: #D4A762 !important;
    border-color: #D4A762 !important;
    color: #080A0E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(212, 167, 98, 0.35) !important;
}

.flyer-section-header .sec-link:hover i,
.sec-link:hover i {
    color: #080A0E !important;
    transform: translateX(2px) !important;
}
</style>

<div class="mj-flyer-homepage">

    <!-- 01. HERO SECTION -->
    <section class="flyer-hero-section">
        <!-- Hero Background Images Auto-Slider (5 States: Tamil Nadu, Kerala, Pondicherry, Andhra Pradesh, Karnataka) -->
        <div class="flyer-hero-bg-slider" id="flyerHeroBgSlider">
            <div class="flyer-hero-slide active" style="background-image: url('{{ asset('images/hero_slider_india.jpeg') }}');" aria-label="India Tour Cab"></div>
            <div class="flyer-hero-slide" style="background-image: url('{{ asset('images/hero_slider_tamilnadu.jpeg') }}');" aria-label="Tamil Nadu Tour Cab"></div>
            <div class="flyer-hero-slide" style="background-image: url('{{ asset('images/hero_slider_pondicherry.jpeg') }}');" aria-label="Pondicherry Tour Cab"></div>
            <div class="flyer-hero-slide" style="background-image: url('{{ asset('images/hero_slider_kerala.jpeg') }}');" aria-label="Kerala Tour Cab"></div>
            <div class="flyer-hero-slide" style="background-image: url('{{ asset('images/hero_slider_karnataka.jpeg') }}');" aria-label="Karnataka Tour Cab"></div>
            <div class="flyer-hero-slide" style="background-image: url('{{ asset('images/hero_slider_andhra.jpeg') }}');" aria-label="Andhra Pradesh Tour Cab"></div>
        </div>
        <div class="flyer-hero-overlay"></div>
        <div class="container position-relative flyer-hero-content-wrap">
            <div class="row align-items-center flyer-hero-main-row">
                <!-- Left Details -->
                <div class="col-lg-6 col-md-12 flyer-hero-left-col">
                    <span class="flyer-tagline">TRAVEL BEYOND LIMITS</span>
                    <h1 class="flyer-hero-title">
                        Car Rental in Trichy
                    </h1>
                    <h2 class="flyer-hero-subtitle" style="font-size: 20px;"><span style="color: #ffe4b8ff;">Your Journey Our Responsibility</span></h2>
                    <p class="flyer-hero-subtitle">
                        Cars | Travellers | Airport Transfers<br>
                        Outstation Trips | Temple Visits | Local Rentals
                    </p>

                    <!-- Trust Badges -->
                    <div class="flyer-trust-badges">
                        <div class="flyer-trust-badge">
                            <div class="badge-icon"><i class="fa-solid fa-shield-halved"></i></div>
                            <span>Safe &amp; Reliable</span>
                        </div>
                        <div class="flyer-trust-badge">
                            <div class="badge-icon"><i class="fa-solid fa-user-tie"></i></div>
                            <span>Professional Drivers</span>
                        </div>
                        <div class="flyer-trust-badge flyer-badge-clean">
                            <div class="badge-icon"><i class="fa-solid fa-car-side"></i></div>
                            <span>Neat and Clean Vehicles</span>
                        </div>
                        <div class="flyer-trust-badge">
                            <div class="badge-icon"><i class="fa-solid fa-thumbs-up"></i></div>
                            <span>24/7 Support</span>
                        </div>
                    </div>
                </div>

                <!-- Right Visual Area on Desktop -->
                <div class="col-lg-6 d-none d-lg-block" style="min-height: 220px;"></div>
            </div>

            <!-- Booking Search Box -->
            <div class="flyer-search-box">
                <div class="flyer-trip-tabs" id="tripTabs">
                    <button type="button" class="flyer-tab-btn active" data-tab="One Way">One Way</button>
                    <button type="button" class="flyer-tab-btn" data-tab="Round Trip">Round Trip</button>
                    <button type="button" class="flyer-tab-btn" data-tab="Airport Transfer">Airport Transfer</button>
                </div>
                <form id="flyerSearchForm" onsubmit="handleFlyerSearch(event)">
                    <div class="flyer-search-grid">
                        <div class="flyer-input-group flyer-grp-pickup">
                            <div class="d-flex align-items-center justify-content-between mb-1" style="gap: 4px;">
                                <label style="margin: 0 !important;">Pickup Location</label>
                                <button type="button" class="flyer-curr-loc-btn" id="btnFlyerCurrentLoc" title="Click to use Current Location">
                                    <i class="fa-solid fa-location-crosshairs"></i>
                                    <span class="d-none d-sm-inline">Current</span>
                                </button>
                            </div>
                            <div class="flyer-select-wrap">
                                <input type="text" class="flyer-input-control" id="flyerPickup" list="flyerPickupOptions" value="Trichy" placeholder="Enter pickup location" required style="cursor: text;">
                                <datalist id="flyerPickupOptions">
                                    <option value="Trichy">Trichy</option>
                                    <option value="Trichy Airport (TRZ)">Trichy Airport (TRZ)</option>
                                    <option value="Trichy Railway Junction">Trichy Railway Junction</option>
                                    <option value="Subramaniyapuram / TVS Tolgate">Subramaniyapuram / TVS Tolgate</option>
                                    <option value="Srirangam">Srirangam</option>
                                    <option value="Thillai Nagar">Thillai Nagar</option>
                                    <option value="KK Nagar">KK Nagar</option>
                                    <option value="Samayapuram">Samayapuram</option>
                                    <option value="Cantonment">Cantonment</option>
                                </datalist>
                            </div>
                        </div>
                        <div class="flyer-input-group flyer-grp-dest">
                            <label>Destination</label>
                            <div class="flyer-select-wrap">
                                <input type="text" class="flyer-input-control" id="flyerDestination" list="flyerDestOptions" placeholder="Where to?" required style="cursor: text;">
                                <datalist id="flyerDestOptions">
                                    <option value="Velankanni Church">Velankanni Church</option>
                                    <option value="Nagore Masuthi">Nagore Masuthi</option>
                                    <option value="Local Trichy Sightseeing">Local Trichy Sightseeing</option>
                                    <option value="Srirangam & Samayapuram Temples">Srirangam &amp; Samayapuram</option>
                                    <option value="Thanjavur Big Temple">Thanjavur Big Temple</option>
                                    <option value="Rameswaram">Rameswaram</option>
                                    <option value="Kodaikanal">Kodaikanal</option>
                                    <option value="Ooty">Ooty</option>
                                    <option value="Kumbakonam Navagraha">Kumbakonam Navagraha</option>
                                    <option value="Chennai">Chennai</option>
                                    <option value="Bangalore">Bangalore</option>
                                    <option value="Coimbatore">Coimbatore</option>
                                    <option value="Madurai">Madurai</option>
                                    <option value="Palani">Palani</option>
                                    <option value="Pondicherry">Pondicherry</option>
                                    <option value="Yercaud">Yercaud</option>
                                    <option value="Kolli Hills">Kolli Hills</option>
                                    <option value="Munnar">Munnar</option>
                                </datalist>
                            </div>
                        </div>
                        <div class="flyer-input-group flyer-grp-date">
                            <label>Date</label>
                            <div class="flyer-select-wrap">
                                <input type="text" class="flyer-input-control flyer-picker-input" id="flyerDate" placeholder="Select Date" onfocus="this.type='date'; try{this.showPicker()}catch(e){}" onblur="if(!this.value){this.type='text'}" required>
                                <i class="fa-solid fa-chevron-down flyer-select-caret"></i>
                            </div>
                        </div>
                        <div class="flyer-input-group flyer-grp-time d-none d-md-flex">
                            <label>Time</label>
                            <div class="flyer-select-wrap">
                                <input type="text" class="flyer-input-control flyer-picker-input" id="flyerTime" placeholder="Select Time" onfocus="this.type='time'; try{this.showPicker()}catch(e){}" onblur="if(!this.value){this.type='text'}">
                                <i class="fa-solid fa-chevron-down flyer-select-caret"></i>
                            </div>
                        </div>
                        <div class="flyer-input-group flyer-grp-passengers d-none d-md-flex">
                            <label>Vehicle / Category</label>
                            <div class="flyer-select-wrap">
                                <select class="flyer-input-control" id="flyerPassengers">
                                    <option value="" disabled selected hidden>Choose Vehicle</option>
                                    <option value="Sedan (4 Seater)">Sedan (4 Seater)</option>
                                    <option value="Maruti Suzuki Dzire (4 Seater)">Maruti Suzuki Dzire (4 Seater)</option>
                                    <option value="Maruti Suzuki Ertiga (7 Seater)">Maruti Suzuki Ertiga (7 Seater)</option>
                                    <option value="Mahindra Xylo (SUV / 7 Seater)">Mahindra Xylo (SUV / 7 Seater)</option>
                                    <option value="Toyota Innova (Premium 7 Seater)">Toyota Innova (Premium 7 Seater)</option>
                                    <option value="Force Traveller / Tempo Traveller">Force Traveller / Tempo Traveller</option>
                                    <option value="Force Urbania (Luxury Van)">Force Urbania (Luxury Van)</option>
                                </select>
                                <i class="fa-solid fa-chevron-down flyer-select-caret"></i>
                            </div>
                        </div>
                        <div class="flyer-input-group flyer-grp-btn">
                            <button type="submit" class="flyer-search-btn" title="Send WhatsApp Enquiry">
                                <i class="fa-brands fa-whatsapp"></i>
                                <span>Send</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- HOMEPAGE SECTIONS CONTAINER -->
    <div class="container pt-2 pt-md-4 flyer-content-container">

        <!-- 02. OUR SERVICES -->
        <section class="flyer-services-section" id="ourServices">
            <div class="flyer-section-header">
                <div>
                    <h2 class="sec-title">Our Services</h2>
                    <p class="sec-subtitle">Choose your journey. We'll take care of the rest.</p>
                </div>
                <a href="{{ url('/services') }}" class="sec-link">Explore All <i class="fa-solid fa-arrow-right"></i></a>
            </div>
            <div class="flyer-services-container">
                <!-- Row 1: 4 Cards -->
                <div class="flyer-services-row flyer-services-row-4">
                    <!-- 1. Local Rentals & Packages -->
                    <a href="{{ url('/local-taxi-service-in-trichy') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/service_local_city.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Local Rentals<br>&amp; Packages</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                    <!-- 2. Outstation Trips -->
                    <a href="{{ url('/outstation-taxi-service-in-trichy') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/mj_outstation_hd.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Outstation<br>Trips</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                    <!-- 3. Airport Transfers -->
                    <a href="{{ url('/trichy-airport-taxi') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/mj_airport_hd.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Airport<br>Transfers</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                    <!-- 4. Railway Transfers -->
                    <a href="{{ url('/trichy-railway-station-taxi') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/mj_railway_station.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Railway<br>Transfers</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                </div>

                <!-- Row 2: 4 Cards -->
                <div class="flyer-services-row flyer-services-row-4">
                    <!-- 5. Pickup & Drop -->
                    <a href="{{ url('/pickup-and-drop-taxi-in-trichy') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/about_chauffeur_service.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Pickup &amp;<br>Drop</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                    <!-- 6. Corporate & Business Trips -->
                    <a href="{{ url('/corporate-travel-services-in-trichy') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/service_business_bmw.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Corporate &amp;<br>Business Trips</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                    <!-- 7. Wedding Travel -->
                    <a href="{{ url('/wedding-car-rental-in-trichy') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/wedding.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Wedding<br>Travel</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                    <!-- 8. Family Trips -->
                    <a href="{{ url('/family-taxi-service-in-trichy') }}" class="flyer-service-card" style="background-image: url('{{ asset('images/tours_holidays_promo.jpg') }}');">
                        <div class="flyer-service-card-body">
                            <h3 class="flyer-service-card-title">Family<br>Trips</h3>
                            <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <!-- 03. CHOOSE YOUR VEHICLE -->
        <section class="flyer-vehicle-section" id="featuredVehicles">
            <div class="flyer-section-header">
                <div>
                    <h2 class="sec-title">Choose Your Vehicle</h2>
                    <p class="sec-subtitle">A perfect ride for every journey.</p>
                </div>
                <a href="{{ url('/mj-car-rentals-vehicles') }}" class="sec-link">View All <i class="fa-solid fa-arrow-right"></i></a>
            </div>

            <!-- Filter Tabs -->
            <div class="flyer-filter-tabs" id="vehicleFilterTabs">
                <button type="button" class="flyer-filter-btn active" data-filter="all">All</button>
                <button type="button" class="flyer-filter-btn" data-filter="sedan">Sedan</button>
                <button type="button" class="flyer-filter-btn d-none d-md-inline-flex" data-filter="4seater">4 Seater</button>
                <button type="button" class="flyer-filter-btn d-none d-md-inline-flex" data-filter="7seater">7 Seater</button>
                <button type="button" class="flyer-filter-btn" data-filter="suv">SUV</button>
                <button type="button" class="flyer-filter-btn" data-filter="crysta"><span class="d-none d-md-inline">Innova </span>Crysta</button>
                <button type="button" class="flyer-filter-btn d-none d-md-inline-flex" data-filter="premium">Premium</button>
                <button type="button" class="flyer-filter-btn" data-filter="traveller">Traveller</button>
                <button type="button" class="flyer-filter-btn d-none d-md-inline-flex" data-filter="urbania">Urbania</button>
            </div>

            <div class="flyer-vehicle-grid" id="vehicleGrid">
                <!-- Vehicle 1: Toyota Etios -->
                <div class="flyer-vcard" data-cat="sedan 4seater" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_sedan.jpg') }}" alt="Toyota Etios Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Toyota Etios</h4>
                            <p class="flyer-vcard-sub">Sedan &bull; 4 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 2: Swift Dzire -->
                <div class="flyer-vcard" data-cat="sedan 4seater" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_white_swift.jpg') }}" alt="Swift Dzire Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Swift Dzire</h4>
                            <p class="flyer-vcard-sub">Sedan &bull; 4 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 3: Mahindra Xylo -->
                <div class="flyer-vcard" data-cat="suv 7seater" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_mahindra_xylo.jpg') }}" alt="Mahindra Xylo Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Mahindra Xylo</h4>
                            <p class="flyer-vcard-sub">SUV &bull; 7/8 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 4: Maruti Suzuki Ertiga -->
                <div class="flyer-vcard" data-cat="suv 7seater" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_white_ertiga.jpg') }}" alt="Maruti Suzuki Ertiga Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Maruti Suzuki Ertiga</h4>
                            <p class="flyer-vcard-sub">SUV &bull; 7 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 5: Toyota Innova -->
                <div class="flyer-vcard" data-cat="suv 7seater" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_white_innova.jpg') }}" alt="Toyota Innova Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Toyota Innova</h4>
                            <p class="flyer-vcard-sub">SUV &bull; 7 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 6: Toyota Innova Crysta -->
                <div class="flyer-vcard" data-cat="suv premium 7seater crysta" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/mj_feat_innova_crysta.jpg') }}" alt="Toyota Innova Crysta Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Toyota Innova Crysta</h4>
                            <p class="flyer-vcard-sub">Premium SUV &bull; 7 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 7: Tempo Traveller -->
                <div class="flyer-vcard" data-cat="traveller" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_white_traveller.jpg') }}" alt="Tempo Traveller Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Tempo Traveller</h4>
                            <p class="flyer-vcard-sub">12-17 Seater</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>

                <!-- Vehicle 8: Force Urbania -->
                <div class="flyer-vcard" data-cat="urbania traveller premium" onclick="window.location.href='{{ url('/mj-car-rentals-vehicles') }}'" style="cursor: pointer;">
                    <div class="flyer-vcard-img-wrap">
                        <img src="{{ asset('images/vehicle_force_urbania.jpg') }}" alt="Force Urbania Luxury Van Rental Trichy" loading="lazy">
                    </div>
                    <div class="flyer-vcard-meta">
                        <div>
                            <h4 class="flyer-vcard-title">Force Urbania</h4>
                            <p class="flyer-vcard-sub">Luxury Van</p>
                        </div>
                        <span class="flyer-vcard-arrow"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 04. POPULAR DESTINATIONS FROM TRICHY -->
        <section class="flyer-dest-section">
            <div class="flyer-section-header">
                <div>
                    <h2 class="sec-title">Popular Destinations from Trichy</h2>
                </div>
                <a href="{{ url('/tour-packages-from-trichy') }}" class="sec-link">Explore More <i class="fa-solid fa-arrow-right"></i></a>
            </div>
            <div class="flyer-dest-grid">
                <!-- 1. Rameswaram -->
                <a href="{{ url('/rameswaram-dhanushkodi-tour-package-from-trichy') }}" class="flyer-dest-card" style="background-image: url('{{ asset('images/dest_rameswaram_hd.jpg') }}');" title="Rameswaram Dhanushkodi Tour">
                    <div class="flyer-dest-card-body">
                        <h3 class="flyer-dest-card-title">Rameswaram</h3>
                        <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </a>
                <!-- 2. Velankanni Church -->
                <a href="{{ url('/velankanni-tour-package-from-trichy') }}" class="flyer-dest-card" style="background-image: url('{{ asset('images/dest_velankanni_church.jpg') }}');" title="Velankanni Tour Package">
                    <div class="flyer-dest-card-body">
                        <h3 class="flyer-dest-card-title">Velankanni Church</h3>
                        <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </a>
                <!-- 3. Thanjavur -->
                <a href="{{ url('/thanjavur-heritage-tour-from-trichy') }}" class="flyer-dest-card" style="background-image: url('{{ asset('images/dest_thanjavur_hd.jpg') }}');" title="Thanjavur Heritage Tour">
                    <div class="flyer-dest-card-body">
                        <h3 class="flyer-dest-card-title">Thanjavur</h3>
                        <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </a>
                <!-- 4. Kodaikanal -->
                <a href="{{ url('/kodaikanal-tour-package-from-trichy') }}" class="flyer-dest-card" style="background-image: url('{{ asset('images/dest_kodaikanal_hd.jpg') }}');" title="Kodaikanal Tour Package">
                    <div class="flyer-dest-card-body">
                        <h3 class="flyer-dest-card-title">Kodaikanal</h3>
                        <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </a>
                <!-- 5. Ooty -->
                <a href="{{ url('/ooty-coonoor-tour-from-trichy') }}" class="flyer-dest-card" style="background-image: url('{{ asset('images/flyer_tours_landscape.jpg') }}');" title="Ooty Coonoor Tour">
                    <div class="flyer-dest-card-body">
                        <h3 class="flyer-dest-card-title">Ooty</h3>
                        <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </a>
                <!-- 6. Nagore Masuthi -->
                <a href="{{ url('/nagore-tour-package-from-trichy') }}" class="flyer-dest-card" style="background-image: url('{{ asset('images/dest_nagore_five_minarets.jpg') }}');" title="Nagore Tour Package">
                    <div class="flyer-dest-card-body">
                        <h3 class="flyer-dest-card-title">Nagore Masuthi</h3>
                        <span class="flyer-circle-arrow-btn"><i class="fa-solid fa-arrow-right"></i></span>
                    </div>
                </a>
            </div>
        </section>

        <!-- 05. TEMPLE TOURS & PILGRIMAGE (FEATURED BANNER) -->
        <div class="flyer-temple-banner" style="background-image: linear-gradient(90deg, rgba(9, 12, 18, 0.82) 0%, rgba(9, 12, 18, 0.5) 45%, rgba(9, 12, 18, 0.18) 100%), url('{{ asset('images/temple_pilgrimage_banner.jpg') }}'); background-position: center 12%; background-size: cover;">
            <div class="flyer-temple-banner-content">
                <h3 class="flyer-temple-title">Temple Tours &amp; Pilgrimage</h3>
                <p class="flyer-temple-sub">Divine Journeys from Trichy.</p>

                <div class="flyer-temple-badges">
                    <a href="{{ url('/navagraha-temple-tour-from-trichy') }}" class="flyer-temple-badge-item" style="text-decoration: none; color: inherit;" title="Navagraha Temple Tour">
                        <div class="temple-icon-circle"><i class="fa-solid fa-om"></i></div>
                        <span>Navagraha</span>
                    </a>
                    <a href="{{ url('/divya-desam-temple-tour-from-trichy') }}" class="flyer-temple-badge-item" style="text-decoration: none; color: inherit;" title="Divya Desam Temple Tour">
                        <div class="temple-icon-circle"><i class="fa-solid fa-gopuram"></i></div>
                        <span>Divya Desam</span>
                    </a>
                    <a href="{{ url('/srirangam-taxi-service') }}" class="flyer-temple-badge-item" style="text-decoration: none; color: inherit;" title="Srirangam Temple Taxi">
                        <div class="temple-icon-circle"><i class="fa-solid fa-place-of-worship"></i></div>
                        <span>Famous Temples</span>
                    </a>
                    <a href="{{ url('/arupadai-veedu-tour-from-trichy') }}" class="flyer-temple-badge-item" style="text-decoration: none; color: inherit;" title="Arupadai Veedu Murugan Tour">
                        <div class="temple-icon-circle"><i class="fa-solid fa-fire"></i></div>
                        <span>Murugan Temples</span>
                    </a>
                    <a href="{{ url('/amman-temple-tour-from-trichy') }}" class="flyer-temple-badge-item" style="text-decoration: none; color: inherit;" title="Amman Temple Tour">
                        <div class="temple-icon-circle"><i class="fa-solid fa-bell"></i></div>
                        <span>Amman Temples</span>
                    </a>
                </div>

                <div>
                    <a href="{{ url('/temple-tours-from-trichy') }}" class="flyer-btn-gold">
                        <span>Explore Temple Packages</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 06. TWO PROMO CARDS (AIRPORT TRANSFERS & TOURS) -->
        <section class="flyer-promos-section">
            <div class="row g-2 g-md-4 flyer-promos-row">
                <!-- Promo 1: Airport Transfers -->
                <div class="col-6 col-lg-6">
                    <div class="flyer-promo-card" style="background-image: url('{{ asset('images/mj_airport_hd.jpg') }}'); cursor: pointer;" onclick="window.location.href='{{ url('/trichy-airport-taxi') }}';">
                        <div class="flyer-promo-card-content">
                            <span class="flyer-promo-gold-tag">Airport Transfers</span>
                            <h3 class="flyer-promo-h3">Airport Pickup &amp; Drop</h3>
                            <p class="flyer-promo-tagline">On-time 24/7 transfers for Trichy &amp; nearby airports</p>

                            <div class="flyer-promo-features">
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-plane-arrival"></i></div>
                                    <span>Flight Tracking</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-clock"></i></div>
                                    <span>On-Time Pickup</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-suitcase-rolling"></i></div>
                                    <span>Luggage Help</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-house-chimney"></i></div>
                                    <span>Doorstep Drop</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-headset"></i></div>
                                    <span>24/7 Availability</span>
                                </div>
                            </div>
                        </div>

                        <div class="flyer-promo-card-btn-wrap">
                            <a href="{{ url('/trichy-airport-taxi') }}" class="flyer-btn-gold">
                                <span class="flyer-btn-text-desktop">Explore Airport Transfers</span>
                                <span class="flyer-btn-text-mobile">Airport Transfers</span>
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Promo 2: Tours & Holidays -->
                <div class="col-6 col-lg-6">
                    <div class="flyer-promo-card" style="background-image: url('{{ asset('images/tours_holidays_promo.jpg') }}'); cursor: pointer;" onclick="window.location.href='{{ url('/tour-packages-from-trichy') }}';">
                        <div class="flyer-promo-card-content">
                            <span class="flyer-promo-gold-tag">Tours &amp; Holidays</span>
                            <h3 class="flyer-promo-h3">Explore Tamil Nadu &amp; Beyond</h3>
                            <p class="flyer-promo-tagline">Custom tour packages for families &amp; groups</p>

                            <div class="flyer-promo-features">
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-mountain"></i></div>
                                    <span>Hill Stations</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-umbrella-beach"></i></div>
                                    <span>Beaches</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-landmark"></i></div>
                                    <span>Heritage</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-tree"></i></div>
                                    <span>Nature</span>
                                </div>
                                <div class="flyer-promo-f-item">
                                    <div class="f-icon"><i class="fa-solid fa-people-group"></i></div>
                                    <span>Family Trips</span>
                                </div>
                            </div>
                        </div>

                        <div class="flyer-promo-card-btn-wrap">
                            <a href="{{ url('/tour-packages-from-trichy') }}" class="flyer-btn-gold">
                                <span class="flyer-btn-text-desktop">View Tour Packages</span>
                                <span class="flyer-btn-text-mobile">Tour Packages</span>
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 07. QUICK SERVICE CARDS (3 Cards in Single Row) -->
        <section class="flyer-tri-cards-section">
            <div class="row g-2 g-md-3 flyer-tri-cards-row">
                <!-- 1. Corporate Travel -->
                <div class="col-4 col-lg-4">
                    <div class="flyer-tri-card corporate" style="background-image: linear-gradient(rgba(12, 30, 50, 0.78), rgba(6, 14, 24, 0.92)), url('{{ asset('images/service_business_bmw.jpg') }}'); cursor: pointer;" onclick="window.location.href='{{ url('/corporate-travel-services-in-trichy') }}';">
                        <div>
                            <h4 class="flyer-tri-card-title">Corporate Travel</h4>
                            <p class="flyer-tri-card-sub">Reliable transport for your business</p>
                        </div>
                        <a href="{{ url('/corporate-travel-services-in-trichy') }}" class="flyer-btn-tri">
                            <span class="flyer-btn-text-desktop">Explore Corporate Services</span>
                            <span class="flyer-btn-text-mobile">Corporate Rides</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <!-- 2. Family Trips -->
                <div class="col-4 col-lg-4">
                    <div class="flyer-tri-card family" style="background-image: linear-gradient(rgba(43, 29, 12, 0.78), rgba(20, 12, 4, 0.92)), url('{{ asset('images/tours_holidays_promo.jpg') }}'); cursor: pointer;" onclick="window.location.href='{{ url('/family-taxi-service-in-trichy') }}';">
                        <div>
                            <h4 class="flyer-tri-card-title">Family Trips</h4>
                            <p class="flyer-tri-card-sub">Comfortable travel for your loved ones</p>
                        </div>
                        <a href="{{ url('/family-taxi-service-in-trichy') }}" class="flyer-btn-tri">
                            <span class="flyer-btn-text-desktop">Plan Your Family Trip</span>
                            <span class="flyer-btn-text-mobile">Family Trips</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <!-- 3. Outstation Travel -->
                <div class="col-4 col-lg-4">
                    <div class="flyer-tri-card outstation" style="background-image: linear-gradient(rgba(10, 25, 20, 0.78), rgba(4, 15, 12, 0.92)), url('{{ asset('images/mj_outstation_hd.jpg') }}'); cursor: pointer;" onclick="window.location.href='{{ url('/outstation-taxi-service-in-trichy') }}';">
                        <div>
                            <h4 class="flyer-tri-card-title">Outstation Travel</h4>
                            <p class="flyer-tri-card-sub">Safe one-way &amp; round trip journeys</p>
                        </div>
                        <a href="{{ url('/outstation-taxi-service-in-trichy') }}" class="flyer-btn-tri">
                            <span class="flyer-btn-text-desktop">Outstation Trips</span>
                            <span class="flyer-btn-text-mobile">Outstation Trips</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 08. WHY CHOOSE MJ? -->
        <section class="flyer-why-section">
            <h2 class="flyer-why-title">Why Choose MJ?</h2>
            <div class="flyer-why-grid">
                <div class="flyer-why-item">
                    <div class="flyer-why-icon-box"><i class="fa-solid fa-gem"></i></div>
                    <span class="flyer-why-label">Well Maintained<br>Vehicles</span>
                </div>
                <div class="flyer-why-item">
                    <div class="flyer-why-icon-box"><i class="fa-solid fa-user-check"></i></div>
                    <span class="flyer-why-label">Verified<br>Drivers</span>
                </div>
                <div class="flyer-why-item">
                    <div class="flyer-why-icon-box"><i class="fa-solid fa-tags"></i></div>
                    <span class="flyer-why-label">Transparent<br>Pricing</span>
                </div>
                <div class="flyer-why-item">
                    <div class="flyer-why-icon-box"><i class="fa-solid fa-clock-rotate-left"></i></div>
                    <span class="flyer-why-label">On-Time<br>Pickup</span>
                </div>
                <div class="flyer-why-item">
                    <div class="flyer-why-icon-box"><i class="fa-solid fa-headset"></i></div>
                    <span class="flyer-why-label">24/7 Customer<br>Support</span>
                </div>
                <div class="flyer-why-item">
                    <div class="flyer-why-icon-box"><i class="fa-solid fa-map-location-dot"></i></div>
                    <span class="flyer-why-label">Trichy<br>Experts</span>
                </div>
            </div>
        </section>

        <!-- 09. WHAT OUR CUSTOMERS SAY & READY CTA -->
        <section class="flyer-reviews-section">
            <div class="flyer-section-header">
                <div>
                    <h2 class="sec-title" style="color: #FFFFFF;">What Our Customers Say</h2>
                </div>
                <a href="{{ url('/') }}" class="sec-link">View All Reviews <i class="fa-solid fa-arrow-right"></i></a>
            </div>

            <div class="flyer-reviews-box">
                <!-- Left Google Rating -->
                <div class="flyer-google-rate">
                    <div class="flyer-google-logo">
                        <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
                    </div>
                    <div class="flyer-google-score">
                        <span>4.6</span>
                        <div class="flyer-stars">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star-half-stroke"></i>
                        </div>
                    </div>
                    <p class="flyer-review-count">360+ Reviews</p>
                </div>

                <!-- Center 3 Reviews -->
                <div class="flyer-reviews-cards-wrap">
                    <!-- Review 1 -->
                    <div class="flyer-mini-review">
                        <div class="flyer-review-author">
                            <i class="fa-solid fa-circle-check"></i>
                            <span>Karthik S.</span>
                        </div>
                        <p class="flyer-review-text">Very professional service. Clean vehicle and polite driver. Highly recommended! ✓</p>
                    </div>
                    <!-- Review 2 -->
                    <div class="flyer-mini-review">
                        <div class="flyer-review-author">
                            <i class="fa-solid fa-circle-check"></i>
                            <span>Priya R.</span>
                        </div>
                        <p class="flyer-review-text">Comfortable journey. On-time pickup. Best service in Trichy.</p>
                    </div>
                    <!-- Review 3 -->
                    <div class="flyer-mini-review">
                        <div class="flyer-review-author">
                            <i class="fa-solid fa-circle-check"></i>
                            <span>Ahmed K.</span>
                        </div>
                        <p class="flyer-review-text">Best travel experience for our family trip. Will book again! ✓</p>
                    </div>
                </div>

                <!-- Right Ready CTA -->
                <div class="flyer-ready-cta">
                    <h4>Ready for Your Next Trip?</h4>
                    <div class="flyer-ready-btns">
                        <a href="https://wa.me/918526548059?text=Hi%20MJ%20Travels,%20I%20would%20like%20to%20inquire%20about%20booking%20a%20ride" target="_blank" class="flyer-btn-wa">
                            <i class="fa-brands fa-whatsapp me-1"></i> WhatsApp
                        </a>
                        <a href="tel:+918526548059" class="flyer-btn-call">
                            <i class="fa-solid fa-phone me-1"></i> Call Now
                        </a>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>

@include('footer')

<!-- Interactive Homepage Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    // 1. Set today's date as min date
    const dateInput = document.getElementById('flyerDate');
    if (dateInput) {
        const today = new Date().toISOString().split('T')[0];
        dateInput.min = today;
        dateInput.value = today;
    }

    // 2. Set default time to current time
    const timeInput = document.getElementById('flyerTime');
    if (timeInput) {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        timeInput.value = hours + ':' + minutes;
    }

    // 3. Trip Type Tab Pills
    let selectedTripType = 'One Way';
    const tripTabs = document.querySelectorAll('#tripTabs .flyer-tab-btn');
    tripTabs.forEach(function (btn) {
        btn.addEventListener('click', function () {
            tripTabs.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            selectedTripType = this.getAttribute('data-tab');
        });
    });

    // Hero Background Auto-Slider (5 States)
    const heroSlides = document.querySelectorAll('#flyerHeroBgSlider .flyer-hero-slide');
    if (heroSlides.length > 1) {
        let currentSlideIdx = 0;
        setInterval(function () {
            heroSlides[currentSlideIdx].classList.remove('active');
            currentSlideIdx = (currentSlideIdx + 1) % heroSlides.length;
            heroSlides[currentSlideIdx].classList.add('active');
        }, 4500);
    }

    // 4. Vehicle Category Filter Tabs (Desktop & mobile support)
    const filterTabs = document.querySelectorAll('#vehicleFilterTabs .flyer-filter-btn');
    const vehicleCards = document.querySelectorAll('#vehicleGrid .flyer-vcard');
    const vehicleGrid = document.getElementById('vehicleGrid');

    function applyVehicleFilter(btn) {
        if (vehicleGrid) vehicleGrid.classList.add('is-filtered');
        filterTabs.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const filter = btn.getAttribute('data-filter');

        vehicleCards.forEach(function (card) {
            const cats = (card.getAttribute('data-cat') || '').toLowerCase();
            const matches = (filter === 'all' || cats.includes(filter));
            if (matches) {
                card.classList.remove('is-hidden');
                card.style.removeProperty('display');
            } else {
                card.classList.add('is-hidden');
                card.style.setProperty('display', 'none', 'important');
            }
        });
        if (vehicleGrid) vehicleGrid.scrollLeft = 0;
    }

    filterTabs.forEach(function (btn) {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            applyVehicleFilter(this);
        });
        btn.addEventListener('touchend', function (e) {
            e.preventDefault();
            applyVehicleFilter(this);
        });
    });

    window.addEventListener('resize', function() {
        const activeBtn = document.querySelector('#vehicleFilterTabs .flyer-filter-btn.active');
        if (activeBtn) applyVehicleFilter(activeBtn);
    });

    // 4b. Custom Luxury Form Dropdowns for Home Search Banner (One Way, Round Trip, Airport Transfer)
    const optIconMap = {
        'Trichy': 'fa-solid fa-location-dot',
        'Trichy Airport (TRZ)': 'fa-solid fa-plane',
        'Trichy Railway Junction': 'fa-solid fa-train',
        'Subramaniyapuram / TVS Tolgate': 'fa-solid fa-road',
        'Srirangam': 'fa-solid fa-location-dot',
        'Thillai Nagar': 'fa-solid fa-location-dot',
        'KK Nagar': 'fa-solid fa-location-dot',
        'Samayapuram': 'fa-solid fa-location-dot',
        'Velankanni Church': 'fa-solid fa-location-dot',
        'Nagore Masuthi': 'fa-solid fa-location-dot',
        'Local Trichy Sightseeing': 'fa-solid fa-compass',
        'Srirangam & Samayapuram Temples': 'fa-solid fa-location-dot',
        'Thanjavur Big Temple': 'fa-solid fa-location-dot',
        'Rameswaram': 'fa-solid fa-location-dot',
        'Kodaikanal': 'fa-solid fa-mountain',
        'Ooty': 'fa-solid fa-mountain',
        'Kumbakonam Navagraha': 'fa-solid fa-location-dot',
        'Chennai': 'fa-solid fa-location-dot',
        'Bangalore': 'fa-solid fa-location-dot',
        'Coimbatore': 'fa-solid fa-location-dot',
        'Sedan (4 Seater)': 'fa-solid fa-car-side',
        'Maruti Suzuki Dzire (4 Seater)': 'fa-solid fa-car',
        'Maruti Suzuki Ertiga (7 Seater)': 'fa-solid fa-car',
        'Mahindra Xylo (SUV / 7 Seater)': 'fa-solid fa-car',
        'Toyota Innova (Premium 7 Seater)': 'fa-solid fa-car',
        'Force Traveller / Tempo Traveller': 'fa-solid fa-car',
        'Force Urbania (Luxury Van)': 'fa-solid fa-car'
    };

    function initCustomDropdowns() {
        const searchForm = document.getElementById('flyerSearchForm');
        if (!searchForm) return;

        const selectWraps = searchForm.querySelectorAll('.flyer-select-wrap');
        selectWraps.forEach(function(wrap) {
            const select = wrap.querySelector('select.flyer-input-control');
            if (!select) return;

            // Keep native select hidden but functional
            select.style.position = 'absolute';
            select.style.opacity = '0';
            select.style.pointerEvents = 'none';
            select.style.width = '0';
            select.style.height = '0';
            select.tabIndex = -1;

            const existingDisplay = wrap.querySelector('.flyer-custom-select-display');
            if (existingDisplay) existingDisplay.remove();
            const existingMenu = wrap.querySelector('.flyer-custom-select-menu');
            if (existingMenu) existingMenu.remove();

            // Display trigger
            const display = document.createElement('div');
            display.className = 'flyer-custom-select-display';
            display.tabIndex = 0;

            const labelSpan = document.createElement('span');
            labelSpan.className = 'flyer-custom-select-label';

            const currentOpt = select.options[select.selectedIndex];
            if (currentOpt && currentOpt.value) {
                labelSpan.textContent = currentOpt.text;
                labelSpan.classList.remove('is-placeholder');
            } else {
                labelSpan.textContent = (currentOpt ? currentOpt.text : 'Select');
                labelSpan.classList.add('is-placeholder');
            }

            const caret = document.createElement('i');
            caret.className = 'fa-solid fa-chevron-down flyer-select-caret';

            display.appendChild(labelSpan);
            display.appendChild(caret);
            wrap.appendChild(display);

            // Menu container
            const menu = document.createElement('div');
            menu.className = 'flyer-custom-select-menu';

            Array.from(select.options).forEach(function(opt) {
                if (opt.disabled || opt.hidden) return;

                const item = document.createElement('div');
                item.className = 'flyer-custom-select-opt';
                if (opt.value === select.value) {
                    item.classList.add('is-selected');
                }
                item.setAttribute('data-val', opt.value);

                const iconClass = optIconMap[opt.value] || 'fa-solid fa-circle-dot';
                const icon = document.createElement('i');
                icon.className = iconClass + ' opt-icon';

                const textSpan = document.createElement('span');
                textSpan.className = 'opt-text';
                textSpan.textContent = opt.text;

                const leftDiv = document.createElement('div');
                leftDiv.className = 'd-flex align-items-center';
                leftDiv.appendChild(icon);
                leftDiv.appendChild(textSpan);

                item.appendChild(leftDiv);

                item.addEventListener('click', function(e) {
                    e.stopPropagation();
                    select.value = opt.value;
                    labelSpan.textContent = opt.text;
                    labelSpan.classList.remove('is-placeholder');

                    menu.querySelectorAll('.flyer-custom-select-opt').forEach(function(o) {
                        o.classList.remove('is-selected');
                    });
                    item.classList.add('is-selected');

                    menu.classList.remove('is-open');
                    select.dispatchEvent(new Event('change', { bubbles: true }));
                });

                menu.appendChild(item);
            });

            wrap.appendChild(menu);

            // Toggle & Smart Dropup / Dropdown Positioning
            display.addEventListener('click', function(e) {
                e.stopPropagation();
                const isOpen = menu.classList.contains('is-open');
                document.querySelectorAll('.flyer-custom-select-menu.is-open').forEach(function(m) {
                    if (m !== menu) m.classList.remove('is-open');
                });
                if (isOpen) {
                    menu.classList.remove('is-open');
                } else {
                    const rect = display.getBoundingClientRect();
                    const spaceBelow = window.innerHeight - rect.bottom;
                    const spaceAbove = rect.top;

                    if (spaceBelow < 250 && spaceAbove > 200) {
                        menu.classList.add('flyer-dropup');
                        menu.classList.remove('flyer-dropdown');
                    } else {
                        menu.classList.remove('flyer-dropup');
                        menu.classList.add('flyer-dropdown');
                    }

                    const wrapRect = wrap.getBoundingClientRect();
                    if (wrapRect.left + 240 > window.innerWidth - 10) {
                        menu.style.left = 'auto';
                        menu.style.right = '0';
                    } else {
                        menu.style.left = '-6px';
                        menu.style.right = 'auto';
                    }

                    menu.classList.add('is-open');
                }
            });

            display.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
                    e.preventDefault();
                    menu.classList.add('is-open');
                }
            });
        });

        // Close when clicking outside
        document.addEventListener('click', function() {
            document.querySelectorAll('.flyer-custom-select-menu.is-open').forEach(function(m) {
                m.classList.remove('is-open');
            });
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                document.querySelectorAll('.flyer-custom-select-menu.is-open').forEach(function(m) {
                    m.classList.remove('is-open');
                });
            }
        });
    }

    initCustomDropdowns();

    // 5. Form Search Submission via WhatsApp
    window.handleFlyerSearch = function (e) {
        if (e) e.preventDefault();
        const tripType = selectedTripType || 'One Way';
        const pickup = document.getElementById('flyerPickup') ? document.getElementById('flyerPickup').value : 'Trichy';
        const destination = document.getElementById('flyerDestination') ? document.getElementById('flyerDestination').value : '';
        const date = document.getElementById('flyerDate') ? document.getElementById('flyerDate').value : '';
        const time = document.getElementById('flyerTime') ? document.getElementById('flyerTime').value : '';
        const passengers = document.getElementById('flyerPassengers') ? document.getElementById('flyerPassengers').value : '';

        let text = "Hello MJ Travels! I want to book a ride from your website:\n";
        text += "• Trip Type: " + tripType + "\n";
        text += "• Pickup: " + pickup + "\n";
        text += "• Destination: " + (destination || 'Local / Outstation') + "\n";
        if (date) text += "• Date: " + date + (time ? ' at ' + time : '') + "\n";
        if (passengers) text += "• Vehicle: " + passengers + "\n";
        text += "Please share fare quote and driver details.";

        window.open("https://wa.me/918526548059?text=" + encodeURIComponent(text), "_blank");
    };

    // 6. Current Location Geolocation Detection
    const btnCurrentLoc = document.getElementById('btnFlyerCurrentLoc');
    const pickupInput = document.getElementById('flyerPickup');

    if (btnCurrentLoc && pickupInput) {
        btnCurrentLoc.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            if (!navigator.geolocation) {
                alert('Geolocation is not supported by your browser.');
                return;
            }

            const icon = btnCurrentLoc.querySelector('i');
            const originalClass = icon ? icon.className : 'fa-solid fa-location-crosshairs';
            if (icon) icon.className = 'fa-solid fa-spinner fa-spin';
            btnCurrentLoc.disabled = true;

            navigator.geolocation.getCurrentPosition(
                async function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    pickupInput.value = 'Locating...';

                    try {
                        const controller = new AbortController();
                        const timeoutId = setTimeout(() => controller.abort(), 4000);
                        const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=16&addressdetails=1`, {
                            headers: { 'Accept-Language': 'en' },
                            signal: controller.signal
                        });
                        clearTimeout(timeoutId);
                        const data = await res.json();
                        if (data && data.address) {
                            const addr = data.address;
                            const place = addr.suburb || addr.neighbourhood || addr.city_district || addr.residential || addr.road || addr.village || '';
                            const city = addr.city || addr.town || addr.state_district || 'Trichy';
                            pickupInput.value = place ? `${place}, ${city}` : city;
                        } else {
                            pickupInput.value = 'Current Location';
                        }
                    } catch (err) {
                        pickupInput.value = 'Current Location';
                    }

                    if (icon) icon.className = originalClass;
                    btnCurrentLoc.disabled = false;
                },
                function(error) {
                    if (icon) icon.className = originalClass;
                    btnCurrentLoc.disabled = false;
                    pickupInput.value = 'Current Location';
                },
                { enableHighAccuracy: true, timeout: 7000, maximumAge: 60000 }
            );
        });
    }
});

</script>