<?php
if (get_theme_mod('mobile_app_launch_about_enable', true) != '') : ?>
<section id="about" class="my-5 px-md-0 px-3">
    <div class="container">
        <?php
        $mobile_app_launch_about_page_id = absint(get_theme_mod('mobile_app_launch_about_page', get_page_id_by_slug('feature-page')));
        if ($mobile_app_launch_about_page_id != 0) : 
            $mobile_app_launch_args = array(
                'post_type' => 'page',
                'p' => $mobile_app_launch_about_page_id
            );
            $mobile_app_launch_query = new WP_Query($mobile_app_launch_args);
            if ($mobile_app_launch_query->have_posts()) :
                while ($mobile_app_launch_query->have_posts()) : $mobile_app_launch_query->the_post(); ?>
                    <div class="row">
                        <div class="col-lg-7 col-md-7 align-self-center wow fadeInRight" data-wow-delay="0.5s">
                            <div class="match-heading">
                                <?php if (get_theme_mod('mobile_app_launch_service_sub_heading') != '') : ?>
                                    <p class="mb-2 abt-title"><?php echo esc_html(get_theme_mod('mobile_app_launch_service_sub_heading')); ?></p>
                                <?php endif; ?>
                                <?php
                                  $mobile_app_launch_title = get_the_title();
                                  $mobile_app_launch_title_words = explode(' ', $mobile_app_launch_title);
                                  $mobile_app_launch_word_count = count($mobile_app_launch_title_words);

                                  if ($mobile_app_launch_word_count > 1) {
                                      // Get the last word
                                      $mobile_app_launch_last_word = array_pop($mobile_app_launch_title_words);

                                      // Reconstruct the title without the last word
                                      $mobile_app_launch_rest_of_title = implode(' ', $mobile_app_launch_title_words);

                                      // Highlight the last word
                                      $mobile_app_launch_highlighted_title = $mobile_app_launch_rest_of_title . ' <span class="highlighted-word">' . esc_html($mobile_app_launch_last_word) . '</span>';
                                  } else {
                                      // If there's only one word, just highlight it
                                      $mobile_app_launch_highlighted_title = '<span class="highlighted-word">' . esc_html($mobile_app_launch_title) . '</span>';
                                  }
                                ?>
                                <h2 class="mb-3">
                                    <a href="<?php the_permalink(); ?>" class="text-capitalize"><?php echo $mobile_app_launch_highlighted_title; ?></a>
                                </h2>
                            </div>
                            <p class="mb-4 abt-content"><?php echo esc_html(wp_trim_words(get_the_content(), 32)); ?></p>
                            <?php for ($mobile_app_launch_i = 1; $mobile_app_launch_i <= 2; $mobile_app_launch_i++) : ?>
                                    <div class="tab-item">
                                        <div class="tab-title">
                                            <?php 
                                            $mobile_app_launch_heading = get_theme_mod('mobile_app_launch_tab_heading' . $mobile_app_launch_i,'Refreshing to get such a personal touch');
                                            if (!empty($mobile_app_launch_heading)) : ?>
                                                <h3 class="mb-2"><i class="fas fa-check me-2"></i> <?php echo esc_html($mobile_app_launch_heading); ?></h3>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                            <?php endfor; ?>
                            <div class="percent-box d-flex">
                                <!-- Marketing % -->
                                <?php 
                                $mobile_app_launch_marketing_percentage = get_theme_mod('mobile_app_launch_marketing_percentage', ''); 

                                if (!empty($mobile_app_launch_marketing_percentage)) :
                                    $mobile_app_launch_percentage = floatval($mobile_app_launch_marketing_percentage);
                                    $mobile_app_launch_circumference = 2 * M_PI * 65; // Formula: 2πr (r = 65)
                                    $mobile_app_launch_offset = $mobile_app_launch_circumference - ($mobile_app_launch_percentage / 100 * $mobile_app_launch_circumference);
                                ?>
                                    <div class="circle-progress marketing mb-md-2 mb-5 mt-3">
                                        <div class="progress-bar" data-percent="<?php echo esc_attr($mobile_app_launch_percentage); ?>">
                                            <svg width="140" height="140" viewBox="0 0 140 140">
                                                <!-- Background Circle -->
                                                <circle cx="70" cy="70" r="65" stroke="#BAC2FF" stroke-width="6" fill="none"/>

                                                <!-- Progress Circle (Dynamic Update) -->
                                                <circle class="progress-ring" cx="70" cy="70" r="65" stroke="#0047FF" stroke-width="6" fill="none"
                                                    stroke-dasharray="<?php echo esc_attr($mobile_app_launch_circumference); ?>" 
                                                    stroke-dashoffset="<?php echo esc_attr($mobile_app_launch_offset); ?>"/>
                                            </svg>

                                            <!-- Progress Text -->
                                            <div class="progress-text mb-1">
                                                <div class="percentage"><?php echo esc_html($mobile_app_launch_percentage) . '%'; ?></div>
                                                <div class="label-text"><?php echo esc_html__('Marketing', 'mobile-app-launch'); ?></div>
                                            </div>
                                        </div>
                                    </div>
                                <?php endif; ?>
                                <!-- Optimization % -->
                                <?php 
                                $mobile_app_launch_optimization_percentage = get_theme_mod('mobile_app_launch_optimization_percentage', ''); 
                                if (!empty($mobile_app_launch_optimization_percentage)) :
                                    $mobile_app_launch_percentage = floatval($mobile_app_launch_optimization_percentage);
                                    $mobile_app_launch_circumference = 2 * M_PI * 65; // 2πr where r = 65
                                    $mobile_app_launch_offset = $mobile_app_launch_circumference - ($mobile_app_launch_percentage / 100 * $mobile_app_launch_circumference);
                                ?>
                                    <div class="circle-progress optimization ms-lg-5 ms-3 mb-md-2 mb-5 mt-3">
                                        <div class="progress-bar" data-percent="<?php echo esc_attr($mobile_app_launch_percentage); ?>">
                                            <svg width="140" height="140" viewBox="0 0 140 140">
                                                <!-- Background Circle -->
                                                <circle cx="70" cy="70" r="65" stroke="#FFC7C5" stroke-width="6" fill="none"/>

                                                <!-- Progress Circle (Dynamically Updates) -->
                                                <circle class="progress-ring" cx="70" cy="70" r="65" stroke="#FF5771" stroke-width="6" fill="none"
                                                    stroke-dasharray="<?php echo esc_attr($mobile_app_launch_circumference); ?>" 
                                                    stroke-dashoffset="<?php echo esc_attr($mobile_app_launch_offset); ?>"/>
                                            </svg>

                                            <!-- Progress Text -->
                                            <div class="progress-text">
                                                <div class="percentage mb-1"><?php echo esc_html($mobile_app_launch_percentage) . '%'; ?></div>
                                                <div class="label-text"><?php echo esc_html__('Optimization', 'mobile-app-launch'); ?></div>
                                            </div>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 align-self-center image-abt wow fadeInLeft" data-wow-delay="0.5s">
                          <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 { ?>
                                <div class="abt-color"></div>
                              <?php } ?>
                              <!-- Red and Blue Dots -->
                              <span class="red-dot"></span>
                              <span class="blue-dot"></span>
                            </div>
                          </div>
                        </div>
                    </div>
                <?php endwhile;
                wp_reset_postdata();
            endif;
        endif; ?>
    </div>
</section>
<?php endif; ?>