<section class="slider-section">
    <div class="container">
        <div class="hero-inner">
            <?php
            $go_mechanic_number_of_slider_items = absint(get_theme_mod('go_mechanic_number_of_slider_items', 3));
            if ($go_mechanic_number_of_slider_items < 1) {
                $go_mechanic_number_of_slider_items = 1;
            }

            $go_mechanic_slider_pages = array();
            for ($count = 1; $count <= 4; $count++) {
                $mod = intval(get_theme_mod('go_mechanic_select_post_slider' . $count));
                if ('page-none-selected' != $mod) {
                    $go_mechanic_slider_pages[] = $mod;
                }
            }

            $query_args = array(
                'post__in' => $go_mechanic_slider_pages,
                'posts_per_page' => $go_mechanic_number_of_slider_items
            );
            $go_mechanic_sliderquery = new WP_Query($query_args);
            $go_mechanic_sliderquery_counter = 0;
            ?>
            <?php

            if ($go_mechanic_sliderquery->have_posts()): ?>
                <div class="slick-slider">
                    <?php while ($go_mechanic_sliderquery->have_posts() && $go_mechanic_sliderquery_counter < $go_mechanic_number_of_slider_items):
                        $go_mechanic_sliderquery->the_post();
                        $go_mechanic_sliderquery_counter++; ?>
                        <div class="slide-item">


                            <div class="heroGrid">

                                <!-- LEFT -->
                                <div class="heroLeft">
                                    <div class="kicker">
                                        <i class="fa-solid fa-shield-halved"></i>
                                        <?php echo esc_html(get_theme_mod('go_mechanic_slider_badge_text', __('Certified mechanics • Transparent pricing • Fast turnaround', 'go-mechanic'))); ?>
                                    </div>

                                    <h1 class="hero-title">
                                        <?php
                                        $title = explode(' ', get_the_title());

                                        // Safe defaults
                                        $word1 = $title[0] ?? '';
                                        $word2 = $title[1] ?? '';
                                        $word3 = $title[2] ?? '';
                                        $remaining = array_slice($title, 3);
                                        ?>

                                        <span class="line1">
                                            <span class="text-white"><?php echo esc_html($word1); ?></span>
                                            <span class="highlight-text"><?php echo esc_html($word2); ?>
                                                <?php echo esc_html($word3); ?></span>
                                            <span class="text-white"><?php echo esc_html(implode(' ', $remaining)); ?></span>
                                        </span>


                                    </h1>

                                    <p class="lead">
                                        <?php
                                        $custom_description = get_theme_mod('go_mechanic_slider_description', '');
                                        if (!empty($custom_description)) {
                                            echo wp_kses_post($custom_description);
                                        } else {
                                            echo wp_kses_post(go_mechanic_trim_words(get_the_content()));
                                        }
                                        ?>
                                    </p>

                                    <div class="slider-button">
                                        <a class="btn-primary"
                                            href="<?php echo esc_url(get_theme_mod('go_mechanic_slider_primary_btn_url', get_permalink())); ?>">
                                            <i class="fa-solid fa-wrench"></i>
                                            <?php echo esc_html(get_theme_mod('go_mechanic_slider_primary_btn_text', __('Get Service', 'go-mechanic'))); ?>
                                        </a>
                                        <a class="btn-secondary"
                                            href="<?php echo esc_url(get_theme_mod('go_mechanic_slider_secondary_btn_url', '#')); ?>">
                                            <i class="fa-solid fa-phone"></i>
                                            <?php echo esc_html(get_theme_mod('go_mechanic_slider_secondary_btn_text', __('Contact Us', 'go-mechanic'))); ?>
                                        </a>
                                    </div>

                                    <div class="features">
                                        <span>
                                            <i class="fa-solid fa-bolt"></i>
                                            <?php echo esc_html(get_theme_mod('go_mechanic_slider_feature_1', __('Same-day options', 'go-mechanic'))); ?>
                                        </span>
                                        <span>
                                            <i class="fa-solid fa-check"></i>
                                            <?php echo esc_html(get_theme_mod('go_mechanic_slider_feature_2', __('Warranty-backed repairs', 'go-mechanic'))); ?>
                                        </span>
                                        <span>
                                            <i class="fa-solid fa-location-dot"></i>
                                            <?php echo esc_html(get_theme_mod('go_mechanic_slider_feature_3', __('Local & trusted', 'go-mechanic'))); ?>
                                        </span>
                                    </div>
                                </div>

                                <!-- RIGHT -->
                                <div class="heroRight">

                                    <!-- IMAGE -->
                                    <?php if (has_post_thumbnail()): ?>
                                        <img src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'large')); ?>"alt="<?php echo esc_attr(get_the_title()); ?>">>
                                    <?php else: ?>
                                        <img
                                            src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/car-engine.png'); ?>"alt="<?php echo esc_attr(get_the_title()); ?>">>
                                    <?php endif; ?>

                                    <!-- BOOKING CARD -->
                                    <div class="bookingCard">
                                        <div class="bookingHeader">
                                            <h3><?php echo esc_html(get_theme_mod('go_mechanic_slider_booking_title', __('Quick Booking', 'go-mechanic'))); ?>
                                            </h3>
                                            <span><?php echo esc_html(get_theme_mod('go_mechanic_slider_booking_status', __('Open Today', 'go-mechanic'))); ?></span>
                                        </div>

                                        <input type="text"
                                            placeholder="<?php echo esc_attr(get_theme_mod('go_mechanic_slider_booking_name_placeholder', __('Your name', 'go-mechanic'))); ?>">

                                        <select>
                                            <?php
                                            $services = get_theme_mod('go_mechanic_slider_booking_services', 'Diagnostics,Engine Repair,Brake Service,Oil Change');
                                            $services_array = explode(',', $services);
                                            foreach ($services_array as $service) {
                                                echo '<option>' . esc_html(trim($service)) . '</option>';
                                            }
                                            ?>
                                        </select>

                                        <button>
                                            <i class="fa-solid fa-calendar-check"></i>
                                            <?php echo esc_html(get_theme_mod('go_mechanic_slider_booking_btn_text', __('Book Appointment', 'go-mechanic'))); ?>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    <?php endwhile; ?>
                </div>
            <?php else: ?>
                <div class="slick-slider">
                    <div class="slide-item">

                        <div class="heroGrid">

                            <!-- LEFT -->
                            <div class="heroLeft">
                                <div class="kicker">
                                    <i class="fa-solid fa-shield-halved"></i>
                                    <?php echo esc_html(get_theme_mod('go_mechanic_slider_badge_text', __('Certified mechanics • Transparent pricing • Fast turnaround', 'go-mechanic'))); ?>
                                </div>

                                <h1 class="hero-title">
                                    <span class="text-white">Reliable</span>
                                    <span class="highlight-text">Auto Repair</span>
                                    <span class="text-white">Services</span>
                                </h1>

                                <p class="lead">
                                    <?php echo esc_html__('Modern diagnostics, expert repairs, and clear communication—so you drive away confident. Book in minutes and get real-time updates during service.', 'go-mechanic'); ?>
                                </p>

                                <div class="slider-button">
                                    <a class="btn-primary" href="#">
                                        <i class="fa-solid fa-wrench"></i>
                                        <?php esc_html_e('Get Service', 'go-mechanic'); ?>
                                    </a>
                                    <a class="btn-secondary" href="#">
                                        <i class="fa-solid fa-phone"></i>
                                        <?php esc_html_e('Contact Us', 'go-mechanic'); ?>
                                    </a>
                                </div>

                                <div class="features">
                                    <span><i class="fa-solid fa-bolt"></i> Same-day options</span>
                                    <span><i class="fa-solid fa-check"></i> Warranty-backed repairs</span>
                                    <span><i class="fa-solid fa-location-dot"></i> Local & trusted</span>
                                </div>
                            </div>

                            <!-- RIGHT -->
                            <div class="heroRight">

                                <img
                                    src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/car-engine.png'); ?>"alt="<?php echo esc_attr(get_the_title()); ?>">>

                                <div class="bookingCard">
                                    <div class="bookingHeader">
                                        <h3><?php esc_html_e('Quick Booking', 'go-mechanic'); ?></h3>
                                        <span><?php esc_html_e('Open Today', 'go-mechanic'); ?></span>
                                    </div>

                                    <input type="text" placeholder="Your name">

                                    <select>
                                        <option>Diagnostics</option>
                                        <option>Engine Repair</option>
                                        <option>Brake Service</option>
                                    </select>

                                    <button>
                                        <i class="fa-solid fa-calendar-check"></i>
                                        <?php esc_html_e('Book Appointment', 'go-mechanic'); ?>
                                    </button>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            <?php endif; 
            wp_reset_postdata();
            ?>


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