<?php
/**
 * Template part for displaying Slider Section
 *
 * @package prime-construction
 */

$data_slick_speed = prime_construction_get_option('data_slick_speed');
$data_slick_infinite = prime_construction_get_option('data_slick_infinite');
$data_slick_dots = prime_construction_get_option('data_slick_dots');
$data_slick_autoplay = prime_construction_get_option('data_slick_autoplay');
$data_slick_draggable = prime_construction_get_option('data_slick_draggable');
$data_slick_fade = prime_construction_get_option('data_slick_fade');
$featured_slider_content_type = prime_construction_get_option('featured_slider_content_type');
$prime_construction_number_of_featured_slider_items = prime_construction_get_option('number_of_featured_slider_items');
// $slider_enable_section               = get_theme_mod('slider_enable_section', 'on');

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

<?php
// Convert numeric options to boolean strings for slick carousel
$data_slick_infinite = $data_slick_infinite ? 'true' : 'false';
$data_slick_dots = $data_slick_dots ? 'true' : 'false';
$data_slick_autoplay = $data_slick_autoplay ? 'true' : 'false';
$data_slick_draggable = $data_slick_draggable ? 'true' : 'false';
$data_slick_fade = $data_slick_fade ? 'true' : 'false';
?>

<div id="featured-slider">
    <?php
    $hero_badge = get_theme_mod('featured_slider_badge_text', '25+ Years of Excellence');
    $hero_title = get_theme_mod('featured_slider_title', 'BUILDING THE FUTURE');
    $hero_description = get_theme_mod('featured_slider_description', 'Next-generation construction solutions powered by innovation, precision, and cutting-edge technology.');
    $hero_image = get_theme_mod('featured_slider_right_image', get_template_directory_uri() . '/assets/images/low-angle-view-building-glass-facade-beautiful-cloudy-sky.jpg');
    $hero_small_image = get_theme_mod('featured_slider_small_image', get_template_directory_uri() . '/assets/images/low-angle-view-building-glass-facade-beautiful-cloudy-sky.jpg');
    $project_label = get_theme_mod('featured_slider_project_label', 'Current Project');
    $project_title = get_theme_mod('featured_slider_project_title', 'Downtown Tower');
    $project_progress = get_theme_mod('featured_slider_project_progress', '75%');
    $stat_1_count = get_theme_mod('featured_slider_stat_1_count', '500+');
    $stat_1_label = get_theme_mod('featured_slider_stat_1_label', 'Projects');
    $stat_2_count = get_theme_mod('featured_slider_stat_2_count', '250+');
    $stat_2_label = get_theme_mod('featured_slider_stat_2_label', 'Team');
    $stat_3_count = get_theme_mod('featured_slider_stat_3_count', '50+');
    $stat_3_label = get_theme_mod('featured_slider_stat_3_label', 'Awards');
    $button1_text = get_theme_mod('prime_construction_button1_text', 'Start Your Project');
    $button2_text = get_theme_mod('prime_construction_button2_text', 'Watch Video');
    $button1_url = get_theme_mod('featured_slider_button1_url', '#');
    $button2_url = get_theme_mod('featured_slider_button2_url', '#');
    ?>

    <div class="container">

        <div class="section-content"
            data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "infinite": <?php echo esc_attr($data_slick_infinite); ?>, "speed": <?php echo esc_attr($data_slick_speed); ?>, "dots": <?php echo esc_attr($data_slick_dots); ?>, "autoplay": <?php echo esc_attr($data_slick_autoplay); ?>, "draggable": <?php echo esc_attr($data_slick_draggable); ?>, "fade": <?php echo esc_attr($data_slick_fade); ?> }'>

            <article>
                <div class="hero-slide">
                    <div class="row gx-5">
                        <div class="col-lg-6">
                            <div class="hero-left">
                                <?php if ($hero_badge): ?>
                                    <span class="hero-label"><?php echo esc_html($hero_badge); ?></span>
                                <?php endif; ?>

                                <?php if ($hero_title):
                                    $words = explode(' ', $hero_title);
                                    $last_word = array_pop($words);
                                    ?>
                                    <h1 class="hero-title">
                                        <?php echo esc_html(implode(' ', $words)); ?>
                                        <span class="highlight-word"><?php echo esc_html($last_word); ?></span>
                                    </h1>
                                <?php endif; ?>

                                <?php if ($hero_description): ?>
                                    <p class="hero-description"><?php echo esc_html($hero_description); ?></p>
                                <?php endif; ?>

                                <div class="hero-buttons d-flex flex-wrap  gap-3 mb-4">
                                    <a href="<?php echo esc_url($button1_url); ?>"
                                        class="hero-button hero-button-primary"><?php echo esc_html($button1_text); ?><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-arrow-right group-hover:translate-x-1 transition-transform">
                                            <path d="M5 12h14"></path>
                                            <path d="m12 5 7 7-7 7"></path>
                                        </svg></a>

                                    <a href="<?php echo esc_url($button2_url); ?>"
                                        class="hero-button hero-button-secondary">
                                        <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="currentColor" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-play w-4 h-4 text-black ml-0.5">
                                                <polygon points="6 3 20 12 6 21 6 3"></polygon>
                                            </svg></span>
                                        <?php echo esc_html($button2_text); ?></a>

                                </div>

                                <div class="hero-stats d-flex mt-3">
                                    <div class="hero-stat-card d-flex align-items-center rounded-4">
                                        <span class="hero-stat-icon"><i class="fa-solid fa-building"></i></span>
                                        <div>
                                            <h4 class="hero-stat-number mb-0"><?php echo esc_html( $stat_1_count ); ?></h4>
                                            <p class="hero-stat-label mb-0"><?php echo esc_html( $stat_1_label ); ?></p>
                                        </div>
                                    </div>
                                    <div class="hero-stat-card d-flex align-items-center  rounded-4">
                                        <span class="hero-stat-icon"><i class="fa-solid fa-users"></i></span>
                                        <div>
                                            <h4 class="hero-stat-number mb-0"><?php echo esc_html( $stat_2_count ); ?></h4>
                                            <p class="hero-stat-label mb-0"><?php echo esc_html( $stat_2_label ); ?></p>
                                        </div>
                                    </div>
                                    <div class="hero-stat-card d-flex align-items-center rounded-4">
                                        <span class="hero-stat-icon"><i class="fa-solid fa-award"></i></span>
                                        <div>
                                            <h4 class="hero-stat-number mb-0"><?php echo esc_html( $stat_3_count ); ?></h4>
                                            <p class="hero-stat-label mb-0"><?php echo esc_html( $stat_3_label ); ?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="hero-right position-relative">
                                <img class="hero-main-image d-block w-100" src="<?php echo esc_url($hero_image); ?>"
                                    alt="<?php echo esc_attr($hero_title); ?>">

                                <?php if ($hero_small_image): ?>
                                    <div class="hero-small-image position-absolute shadow-lg rounded-4 overflow-hidden">
                                        <img class="d-block w-100" src="<?php echo esc_url($hero_small_image); ?>"
                                            alt="<?php esc_attr_e('Small hero image', 'prime-construction'); ?>">
                                    </div>
                                <?php endif; ?>

                                <div class="hero-project-card position-absolute rounded-4 shadow-sm">
                                    <span class="project-label"><?php echo esc_html($project_label); ?></span>
                                    <h3 class="project-title"><?php echo esc_html($project_title); ?></h3>
                                    <div class="project-progress-wrap">
                                        <div class="project-progress-bar">
                                            <div class="project-progress-bar-inner"
                                                style="width: <?php echo esc_attr($project_progress); ?>;"></div>
                                        </div>
                                        <span
                                            class="project-progress-text"><?php echo esc_html($project_progress); ?></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
           
        </div>
    </div>
    <div class="position-absolute translate-middle-y custom-glow"></div>
    <div class="hero-bg"></div>
</div>