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

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

    <?php if ( get_theme_mod( 'miniworld_kindergarten_slider_hide_show', true ) ) { ?> 
    <section id="slider" class=" mw-100">
        <div class="container">
       <!-- <div class="container"> -->
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel"> 
          <?php $miniworld_kindergarten_content_pages = array();
            for ( $count = 1; $count <= 4; $count++ ) {
              $mod = intval( get_theme_mod( 'miniworld_kindergarten_slider_page' . $count ));
              if ( 'page-none-selected' != $mod ) {
                $miniworld_kindergarten_content_pages[] = $mod;
              }
            }
            if( !empty($miniworld_kindergarten_content_pages) ) :
              $args = array(
                'post_type' => 'page',
                'post__in' => $miniworld_kindergarten_content_pages,
                'orderby' => 'post__in'
              );
              $query = new WP_Query( $args );
            if ( $query->have_posts() ) :
              $i = 1;
          ?>     
          <div class="carousel-inner" role="listbox">
            <?php  while ( $query->have_posts() ) : $query->the_post(); ?>
              <div <?php if($i == 1){echo 'class="carousel-item active"';} else{ echo 'class="carousel-item"';}?>>     
                  <div class="row">
                    <div class="slider-content">
                        
                        <div class="badge">
                          <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-gift w-7 h-7 text-pink-500" aria-hidden="true"><rect x="3" y="8" width="18" height="4" rx="1"></rect><path d="M12 8v13"></path><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"></path><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"></path></svg>
                          <h4><?php echo esc_html(get_theme_mod('miniworld_kindergarten_slider_subheading', 'Admissions Open 2025!')); ?></h4>

                        </div>
                        <h2 class="hero-title">
                            <span class="hero-line hero-purple"><?php echo esc_html(get_theme_mod('miniworld_kindergarten_slider_heading1', 'WOW!')); ?></span>
                            <span class="hero-line hero-red"><?php echo esc_html(get_theme_mod('miniworld_kindergarten_slider_heading2', 'Learn!')); ?></span>
                            <span class="hero-line hero-blue"><?php echo esc_html(get_theme_mod('miniworld_kindergarten_slider_heading3', 'Play!')); ?></span>
                        </h2>
                        <p><?php echo esc_html(get_theme_mod('miniworld_kindergarten_slider_description', 'The MOST FUN kindergarten where kids learn through awesome games, art, and adventures!')); ?></p>
                        
                        <div class="read-btn">
                          <a href="<?php echo esc_url(get_permalink()); ?>"><?php esc_html_e( 'Book a Visit!', 'miniworld-kindergarten' ); ?></a>

                          <a href="<?php echo esc_url(get_theme_mod('miniworld_kindergarten_slider_watchvideobtn_link', '#')); ?>"><?php esc_html_e( 'Watch Video!', 'miniworld-kindergarten' ); ?></a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="sliderbg-img">
                        <div class="frame-layer frame-1"></div>
                        <div class="frame-layer frame-2"></div>
                        <div class="frame-bg">
                        
                      <?php the_post_thumbnail(); ?>                            

                      </div>
                        <div class="icon-heart"><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-heart w-14 h-14 text-white fill-white" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg></div>
                        <div class="icon-star"><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-star w-16 h-16 text-white fill-white" aria-hidden="true"><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="icon-circle"><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-smile w-16 h-16 text-white fill-white" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" x2="9.01" y1="9" y2="9"></line><line x1="15" x2="15.01" y1="9" y2="9"></line></svg></div>
                        <div class="icon-lightning"><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-zap w-14 h-14 text-white fill-white" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div>
                       
                    </div>   
                </div>
              </div>
            <?php $i++; endwhile; 
            wp_reset_postdata();?>
          </div>
          
        </div>
        <?php else : ?> 
          <div class="no-postfound"></div>
        <?php endif;
        endif;?>
        <a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev" role="button">
          <span class="carousel-control-prev-icon" aria-hidden="true"><i class="fas fa-caret-left"></i></span><span class="screen-reader-text"><?php esc_html_e( 'Previous', 'miniworld-kindergarten' );?></span>
        </a>
        <a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" data-bs-slide="next" role="button">
          <span class="carousel-control-next-icon" aria-hidden="true"><i class="fas fa-caret-right"></i></span><span class="screen-reader-text"><?php esc_html_e( 'Next', 'miniworld-kindergarten' );?></span>
        </a>
      <!-- </div> -->
      <div class="clearfix"></div>
    </div>
    </section>
  <?php }?>

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

  <section id="feature">
    <div class="container">
          <div class="titlebx">
            <div class="fea-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="lucide lucide-thumbs-up w-24 h-24 text-pink-500" aria-hidden="true"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path><path d="M7 10v12"></path></svg>
            </div>
              <h2>
                  <?php echo esc_html(get_theme_mod('miniworld_kindergarten_btn_featuresheading', 'Why We\'re AWESOME! 🌟')); ?>
              </h2>
              <h5><?php echo esc_html(get_theme_mod('miniworld_kindergarten_btn_featuresubheading', 'So many reasons to love us!')); ?></h5>
          </div>
      </div>
    <div class="container">
      <div class="featurebx">
        <div class="row mr-0">

          <!-- Feature 1 -->
          <div class="col-lg-4 col-md-6 col-sm-6 feabx">
            <div class="fea-bg"></div>
            <div class="feabxinn">
              <div class="single-fea">
                
                <div class="content">
                  <div class="icnbx">
                    <?php $icon1 = esc_attr( get_theme_mod( 'miniworld_kindergarten_feature_icon1', 'fas fa-home' ) );
                    if ( ! empty( $icon1 ) ) : ?>
                      <i class="<?php echo $icon1; ?>"></i>
                    <?php else : ?>
                      <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 w-10 h-10 text-white" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
                    <?php endif; ?>
                  </div>
                  <h1><?php echo esc_html(get_theme_mod('miniworld_kindergarten_feature_box1_number', 'Super Safe! 🛡️')); ?></h1>
                  <p><?php echo esc_html(get_theme_mod('miniworld_kindergarten_feature_box1_heading', 'CCTV everywhere & caring staff!')); ?></p>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 2 -->
          <div class="col-lg-4 col-md-6 col-sm-6 feabx">
            <div class="fea-bg"></div>
            <div class="feabxinn">
              <div class="single-fea">
                
                <div class="content">
                  <div class="icnbx">
                  <?php $icon2 = esc_attr( get_theme_mod( 'miniworld_kindergarten_feature_icon2', 'fa fa-trophy' ) );
                  if ( ! empty( $icon2 ) ) : ?>
                    <i class="<?php echo $icon2; ?>"></i>
                  <?php else : ?>
                  <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-trophy w-10 h-10 text-white" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v6z"></path></svg>
                  <?php endif; ?>
                  </div>
                  <h1><?php echo esc_html(get_theme_mod('miniworld_kindergarten_feature_box2_number', 'Award Winning! 🏆')); ?></h1>
                  <p><?php echo esc_html(get_theme_mod('miniworld_kindergarten_feature_box2_heading', 'Best kindergarten in town!')); ?></p>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 3 -->
          <div class="col-lg-4 col-md-6 col-sm-6 feabx">
            <div class="fea-bg"></div>
            <div class="feabxinn">
              <div class="single-fea">
                
                <div class="content">
                  <div class="icnbx">
                    <?php $icon3 = esc_attr( get_theme_mod( 'miniworld_kindergarten_feature_icon3', 'fa fa-users' ) );
                    if ( ! empty( $icon3 ) ) : ?>
                      <i class="<?php echo $icon3; ?>"></i>
                    <?php else : ?>
                      <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-users w-10 h-10 text-white" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                    <?php endif; ?>
                  </div>
                  <h1><?php echo esc_html(get_theme_mod('miniworld_kindergarten_feature_box3_number', 'Small Classes! 👥')); ?></h1>
                  <p><?php echo esc_html(get_theme_mod('miniworld_kindergarten_feature_box3_heading', 'More attention for your kid!')); ?></p>
                </div>
              </div>
            </div>
          </div>

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

  <section id="ouramazingprograms-section">

  <div class="floating-star event-star-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" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-full h-full text-purple-500 fill-purple-500" aria-hidden="true"><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="floating-star event-star-2"><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-star w-full h-full text-purple-500 fill-purple-500" aria-hidden="true"><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="floating-star event-star-3"><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-star w-full h-full text-purple-500 fill-purple-500" aria-hidden="true"><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="floating-star event-star-4"><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-star w-full h-full text-purple-500 fill-purple-500" aria-hidden="true"><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="floating-star event-star-5"><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-star w-full h-full text-purple-500 fill-purple-500" aria-hidden="true"><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="floating-star event-star-6"><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-star w-full h-full text-purple-500 fill-purple-500" aria-hidden="true"><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="container">
            <div class="titlebx">
              <div class="event-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="lucide lucide-graduation-cap w-24 h-24 text-purple-500" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg>
              </div>
                <h4>
                    <?php echo esc_html(get_theme_mod('miniworld_kindergarten_btn_ouramazingprogramsheading', 'Our AMAZING Programs!')); ?>
                </h4>
                <h5><?php echo esc_html(get_theme_mod('miniworld_kindergarten_btn_ouramazingprogramssubheading', 'Choose your adventure!')); ?></h5>
            </div>
        </div>
         
        <div class="container">
        <div class="row mr-0">
          <?php
          // Get selected page IDs from Customizer
          $page_ids = array(
            get_theme_mod('miniworld_kindergarten_ouramazingprograms_page_1'),
            get_theme_mod('miniworld_kindergarten_ouramazingprograms_page_2'),
            get_theme_mod('miniworld_kindergarten_ouramazingprograms_page_3'),
            get_theme_mod('miniworld_kindergarten_ouramazingprograms_page_4'),

          );

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

            // Make sure it's a valid WP_Post object
            if ($page instanceof WP_Post) :
              ?>
              <div class="col-lg-3 col-md-6 col-sm-12 serbx">
                  <div class="ouramazingprograms-box ">
                    <div class="ouramazingprograms-bg1"></div>
                    <div class="ouramazingprograms-bg2"></div>
                    <div class="ouramazingprograms-container">
                      <div class="ouramazingprograms-img">
                          <?php echo get_the_post_thumbnail($page->ID, 'full'); ?>
                          <div class="ser-oly"></div>

                      </div>
                      <div class="ouramazingprograms-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(
                                "miniworld_kindergarten_ouramazingprograms_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>
                        <p class="ouramazingprograms-description">
                          <?php
                          $excerpt = $page->post_excerpt ? $page->post_excerpt : wp_strip_all_tags($page->post_content);
                          echo esc_html(wp_trim_words($excerpt, 10));
                          ?>
                        </p>
                        
                        <div class="bttn" >
                          <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                            <?php esc_html_e('Join Now 🎉', 'miniworld-kindergarten'); ?>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
              <?php
            endif;
          endforeach;
          ?>
        
        </div>
      </div>
      <div class="clearfix"></div>
    </section>

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

  <!-- <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(); ?>