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

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

    <section id="banner">   
        <div class="banner-video-wrapper" >
            <video id="banner-video" autoplay muted loop playsinline style="width:100%; height:100%; object-fit:cover;">
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                <?php esc_html_e('Your browser does not support the video tag.', 'expert-videographer-studio'); ?>
            </video>
          <!-- Video Controls -->
            <div id="video-controls" style="position:absolute; top:2px; right:20px; z-index:2; display:flex; gap:10px;">
                <!-- Play / Pause Button -->
                <button id="playPauseBtn" style="background: none; border: none; color: white; font-size: 24px;">
                    <i class="fas fa-play" id="play-icon"></i> <!-- Default to play icon -->
                    <i class="fas fa-pause" id="pause-icon" style="display: none;"></i> <!-- Default hidden pause icon -->
                </button>

                <!-- Mute / Unmute Button -->
                <button id="muteUnmuteBtn" style="background: none; border: none; color: white; font-size: 24px;">
                    <i class="fas fa-volume-off" id="mute-icon"></i> <!-- Default to mute icon -->
                    <i class="fas fa-volume-up" id="unmute-icon" style="display: none;"></i> <!-- Default hidden unmute icon -->
                </button>
            </div>
        </div>
        <div class="container">
            <div class="contenbx">
                <h2><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_heading1')); ?>
                  <br>
                  <span ><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_heading2')); ?></span>
                </h2>
                <h5><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_heading3')); ?></h5>
                <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_description')); ?></p>

                <div class="bttn">              
                    <a class="bann1" href="<#">
                     <?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_btn1text','Explore Portfolio')); ?>  <i class="fa-solid fa-arrow-right"></i>
                    </a>
                   
                    <a class="bann2" href="#">
                      <i class="far fa-comment"></i><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_btn2text', 'Lets Connect')); ?>
                    </a>
                </div>
            </div>
            <div class="bann-counter">
                <div class="row ">
                    <div class="conterbx">
                        <h4><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box1number')); ?></h4>
                        <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box1text')); ?></p>
                    </div>
                    <div class="conterbx">
                        <h4><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box2number')); ?></h4>
                        <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box2text')); ?></p>
                    </div>
                    <div class="conterbx">
                        <h4><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box3number')); ?></h4>
                        <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box3text')); ?></p>
                    </div>
                    <div class="conterbx">
                        <h4><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box4number')); ?></h4>
                        <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_banner_box4text')); ?></p>
                    </div>
                </div>
            </div>
        </div>

  </section>

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

    <section id="aboutus-section">
        <div class="container">
          <div class="about-area-bx">
            <div class="row m-0">
                <div class="abt-conbx">
                    <div class="abt-conbxinn">
                        <h5><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutussubheading')); ?></h5>
                        <h4>
                          <?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusheading')); ?><br>
                          <span><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusheadingspan')); ?></span>
                        </h4>
                        <p >
                          <?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusdescription1')); ?></p>

                           <p >  <?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusdescription2')); ?></p>

                            <p > <?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusdescription3')); ?>
                        </p>
                    </div>

                    <div class="abt-counter">
                        <div class="row mr-0">
                            <div class="conterbx">
                                <h3><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusbox1number')); ?></h3>
                                <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusbox1text')); ?></p>
                            </div>
                            <div class="conterbx">
                                <h3><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusbox2number')); ?></h3>
                                <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusbox2text')); ?></p>
                            </div>
                            <div class="conterbx">
                                <h3><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusbox3number')); ?></h3>
                                <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusbox3text')); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="imgbx">
                    <div class="image">
                      <?php 
                        $expert_videographer_studio_aboutus_image1 = get_theme_mod('expert_videographer_studio_aboutus_image1');

                        if(!empty($expert_videographer_studio_aboutus_image1)){
                          echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($expert_videographer_studio_aboutus_image1).'" class="img-responsive secondry-bg-img" />';
                        }else{
                          echo '<img alt="expert_videographer_studio_aboutus_image1" src="'.get_template_directory_uri().'/assets/images/abt3.png" class="img-responsive" />';
                        }
                      ?>
                      <div class="yearbx">
                          <div class="num"><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusyearofexpnumber')); ?></div>
                          <div class="num-txt"><?php echo esc_html(get_theme_mod('expert_videographer_studio_aboutusyearofexptext')); ?></div>
                      </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
    </section>
    
  <?php do_action( 'expert_videographer_studio_below_aboutus' ); ?>

  <section id="service-section">
        <div class="container">
            <div class="titlebx">
                <h5><?php echo esc_html(get_theme_mod('expert_videographer_studio_btn_servicesubheading')); ?></h5>
                <h4>
                    <?php echo esc_html(get_theme_mod('expert_videographer_studio_btn_serviceheading')); ?>
                    <br>
                    <span><?php echo esc_html(get_theme_mod('expert_videographer_studio_btn_serviceheadingoffer')); ?></span>
                </h4>
                <p><?php echo esc_html(get_theme_mod('expert_videographer_studio_btn_servicedescription')); ?></p>
            </div>
        </div>
         
        <div class="container">
        <div class="row mr-0">
          <?php
          // Get selected page IDs from Customizer
          $page_ids = array(
            get_theme_mod('expert_videographer_studio_service_page_1'),
            get_theme_mod('expert_videographer_studio_service_page_2'),
            get_theme_mod('expert_videographer_studio_service_page_3'),
          );

          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-4 col-md-6 col-sm-12 serbx">
                  <div class="service-box ">
                      <div class="service-img">
                          <?php echo get_the_post_thumbnail($page->ID, 'full'); ?>
                          <div class="ser-oly"></div>
                          <div class="subtitl">
                                <?php
                                  // Identify page index (1, 2, or 3)
                                  $heaidngprice = array_search($page_id, $page_ids) + 1;

                                  // Fetch list items for each page
                                  $h61 = get_theme_mod("expert_videographer_studio_service_pricetext{$heaidngprice}");
                                  $h62 = get_theme_mod("expert_videographer_studio_service_pricetext{$heaidngprice}");
                                  $h63 = get_theme_mod("expert_videographer_studio_service_pricetext{$heaidngprice}");

                                  // Output only if value exists
                                  if ($h61) echo '<h6>' . esc_html($h61) . '</h6>';
                                ?>
                          </div>
                      </div>
                      <div class="service-content">
                        <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="service-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="list">
                            <?php
                            // Identify page index (1, 2, or 3)
                            $index = array_search($page_id, $page_ids) + 1;

                            // Fetch list items for each page
                            $list1 = get_theme_mod("expert_videographer_studio_service_list1_page{$index}");
                            $list2 = get_theme_mod("expert_videographer_studio_service_list2_page{$index}");
                            $list3 = get_theme_mod("expert_videographer_studio_service_list3_page{$index}");

                            // Output only if value exists
                            if ($list1) echo '<li>' . esc_html($list1) . '</li>';
                            if ($list2) echo '<li>' . esc_html($list2) . '</li>';
                            if ($list3) echo '<li>' . esc_html($list3) . '</li>';
                            ?>
                        </div>
                        <div class="bttn" >
                          <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                            <?php esc_html_e('Learn More', 'expert-videographer-studio'); ?>
                          </a>
                        </div>
                      </div>
                  </div>
              </div>
              <?php
            endif;
          endforeach;
          ?>
        
        </div>
      </div>
      <div class="clearfix"></div>
    </section>

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

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