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

<!-- //////////////////////////////// home section start///////////////////////////////-->
<section class="home-section" id="home-id">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <?php
            $eco_solar_energy_number_of_featured_slider_items = absint(get_theme_mod('number_of_featured_slider_items', 3));
            if ($eco_solar_energy_number_of_featured_slider_items < 1) {
                $eco_solar_energy_number_of_featured_slider_items = 1;
            }

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

            $query_args = array(
                'cat' => '',
                'post__in' => $eco_solar_energy_slider_pages,
                'posts_per_page' => $eco_solar_energy_number_of_featured_slider_items
            );
            $eco_solar_energy_catquery = new WP_Query($query_args);
            $eco_solar_energy_catquery_counter = 0;
            ?>

            <?php while ($eco_solar_energy_catquery->have_posts() && $eco_solar_energy_catquery_counter < $eco_solar_energy_number_of_featured_slider_items) : $eco_solar_energy_catquery->the_post(); ?>
            
                <div class="carousel-item <?php echo ($eco_solar_energy_catquery_counter == 0) ? 'active' : ''; ?>">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-12">
                            <div class="hero-overlay"></div>
                            <img class="d-block" src="<?php echo esc_url(get_the_post_thumbnail_url()); ?>">

                            <div class="carousel-caption text-start position-relative">
                                   <div class="star-img0"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image4') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>
                                    <div class="star-img1"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image3') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>
                    <div class="star-img2"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image3') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>
                                <h1><?php echo esc_html(get_theme_mod('eco_solar_energy_headinghomr', 'The Power of Nature at Your Fingertips')); ?></h1>
                                <h2><?php the_title(); ?></h2>

                                <div class="mt-4 justify-content-center position-relative" >
                                      <div class="star-img3"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image3') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>
                                    <p>
                                        <?php 
                                        $content_limit = 30;                                     
                                        echo wp_trim_words(get_the_content(), $content_limit, '');  
                                        ?>
                                    </p>
                                </div>
                                <div class="read-more mt-4">
                                    <a href="#"
                                       class="btn btn-custom1 rounded1"><?php echo esc_html(get_theme_mod('eco_solar_energy_button1_text', 'Explore More')); ?> 
                                       <span><i class="fa-solid fa-arrow-right"></i></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
  <div class="slider-sideimg">
                        <?php
                        $eco_solar_energy_slider_image2 = get_theme_mod('eco_solar_energy_slider_image2');
                        echo '<img alt="slider" class="slider-image" src="' . esc_url($eco_solar_energy_slider_image2 ?: get_template_directory_uri() . '/assets/images/sliderimg3.png') . '" />';
                        ?>
                    </div>
                    <!-- ⭐ Decorative star images inside each slide -->
                
                  

                    <div class="star-img4"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image4') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>

                    <div class="star-img5"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image5') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>

                    <div class="star-img6"> 
                        <img alt="slider" class="slider-image" 
                             src="<?php echo esc_url(get_theme_mod('eco_solar_energy_slider_image6') ?: get_template_directory_uri() . '/assets/images/sliderstarimg.png'); ?>" />
                    </div>

                    <div class="slider-img2">
                        <?php
                        $eco_solar_energy_slider_image2 = get_theme_mod('eco_solar_energy_slider_image2');
                        echo '<img alt="slider" class="slider-image" src="' . esc_url($eco_solar_energy_slider_image2 ?: get_template_directory_uri() . '/assets/images/sliderimg2.png') . '" />';
                        ?>
                    </div>
                </div>

            <?php 
                $eco_solar_energy_catquery_counter++;
            endwhile;
            wp_reset_postdata();
            ?>
        </div>
<div class="sliderbutton">
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
            <span class="visually-hidden">Next</span>
        </button>
        </div>
    </div>
</section>
<!-- //////////////////////////////// home section end///////////////////////////////-->  
