<?php
/**
 * Template Name: Home Custom Page
 */
?>
<?php get_header(); ?>

<main id="main" role="main">
  <?php do_action( 'janitorial_cleaning_services_above_slider' ); ?>

  <section id="banner">
      <div class="stbx" bis_skin_checked="1">   
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-8 h-8 text-white"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>
      </div>
      <div class="astral" bis_skin_checked="1">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-7 h-7 text-white"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
      </div>
      <div class="dripbx" bis_skin_checked="1">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplets w-10 h-10 text-white"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path></svg>
      </div>
      <div class="wave-container" bis_skin_checked="1">
          <svg class="wave wave-back" viewBox="0 0 1440 400" preserveAspectRatio="none">
              <defs>
                  <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" class="wave-start"></stop>
                    <stop offset="100%" class="wave-end"></stop>
                  </linearGradient>
              </defs>
                <path fill="url(#waveGradient)" fill-opacity="0.6" d="M0,192L60,186.7C120,181,240,171,360,165.3C480,160,600,160,720,176C840,192,960,224,1080,224C1200,224,1320,192,1380,176L1440,160V320H0Z">
                </path>
          </svg>
          <svg class="wave wave-front" viewBox="0 0 1440 320" preserveAspectRatio="none">
            <defs>
              <linearGradient id="waveFrontGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" class="wave-start"></stop>
                <stop offset="100%" class="wave-end"></stop>
              </linearGradient>
            </defs>
            <path fill="url(#waveFrontGradient)" fill-opacity="1" d="M0,224L60,229.3C120,235,240,245,360,229.3C480,213,600,171,720,165.3C840,160,960,192,1080,202.7C1200,213,1320,203,1380,197.3L1440,192V320H0Z">
            </path>
          </svg>
      </div>
      <div class="container"> 
          <div class="row m-0 p-0">
              <div class="contenbx">
                  <h2><?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_title', 'Transform Your')); ?></h2>
                  <h2 class="banner_titlehigh"><?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_hightitle', ' Space ')); ?><br>
                    <span><?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_hightitle2', ' Into Perfection ')); ?></span>

                  </h2>
                  <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_description', 'Professional cleaning services that bring sparkle and shine to your world')); ?></p>
                  <div class="btn">
                      <a href="<?php echo esc_url(get_theme_mod('janitorial_cleaning_banner_btn_link', '#')); ?>">
                        <?php esc_html_e( 'Book Cleaning Now', 'janitorial-cleaning-services' ); ?> →
                      </a>
                  </div>
              </div>
              <div class="imgbx">
                  <div class="image">
                    
                    <div class="imginnbx" bis_skin_checked="1">
                        <?php 
                          $janitorial_cleaning_banner_image = get_theme_mod('janitorial_cleaning_banner_image');

                          if(!empty($janitorial_cleaning_banner_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($janitorial_cleaning_banner_image).'" class="img-responsive secondry-bg-img" />';
                          }else{
                            echo '<img alt="janitorial_cleaning_banner_image" src="'.get_template_directory_uri().'/assets/images/bannerimg.png" class="img-responsive" />';
                          }
                        ?>
                        <div class="ratingbx" bis_skin_checked="1">
                            <div class="rating-container" bis_skin_checked="1">
                            <div class="rating-display" bis_skin_checked="1">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <div class="rating-number" bis_skin_checked="1">
                                <span><?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_reviews_rating', '5.0')); ?></span>
                            </div>
                        </div>
                        <div class="cltxt" bis_skin_checked="1"> <?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_reviews', '2,500+ Reviews')); ?></div>
                    </div>
                    
                    <div class="rankbx" bis_skin_checked="1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award w-10 h-10 text-white"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg>
                        <div class="rtxt" bis_skin_checked="1"><?php esc_html_e( '#1 Rated', 'janitorial-cleaning-services' ); ?></div>
                    </div>
                    
                    <div class="satsbx" bis_skin_checked="1">
                        <div class="satsbxinn" bis_skin_checked="1">
                            <div class="icnbx" bis_skin_checked="1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big w-8 h-8 text-emerald-500"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
                            </div>
                            <div class="details" bis_skin_checked="1">
                                <div class="satsnum" bis_skin_checked="1"><?php esc_html_e( '100%', 'janitorial-cleaning-services' ); ?> </div>
                                <div class="satstxt" bis_skin_checked="1"><?php esc_html_e( 'Satisfaction', 'janitorial-cleaning-services' ); ?> </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="clientbx" bis_skin_checked="1">           
                        <div class="clntsnum" bis_skin_checked="1"><?php echo esc_html(get_theme_mod('janitorial_cleaning_banner_happyclient_num', '10K+')); ?> </div>
                        <div class="clnttxt" bis_skin_checked="1"><?php esc_html_e( 'Happy Clients', 'janitorial-cleaning-services' ); ?> </div>
                    </div>
                    
                </div>
                  </div>
              </div>
          </div>
      </div>
  </section>

  <?php do_action( 'janitorial_cleaning_services_below_slider' ); ?>

  <section id="feature">
    <div class="container">
        <div class="titlebx">
            <h5> 
              <span>
                <?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_featuresubheading', ' Why Choose Us')); ?></span>
                <div class="shbg"></div>
            </h5>

            <h2>
              <?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_featuresheading', "Why We're ")); ?> <span><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_featuresheadingspan', 'Different')); ?></span>
            </h2>

            <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_featuresdescription', "Not just another cleaning service – we're your partner in creating spaces you love")); ?></p>
        </div>
    </div>
    <div class="container">
      <div class="featurebx">
        <div class="row m-0 p-0">
          
          <div class="contenbx m-0 p-0">
              <div class="rw m-0 p-0">
                <!-- Feature 1 -->
                <div class=" feabx fea-color-1">
                  <div class="feabxinn">
                    <div class="single-fea">
                        <div class="icnbx">
                          <?php $icon1 = esc_attr( get_theme_mod( 'janitorial_cleaning_services_feature_icon1', 'fas fa-home' ) );
                          if ( ! empty( $icon1 ) ) : ?>
                            <i class="<?php echo $icon1; ?>"></i>
                          <?php else : ?>
                            
                          <?php endif; ?>
                        </div>
                        <div class="fea-conbx">
                          <h1><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box1_number', 'Licensed & Insured ')); ?></h1>
                          <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box1_heading', 'Fully certified team with comprehensive insurance coverage for your complete peace of mind and protection.')); ?></p>
                        </div>
                    </div>
                  </div>
                </div>

                <!-- Feature 2 -->
                <div class=" feabx fea-color-2">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                          <?php $icon2 = esc_attr( get_theme_mod( 'janitorial_cleaning_services_feature_icon2', 'fa fa-trophy' ) );
                          if ( ! empty( $icon2 ) ) : ?>
                            <i class="<?php echo $icon2; ?>"></i>
                          <?php else : ?>
                          
                          <?php endif; ?>
                          </div>
                          <div class="fea-conbx">
                            <h1><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box2_number', 'Premium Materials')); ?></h1>
                            <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box2_heading', 'We use only top-quality materials from trusted suppliers to ensure lasting, beautiful results.')); ?></p>
                          </div>
                      </div>
                    </div>
                </div>

                <!-- Feature 3 -->
                <div class=" feabx fea-color-3">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon3 = esc_attr( get_theme_mod( 'janitorial_cleaning_services_feature_icon3', 'fa fa-users' ) );
                            if ( ! empty( $icon3 ) ) : ?>
                              <i class="<?php echo $icon3; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>
                          <div class="fea-conbx">
                            <h1><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box3_number', 'On-Time Delivery')); ?></h1>
                            <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box3_heading', 'We use only top-quality materials from trusted suppliers to ensure lasting, beautiful results.')); ?></p>
                          </div>
                      </div>
                    </div>
                  </div>

                  <!-- Feature 4 -->
                  <div class=" feabx fea-color-4">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon3 = esc_attr( get_theme_mod( 'janitorial_cleaning_services_feature_icon4', 'fa fa-users' ) );
                            if ( ! empty( $icon3 ) ) : ?>
                              <i class="<?php echo $icon3; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>        
                          <div class="fea-conbx">
                              <h1><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box4_number', 'Expert Management')); ?></h1>
                              <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_feature_box4_heading', 'We use only top-quality materials from trusted suppliers to ensure lasting, beautiful results.')); ?></p>
                            </div>
                      
                      </div>
                    </div>
                  </div>
                </div>
            </div>

        </div>
      </div>
    </div>
  </section>
    
  <?php do_action( 'janitorial_cleaning_services_below_aboutus' ); ?>

  <section id="ourservices-section">
      <div class="container">
          <div class="titlebx">
              <h5>
                <span><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_ourservicessubheading', 'Our Services')); ?></span>
                <div class="shbg"></div>
              </h5>
              <h2>
                  <?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_ourservicesheading', 'What We')); ?> <span><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_ourservicesheadingspan', 'Offer')); ?></span>
              </h2>
              <p><?php echo esc_html(get_theme_mod('janitorial_cleaning_services_btn_ourservicesdescription', 'Professional cleaning solutions tailored to your specific needs')); ?></p>
          </div>
      </div>
         
      <div class="container-fluid p-0">
          <div class="ourservices-container">
              <div class="row m-0 p-0">
                  <?php
                      // Get selected page IDs
                      $page_ids = array(
                        get_theme_mod('janitorial_cleaning_services_ourservices_page_1'),
                        get_theme_mod('janitorial_cleaning_services_ourservices_page_2'),
                        get_theme_mod('janitorial_cleaning_services_ourservices_page_3'),
                        get_theme_mod('janitorial_cleaning_services_ourservices_page_4'),
                      );

                      $i = 1; 

                      foreach ($page_ids as $page_id) :
                        $page = get_post($page_id);

                        if ($page instanceof WP_Post) :
                  ?>
                  <div class="col-lg-3 col-md-6 col-sm-12 serbx">
                      <div class="ourservices-box ">       
                          <div class="imgbx">
                              <div class="ourservices-img">
                                  <?php echo get_the_post_thumbnail($page->ID, 'full'); ?>
                                  <div class="ser-oly"></div>      
                                  <div class="ourservices-content"> 
                                      <div class="subtitl">
                                          <?php
                                            $icon_index = array_search( $page_id, $page_ids );

                                            if ( $icon_index !== false ) {
                                              $icon_index++; // 1-based index
                                              $icon_class = get_theme_mod(
                                                "janitorial_cleaning_services_ourservices_icon{$icon_index}",
                                                'fa fa-home'
                                              );

                                              echo '<i class="' . esc_attr( $icon_class ) . '"></i>';
                                            }
                                          ?>
                                      </div>
                                      <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                                          <div class="title"><?php echo esc_html(get_the_title($page->ID)); ?></div>
                                      </a>
                                      <div class="ourservices-description">
                                        <?php
                                        $excerpt = $page->post_excerpt ? $page->post_excerpt : wp_strip_all_tags($page->post_content);
                                        echo esc_html(wp_trim_words($excerpt, 20));
                                        ?>
                                      </div>
                                      <div class="s-btn" >
                                          <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                                            <?php esc_html_e('Learn More', 'janitorial-cleaning-services'); ?> →
                                          </a>
                                      </div>
                                  </div> 
                              </div>
                          </div>
                              
                          
                      </div>
                  </div>
                  <?php
                    endif;  endforeach; 
                  ?>
              </div>
          </div>
      </div>
      <div class="clearfix"></div>
  </section>

  <?php do_action( 'janitorial_cleaning_services_below_ourservicess' ); ?>

  <!-- <div class="container entry-content py-4">
    <?php while ( have_posts() ) : the_post(); ?>
      <?php the_content(); ?>
    <?php endwhile; // end of the loop. ?>
  </div> -->
</main>
<?php get_footer(); ?>