<?php
/**
 * Template Name: Home Template
 */

get_header(); ?>

  <?php if ( get_theme_mod( 'ai_services_top_slider_setting', false ) != false ) { ?>
    
    <section id="top-slider">
      <div class="banner-background-shape">
        <svg width="1920" height="1106" viewBox="0 0 1920 1106" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
          <!-- Layer 1: Purple outer wings — slow scale + opacity breathe -->
          <g filter="url(#filter0_f_4_43)">
            <path d="M2099.25 956H1792.23C1584.33 733.695 1288.39 594.75 960 594.75C631.611 594.75 335.673 733.695 127.768 956H-179.247V106H127.768C335.673 328.305 631.611 467.25 960 467.25C1288.39 467.25 1584.33 328.305 1792.23 106H2099.25V956Z" fill="#7D59FB">
              <animate attributeName="opacity" values="0.55;1;0.55" dur="14s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"></animate>
              <animateTransform attributeName="transform" type="scale" additive="sum" values="1 1;1.05 1.03;1 1" dur="14s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" transformorigin="960 531"></animateTransform>
            </path>
          </g>
          <!-- Layer 2: Lavender mid wings — counter-phase breathe -->
          <g filter="url(#filter1_f_4_43)">
            <path d="M2210 856.834H1944.64C1775.42 683.664 1539.28 576.171 1278.03 576.17H641.97C380.722 576.17 144.579 683.664 -24.6396 856.834H-290V196.449H-24.6396C144.579 369.618 380.722 477.113 641.97 477.113H1278.03C1539.28 477.113 1775.42 369.618 1944.64 196.449H2210V856.834Z" fill="#B794FC">
              <animate attributeName="opacity" values="0.4;0.8;0.5;0.4" keyTimes="0;0.4;0.7;1" dur="11s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"></animate>
              <animateTransform attributeName="transform" type="scale" additive="sum" values="1 1;0.97 1.04;1.04 0.97;1 1" keyTimes="0;0.4;0.7;1" dur="11s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1" transformorigin="960 527"></animateTransform>
            </path>
          </g>
          <!-- Layer 3: White inner wings — fast pulse -->
          <g filter="url(#filter2_f_4_43)">
            <path d="M2099.25 717.007H1949.76C1854.44 619.456 1721.41 558.902 1574.24 558.902H345.757C198.589 558.902 65.5633 619.456 -29.7625 717.007H-179.247V344.993H-29.7625C65.5633 442.545 198.589 503.099 345.757 503.099H1574.24C1721.41 503.099 1854.44 442.545 1949.76 344.993H2099.25V717.007Z" fill="#E7E3FA">
              <animate attributeName="opacity" values="0.45;1;0.45" dur="7s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"></animate>
              <animateTransform attributeName="transform" type="scale" additive="sum" values="1 1;1.07 1.05;1 1" dur="7s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" transformorigin="960 531"></animateTransform>
            </path>
          </g>
          <defs>
            <filter id="filter0_f_4_43" x="-329.247" y="-44" width="2578.49" height="1150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                <feGaussianBlur stdDeviation="75" result="effect1_foregroundBlur_4_43"></feGaussianBlur>
            </filter>
            <filter id="filter1_f_4_43" x="-340" y="146.449" width="2600" height="760.385" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                <feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_4_43"></feGaussianBlur>
            </filter>
            <filter id="filter2_f_4_43" x="-220.247" y="303.993" width="2360.49" height="454.014" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
              <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
              <feGaussianBlur stdDeviation="20.5" result="effect1_foregroundBlur_4_43"></feGaussianBlur>
            </filter>
          </defs>
        </svg>
      </div>
      <div class="container">
        <div class="slider-inner-box text-center">
          <?php if ( get_theme_mod( 'ai_services_slider_short_heading') != '') : ?>
            <span class="slider-badge"><?php echo esc_html( get_theme_mod( 'ai_services_slider_short_heading') ); ?></span>
          <?php endif; ?>

          <?php if ( get_theme_mod( 'ai_services_banner_heading') != '') : ?>
            <h2 class="slide_main_head"><?php echo esc_html( get_theme_mod( 'ai_services_banner_heading') ); ?></h2>
          <?php endif; ?>

          <?php if ( get_theme_mod( 'ai_services_banner_circle_heading') != '') : ?>
            <div class="circle-box">
              <span class="circle_head"><?php echo esc_html( get_theme_mod( 'ai_services_banner_circle_heading') ); ?></span>
            </div>
          <?php endif; ?>

          <?php if ( get_theme_mod( 'ai_services_banner_content') != '') : ?>
            <p class="slide_content"><?php echo esc_html( get_theme_mod( 'ai_services_banner_content') ); ?></p>
          <?php endif; ?>

          <div class="slide-btns">
            <?php if ( get_theme_mod( 'ai_services_slider_button_text_2') != '' && get_theme_mod( 'ai_services_slider_button_text_2_url') != '' ) : ?>
              <span class="banner-cta-line" aria-hidden="true"></span>
              <div class="slide-btn-2 text-center">
                <a href="<?php echo esc_url( get_theme_mod( 'ai_services_slider_button_text_2_url' ) ); ?>">
                  <?php echo esc_html( get_theme_mod( 'ai_services_slider_button_text_2', '' ) ); ?>
                </a>
              </div>
              <span class="banner-cta-line" aria-hidden="true"></span>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </section>
  <?php } ?>


<main id="skip-content">

  <?php if(get_theme_mod('ai_services_services_setting',true) != ''){ ?>
    <section id="features-section" class="py-5">
      <div class="container">
        <div class="features-head mb-5 text-center">
          <?php if(get_theme_mod('ai_services_features_sub_heading') != '') {?>
            <span class="sub-title"><?php echo esc_html(get_theme_mod('ai_services_features_sub_heading')); ?></span>
          <?php }?>
          <?php if(get_theme_mod('ai_services_features_main_heading') != '') {?>
            <h3><?php echo esc_html(get_theme_mod('ai_services_features_main_heading')); ?></h3>
          <?php }?>
        </div>
        <div class="row">
          <?php
            $ai_services_catData = get_theme_mod('ai_services_features_category');
            if($ai_services_catData){
              $ai_services_page_query = new WP_Query(array( 'category_name' => esc_html($ai_services_catData,'ai-services'),
                'posts_per_page' => esc_attr(get_theme_mod('ai_services_features_post_count',3)) ));
              $ai_services_count=1;
              while( $ai_services_page_query->have_posts() ) : $ai_services_page_query->the_post(); ?>
                <div class="col-lg-4 col-md-4">
                  <div class="feature-box">
                    <div class="feature-icon">
                      <i class="<?php echo esc_attr(get_theme_mod('ai_services_feature_icon'.$ai_services_count)); ?>"></i>
                    </div>
                    <h4><a href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
                    <p><?php echo esc_html( wp_trim_words( get_the_content(), 20 )); ?></p>
                    <div class="feature-btn mt-4">
                      <a href="<?php the_permalink(); ?>"><?php echo esc_html(get_theme_mod('ai_services_features_btn_text')); ?></a>
                    </div>
                  </div>
                </div>
              <?php $ai_services_count++; endwhile;
              wp_reset_postdata();
            } ?>
        </div>
      </div>
    </section>
  <?php } ?>

  <?php if ( get_theme_mod( 'ai_services_task_section_setting', false ) ) { ?>
    <section id="task-section" class="py-5">
      <div class="task-outer-box">
        <div class="container">
          <div class="task-box">
            <div class="row align-items-center">

              <!-- Right: Headings + Form -->
              <div class="col-xl-8 col-lg-7 col-md-12 pe-xl-5 pe-lg-4">

                <?php
                  $ai_services_task_heading = get_theme_mod( 'ai_services_task_heading', '' );
                  if ( $ai_services_task_heading ) : ?>
                  <h3 class="task-main-heading"><?php echo esc_html( $ai_services_task_heading ); ?></h3>
                <?php endif; ?>

                <?php $ai_services_task_content = get_theme_mod( 'ai_services_task_content', '' );
                  if ( $ai_services_task_content ) : ?>
                  <p class="task-text"><?php echo esc_html( $ai_services_task_content ); ?></p>
                <?php endif; ?>

                <ul class="task-list">
                  <?php for ($i=1; $i <= 4; $i++) {  ?>
                    <?php if(get_theme_mod('ai_services_task_list_text'.$i) != ''){ ?>
                      <li><?php echo esc_html( get_theme_mod('ai_services_task_list_text'.$i) ); ?></li>
                    <?php }?>
                  <?php }?>
                </ul>

              </div>

              <!-- Left: Image -->
              <div class="offset-xl-1 col-xl-3 col-lg-5 col-md-12 align-self-center">
                <div class="task-img-wrap">
                  <?php
                    $ai_services_task_right_image = get_theme_mod( 'ai_services_task_right_image', '' );
                    if ( $ai_services_task_right_image ) :
                  ?>
                    <img class="task-img" src="<?php echo esc_url( $ai_services_task_right_image ); ?>" alt="<?php esc_attr_e( 'Task Image', 'ai-services' ); ?>" />
                  <?php else : ?>
                    <img class="task-img" src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/task-img.png' ); ?>" alt="<?php esc_attr_e( 'Task Image', 'ai-services' ); ?>" />
                  <?php endif; ?>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>
  <?php } ?>

  <section id="page-content">
    <div class="container">
      <div class="py-5">
        <?php
          if ( have_posts() ) :
            while ( have_posts() ) : the_post();
              the_content();
            endwhile;
          endif;
        ?>
      </div>
    </div>
  </section>

</main>

<?php get_footer(); ?>