<?php
/**
 * Template part for displaying service section
 *
 * @package Mobile App Hub
 * @subpackage mobile_app_hub
 */

$mobile_app_hub_static_image = get_stylesheet_directory_uri() . '/assets/images/header_img.png';

if (get_theme_mod('mobile_app_hub_about_enable', true) != '') : ?>
<section id="about" class="my-5 px-md-0 px-3">
    <div class="container">
        <?php
        $mobile_app_hub_about_page_id = absint(get_theme_mod('mobile_app_hub_about_page'));
        if ($mobile_app_hub_about_page_id != 0) : 
            $mobile_app_hub_args = array(
                'post_type' => 'page',
                'p' => $mobile_app_hub_about_page_id
            );
            $mobile_app_hub_query = new WP_Query($mobile_app_hub_args);
            if ($mobile_app_hub_query->have_posts()) :
                while ($mobile_app_hub_query->have_posts()) : $mobile_app_hub_query->the_post(); ?>
                    <div class="row">
                        <div class="col-lg-5 col-md-5 align-self-center image-abt">
                          <div class="about-block position-relative">
                            <div class="about-image1 position-relative">
                              <?php if (has_post_thumbnail()) { ?>
                                <img src="<?php the_post_thumbnail_url('full'); ?>" />
                              <?php } else { ?>
                                <img src="<?php echo esc_url($mobile_app_hub_static_image); ?>" />
                              <?php } ?>
                              <!-- Red and Blue Dots -->
                              <span class="red-dot"></span>
                              <span class="blue-dot"></span>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-7 col-md-7 align-self-center">
                          <div class="match-heading">
                            <?php if (get_theme_mod('mobile_app_hub_service_sub_heading') != '') : ?>
                                <p class="mb-3 abt-title"><?php echo esc_html(get_theme_mod('mobile_app_hub_service_sub_heading')); ?></p>
                            <?php endif; ?>
                            <?php
                              $mobile_app_hub_title = get_the_title();
                              $mobile_app_hub_title_words = explode(' ', $mobile_app_hub_title);
                              $mobile_app_hub_word_count = count($mobile_app_hub_title_words);

                              if ($mobile_app_hub_word_count > 1) {
                                  // Get the last word
                                  $mobile_app_hub_last_word = array_pop($mobile_app_hub_title_words);

                                  // Reconstruct the title without the last word
                                  $mobile_app_hub_rest_of_title = implode(' ', $mobile_app_hub_title_words);

                                  // Highlight the last word
                                  $mobile_app_hub_highlighted_title = $mobile_app_hub_rest_of_title . ' <span class="highlighted-word">' . esc_html($mobile_app_hub_last_word) . '</span>';
                              } else {
                                  // If there's only one word, just highlight it
                                  $mobile_app_hub_highlighted_title = '<span class="highlighted-word">' . esc_html($mobile_app_hub_title) . '</span>';
                              }
                            ?>
                            <h2 class="mb-2">
                                <a href="<?php the_permalink(); ?>" class="text-capitalize"><?php echo $mobile_app_hub_highlighted_title; ?></a>
                            </h2>
                          </div>
                          <p class="mb-4 abt-content"><?php echo esc_html(wp_trim_words(get_the_content(), 50)); ?></p>
                          <div class="row">
                            <?php for ($mobile_app_hub_i = 1; $mobile_app_hub_i <= 2; $mobile_app_hub_i++) : ?>
                                <div class="col-lg-6 col-md-6">
                                    <div class="tab-item">
                                        <div class="tab-title">
                                            <h3 class="mb-3"><?php echo esc_html(get_theme_mod('mobile_app_hub_tab_heading' . $mobile_app_hub_i)); ?></h3>
                                        </div>
                                        <div class="tab-description">
                                            <p><?php echo esc_html(get_theme_mod('mobile_app_hub_tab_para' . $mobile_app_hub_i)); ?></p>
                                        </div>
                                    </div>
                                </div>
                            <?php endfor; ?>
                          </div>
                        </div>
                    </div>
                <?php endwhile;
                wp_reset_postdata();
            endif;
        endif; ?>
    </div>
</section>
<?php endif; ?>