<?php
/**
 * Template part for displaying Slider Section
 *
 * @package express-movers
 */

$express_movers_data_slick_speed = express_movers_get_option('data_slick_speed');
$express_movers_data_slick_infinite = express_movers_get_option('data_slick_infinite');
$express_movers_data_slick_dots = express_movers_get_option('data_slick_dots');
$express_movers_data_slick_autoplay = express_movers_get_option('data_slick_autoplay');
$express_movers_data_slick_draggable = express_movers_get_option('data_slick_draggable');
$express_movers_data_slick_fade = express_movers_get_option('data_slick_fade');
$express_movers_featured_slider_content_type = express_movers_get_option('featured_slider_content_type');
$express_movers_number_of_featured_slider_items = express_movers_get_option('number_of_featured_slider_items');

?>
<?php if (!get_theme_mod('expressmovers_slider_enable_section', true)) {
    return;
} ?>

<?php
// Convert numeric options to boolean strings for slick carousel
$express_movers_data_slick_infinite = $express_movers_data_slick_infinite ? 'true' : 'false';
$express_movers_data_slick_dots = $express_movers_data_slick_dots ? 'true' : 'false';
$express_movers_data_slick_autoplay = $express_movers_data_slick_autoplay ? 'true' : 'false';
$express_movers_data_slick_draggable = $express_movers_data_slick_draggable ? 'true' : 'false';
$express_movers_data_slick_fade = $express_movers_data_slick_fade ? 'true' : 'false';
?>

<div id="featured-slider">

    <div class="section-content"
        data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "infinite": <?php echo esc_attr($express_movers_data_slick_infinite); ?>, "speed": <?php echo esc_attr($express_movers_data_slick_speed); ?>, "dots": <?php echo esc_attr($express_movers_data_slick_dots); ?>, "autoplay": <?php echo esc_attr($express_movers_data_slick_autoplay); ?>, "draggable": <?php echo esc_attr($express_movers_data_slick_draggable); ?>, "fade": <?php echo esc_attr($express_movers_data_slick_fade); ?> }'>

        <?php
        $express_movers_number_of_featured_slider_items = absint(get_theme_mod('number_of_featured_slider_items', 5)); // Ensure the value is an integer
        
        // Ensure the number of posts starts from 1, and not showing any extras
        if ($express_movers_number_of_featured_slider_items < 1) {
            $express_movers_number_of_featured_slider_items = 1; // Ensure minimum value is 1
        }

        ?> <?php $express_movers_slider_pages = array();
         for ($express_movers_count = 1; $express_movers_count <= 4; $express_movers_count++) {
             $express_movers_mod = intval(get_theme_mod('select_post_slider' . $express_movers_count));
             if ('page-none-selected' != $express_movers_mod) {
                 $express_movers_slider_pages[] = $express_movers_mod;
             }
         }
         if (!empty($express_movers_slider_pages)):
             $express_movers_args = array(
                 'post_type' => 'post',
                 'post__in' => $express_movers_slider_pages,
                 'posts_per_page' => $express_movers_number_of_featured_slider_items,
                 'orderby' => 'post__in'
             );
             $express_movers_catquery = new WP_Query($express_movers_args);

             $express_movers_catquery_counter = 0; // Initialize counter
             while ($express_movers_catquery->have_posts() && $express_movers_catquery_counter < $express_movers_number_of_featured_slider_items):
                 $express_movers_catquery->the_post();
                 $express_movers_catquery_counter++;
                 $express_movers_title_case = strtolower(get_theme_mod('featured_slider_title_case', 'Capitalize'));
                 $express_movers_title_words = preg_split('/\s+/', wp_strip_all_tags(get_the_title()));
                 $express_movers_title_highlight = '';
                 if (!empty($express_movers_title_words) && count($express_movers_title_words) >= 2) {
                     $express_movers_title_highlight = implode(' ', array_slice($express_movers_title_words, -2));
                     $express_movers_title_words = array_slice($express_movers_title_words, 0, -2);
                 }
                 $express_movers_title_prefix = implode(' ', $express_movers_title_words);

                $express_movers_featured_badge_text = get_theme_mod('featured_slider_badge_text', '#1 Logistics Provider 2026');
                $express_movers_slider_description_override = get_theme_mod('featured_slider_description', '');
                $express_movers_slider_stat1_value = get_theme_mod('featured_slider_stat1_value', '50K+');
                $express_movers_slider_stat1_label = get_theme_mod('featured_slider_stat1_label', 'Deliveries');
                $express_movers_slider_stat2_value = get_theme_mod('featured_slider_stat2_value', '98%');
                $express_movers_slider_stat2_label = get_theme_mod('featured_slider_stat2_label', 'On-Time Rate');
                $express_movers_slider_stat3_value = get_theme_mod('featured_slider_stat3_value', '120+');
                $express_movers_slider_stat3_label = get_theme_mod('featured_slider_stat3_label', 'Cities');
                $express_movers_slider_feature1_text = get_theme_mod('featured_slider_feature1_text', 'Fully insured');
                $express_movers_slider_feature2_text = get_theme_mod('featured_slider_feature2_text', 'Real-time GPS');
                $express_movers_slider_feature3_text = get_theme_mod('featured_slider_feature3_text', '24/7 support');
                $express_movers_slider_button2_text = get_theme_mod('featured_slider_button2_text', 'Our Services');
                $express_movers_slider_button2_url = get_theme_mod('featured_slider_button2_url', '');

                $express_movers_slider_button2_link = !empty($express_movers_slider_button2_url) ? $express_movers_slider_button2_url : get_permalink();

                $express_movers_slider_desc_fallback = wp_trim_words(wp_strip_all_tags(get_the_excerpt() ? get_the_excerpt() : get_the_content()), 24);
                $express_movers_slider_description_final = !empty($express_movers_slider_description_override)
                    ? $express_movers_slider_description_override
                    : $express_movers_slider_desc_fallback;
                 ?>
                <article>
                    <div class="position-absolute top-0 start-0 w-100 h-100 overflow-hidden">

                        <!-- Big blurred circle (top right) -->
                        <div class="bg-circle pulse" style="top:80px; right:0; width:384px; height:384px;"></div>

                        <!-- Bottom left circle -->
                        <div class="bg-circle light" style="bottom:0; left:0; width:320px; height:320px;"></div>

                        <!-- Rotated square -->
                        <div class="shape-rotate" style="    top: 158px;
    left: 70px;
    width: 80px;
    height: 80px;"></div>
<div class="position-absolute top-0 end-0 bg-blur-circle pulse-circle"></div>
                        <!-- Rounded border circle -->
                        <div class="shape-circle" style="bottom:160px; right:128px; width:64px; height:64px;"></div>

                        <!-- Small rotated box -->
                        <div class="shape-small" style="top:50%; right:80px; width:48px; height:48px;"></div>

                    </div>
                    <div class="opbg">
                        <div class="slide-inner slide-bg-image">
                            <div class="express-hero wrapper">

                                <div class="express-hero__content <?php echo esc_attr(get_theme_mod('express_movers_featured_slider_onload_effects', 'wow zoomIn')); ?>"
                                    data-wow-duration="1.5s">
                                    <span class="d-inline-flex align-items-center gap-3 badge-pill-custom">
                                        <div class="dot-ping"></div>
                                        <?php echo esc_html($express_movers_featured_badge_text); ?>
                                    </span>

                                    <h2
                                        class="entry-title express-hero__title title-case-<?php echo esc_attr($express_movers_title_case); ?>">
                                        <?php echo esc_html($express_movers_title_prefix); ?>
                                        <?php if (!empty($express_movers_title_highlight)): ?>
                                            <span
                                                class="express-hero__title-highlight"><?php echo esc_html($express_movers_title_highlight); ?></span>
                                        <?php endif; ?>
                                        <div class="position-absolute start-0 w-100 bottom-bar" style=" bottom: 0.5rem; 
    height: 1rem;  
    background: rgba(255, 107, 53, 0.2); 
    transform: rotate(-1deg); "></div>
                                    </h2>

                                    <p class="express-hero__desc">
                                        <?php echo esc_html($express_movers_slider_description_final); ?>
                                    </p>

                                    <div class="express-hero__stats">
                                        <div class="express-hero__stat">
                                            <strong><?php echo esc_html($express_movers_slider_stat1_value); ?></strong>
                                            <span><?php echo esc_html($express_movers_slider_stat1_label); ?></span>
                                        </div>
                                        <div class="express-hero__stat">
                                            <strong><?php echo esc_html($express_movers_slider_stat2_value); ?></strong>
                                            <span><?php echo esc_html($express_movers_slider_stat2_label); ?></span>
                                        </div>
                                        <div class="express-hero__stat">
                                            <strong><?php echo esc_html($express_movers_slider_stat3_value); ?></strong>
                                            <span><?php echo esc_html($express_movers_slider_stat3_label); ?></span>
                                        </div>
                                    </div>

                                    <div class="express-hero__actions">
                                        <a href="<?php echo esc_url(get_theme_mod('express_movers_button1_url', '#')); ?>"
                                            class="express-hero__btn express-hero__btn--primary">
                                            <?php echo esc_html(get_theme_mod('express_movers_button1_text', 'Get Free Quote')); ?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                                        </a>
                                        <a href="<?php echo esc_url($express_movers_slider_button2_link); ?>" class="express-hero__btn express-hero__btn--light">
                                            <?php echo esc_html($express_movers_slider_button2_text); ?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg>
                                        </a>
                                    </div>

                                    <ul class="express-hero__features">
                                        <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-circle-check-big">
                                                <path d="M21.801 10A10 10 0 1 1 17 3.335"></path>
                                                <path d="m9 11 3 3L22 4"></path>
                                            </svg><?php echo esc_html($express_movers_slider_feature1_text); ?></li>
                                        <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-circle-check-big">
                                                <path d="M21.801 10A10 10 0 1 1 17 3.335"></path>
                                                <path d="m9 11 3 3L22 4"></path>
                                            </svg><?php echo esc_html($express_movers_slider_feature2_text); ?></li>
                                        <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-circle-check-big">
                                                <path d="M21.801 10A10 10 0 1 1 17 3.335"></path>
                                                <path d="m9 11 3 3L22 4"></path>
                                            </svg><?php echo esc_html($express_movers_slider_feature3_text); ?></li>
                                    </ul>
                                </div>

                                <div class="express-hero__visual <?php echo esc_attr(get_theme_mod('express_movers_featured_slider_onload_effects', 'wow zoomIn')); ?>"
                                    data-wow-duration="1.8s">
                                    <?php if (has_post_thumbnail()): ?>
                                        <?php $express_movers_total_slider_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); ?>
                                        <div class="express-hero__main-image">
                                            <img class="slide-mainimg" alt="<?php echo esc_attr(get_the_title()); ?>"
                                                src="<?php echo esc_url($express_movers_total_slider_image[0]); ?>">
                                            <div
                                                class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center overlay-hover">

                                                <div class="play-btn d-flex align-items-center justify-content-center">
                                                    <!-- ICON -->
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                        stroke-linecap="round" stroke-linejoin="round" class="play-icon">
                                                        <polygon points="6 3 20 12 6 21 6 3"></polygon>
                                                    </svg>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="express-hero__mini-image">
                                            <img src="<?php echo esc_url($express_movers_total_slider_image[0]); ?>"
                                                alt="<?php echo esc_attr(get_the_title()); ?>">
                                        </div>
                                        <div class="express-hero__floating-card express-hero__floating-card--top">

                                            <div class="feature-box">
                                                <div class="feature-icon">
                                                    <!-- ICON -->
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path>
                                                        <path d="M15 18H9"></path>
                                                        <path
                                                            d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14">
                                                        </path>
                                                        <circle cx="17" cy="18" r="2"></circle>
                                                        <circle cx="7" cy="18" r="2"></circle>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <div class="feature-title">
                                                        <?php esc_html_e('Express Delivery', 'express-movers'); ?></div>
                                                    <div class="feature-main"><?php esc_html_e('Same Day', 'express-movers'); ?>
                                                    </div>
                                                    <div class="feature-link">
                                                        <?php esc_html_e('Available Now →', 'express-movers'); ?></div>
                                                </div>
                                            </div>
                                        </div>








<div class="position-absolute translate-middle-y global-card">

    <div class="d-flex align-items-start gap-3">

        <!-- ICON -->
        <div class="global-icon d-flex align-items-center justify-content-center flex-shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 width="24" height="24">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                <path d="M2 12h20"></path>
            </svg>
        </div>

        <!-- TEXT -->
        <div>
            <div class="small text-secondary fw-semibold">
               <?php esc_html_e('Global Network', 'express-movers'); ?>
            </div>

            <div class="fs-5 fw-bold text-white">
               <?php esc_html_e('120+ Cities', 'express-movers'); ?>
            </div>

            <div class="d-flex align-items-center gap-1">
                <div class="status-dot"></div>
                <span class="small text-success fw-semibold">
                    Active Routes
                </span>
            </div>
        </div>
    </div>
</div>
                                
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            <?php endwhile; ?>
        <?php endif; ?>
        <?php wp_reset_postdata(); ?>
    </div><!-- .section-content -->
</div>
<style>
    /* Orange base color */
    :root {
        --theme-color: #ff6b35;
    }

    /* Blurred circle */
    .bg-circle {
        position: absolute;
        background: var(--theme-color);
        border-radius: 50%;
        opacity: 0.1;
        filter: blur(60px);
    }

    /* Light version */
    .bg-circle.light {
        opacity: 0.05;
    }

    /* Pulse animation */
    .pulse {
        animation: pulseAnim 2s infinite;
    }

    @keyframes pulseAnim {

        0%,
        100% {
            opacity: 0.1;
        }

        50% {
            opacity: 0.2;
        }
    }

    /* Rotated square */
    .shape-rotate {
        position: absolute;
        border: 2px solid rgba(255, 107, 53, 0.2);
        transform: rotate(45deg);
    }

    /* Circle border */
    .shape-circle {
        position: absolute;
        border: 2px solid rgba(255, 107, 53, 0.3);
        border-radius: 50%;
    }

    /* Small box */
    .shape-small {
        position: absolute;
        background: rgba(255, 107, 53, 0.1);
        transform: rotate(12deg);
    }

    /* Grid dots */
    .dot {
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        margin: auto;
    }
</style>