<?php
/**
 * Template part for displaying About Section
 *
 * @package express-movers
 */

$express_movers_featured_about_section_aboutus_subheading = express_movers_get_option('featured_about_section_aboutus_subheading');
$express_movers_featured_about_section_aboutus_experienceyear = express_movers_get_option('featured_about_section_aboutus_experienceyear');
$express_movers_featured_about_section_aboutus_experienceyearno = express_movers_get_option('express_movers_featured_about_section_aboutus_experienceyearno');
$express_movers_featured_about_section_aboutus_heading = express_movers_get_option('featured_about_section_aboutus_heading');
$express_movers_featured_about_section_aboutus_heading1 = express_movers_get_option('featured_about_section_aboutus_heading1');
$express_movers_featured_about_section_description = express_movers_get_option('featured_about_section_description');
$express_movers_featured_about_section_li_items1 = express_movers_get_option('featured_about_section_li_items1');
$express_movers_featured_about_section_li_items2 = express_movers_get_option('featured_about_section_li_items2');
$express_movers_featured_about_section_li_items3 = express_movers_get_option('featured_about_section_li_items3');
$express_movers_featured_about_section_li_items4 = express_movers_get_option('featured_about_section_li_items4');

$express_movers_about_stat_icon_1 = express_movers_get_option('featured_about_stat_icon_1');
$express_movers_about_stat_icon_2 = express_movers_get_option('featured_about_stat_icon_2');
$express_movers_about_list_icon = express_movers_get_option('featured_about_list_icon');
$express_movers_about_award_icon = express_movers_get_option('featured_about_award_icon');

if (!get_theme_mod('expressmovers_enable_featured_about_section', true)) {
    return;
}

$express_movers_about_image1 = get_theme_mod('express_movers_about_image1');
$express_movers_about_image2 = get_theme_mod('express_movers_about_image2');

// ✅ Fallback images (theme folder)
$fallback1 = get_template_directory_uri() . '/assets/images/aboutusimg1.png';
$fallback2 = get_template_directory_uri() . '/assets/images/aboutusimg2.png';

// ✅ Use fallback if empty
$express_movers_about_image1 = !empty($express_movers_about_image1) ? $express_movers_about_image1 : $fallback1;
$express_movers_about_image2 = !empty($express_movers_about_image2) ? $express_movers_about_image2 : $fallback2;
?>

<section id="featured-about" class="express-about-section">
    <div class="express-about-container">
        <div class="express-about-grid">
            <div
                class="express-about-content <?php echo esc_attr(get_theme_mod('express_movers_featured_about_onload_effects', 'wow zoomIn')); ?>">
                <div class="position-relative">
                    
                    <span
                        class="express-about-badge">
                        <div class="d-flex gap-1">
                        <div class="dot"></div>
                        <div class="dot delay-1"></div>
                        <div class="dot delay-2"></div>
                    </div><?php echo esc_html($express_movers_featured_about_section_aboutus_subheading); ?></span>
                </div>

                <h2 class="express-about-title">
                    <?php echo esc_html($express_movers_featured_about_section_aboutus_heading); ?>
                    <span><?php echo esc_html($express_movers_featured_about_section_aboutus_heading1); ?></span>
                </h2>

                <p class="express-about-desc">
                    <?php echo esc_html($express_movers_featured_about_section_description); ?>
                </p>

                <div class="express-about-stats gap-4">

                    <!-- STAT 1 -->
                    <div class="express-about-stat express-about-stat-dark">
                        <div class="icon-box gradient-dark mb-3">
                            <!-- ICON -->
                            <i class="fas <?php echo esc_attr($express_movers_about_stat_icon_1); ?> icon-white"
                                style="font-size:20px;"></i>
                        </div>

                        <strong>
                            <?php echo esc_html(get_theme_mod('express_movers_aboutus_image_box1_number', '50K+')); ?>
                        </strong>

                        <small>
                            <?php echo esc_html(get_theme_mod('express_movers_aboutus_image_box1_text', 'Successful Deliveries')); ?>
                        </small>
                    </div>

                    <!-- STAT 2 -->
                    <div class="express-about-stat express-about-stat-light">
                        <div class="icon-box gradient-light mb-3">
                            <!-- ICON -->
                            <i class="fas <?php echo esc_attr($express_movers_about_stat_icon_2); ?> icon-theme"
                                style="font-size:20px;"></i>
                        </div>

                        <strong>
                            <?php echo esc_html(get_theme_mod('express_movers_aboutus_image_box2_number', '98%')); ?>
                        </strong>

                        <small>
                            <?php echo esc_html(get_theme_mod('express_movers_aboutus_image_box2_text', 'On-Time Rate')); ?>
                        </small>
                    </div>

                </div>

                <ul class="express-about-list">
                    <li class="d-flex">
                        <div class="icon-box-small d-flex align-items-center justify-content-center flex-shrink-0 shadow-sm"
                            style="  width: 32px;height: 32px; background: linear-gradient(135deg, #ff6b35, #ff8c42);
    border-radius: 8px; transition: transform 0.3s ease;margin-right: .5rem;">
                            <i class="fas <?php echo esc_attr($express_movers_about_list_icon); ?> icon-white"
                                style="font-size:14px;"></i>

                        </div> <?php echo esc_html($express_movers_featured_about_section_li_items1); ?>
                    </li>
                    <li class="d-flex">
                        <div class="icon-box-small d-flex align-items-center justify-content-center flex-shrink-0 shadow-sm"
                            style="  width: 32px;height: 32px; background: linear-gradient(135deg, #ff6b35, #ff8c42);
    border-radius: 8px; transition: transform 0.3s ease; margin-right: .5rem;">
                            <i class="fas <?php echo esc_attr($express_movers_about_list_icon); ?> icon-white"
                                style="font-size:14px;"></i>

                        </div><?php echo esc_html($express_movers_featured_about_section_li_items2); ?>
                    </li>
                    <li class="d-flex">
                        <div class="icon-box-small d-flex align-items-center justify-content-center flex-shrink-0 shadow-sm"
                            style="  width: 32px;height: 32px; background: linear-gradient(135deg, #ff6b35, #ff8c42);
    border-radius: 8px; transition: transform 0.3s ease;margin-right: .5rem;">
                            <i class="fas <?php echo esc_attr($express_movers_about_list_icon); ?> icon-white"
                                style="font-size:14px;"></i>

                        </div><?php echo esc_html($express_movers_featured_about_section_li_items3); ?>
                    </li>
                    <li class="d-flex">
                        <div class="icon-box-small d-flex align-items-center justify-content-center flex-shrink-0 shadow-sm"
                            style="  width: 32px;height: 32px; background: linear-gradient(135deg, #ff6b35, #ff8c42);
    border-radius: 8px; transition: transform 0.3s ease;margin-right: .5rem;">
                            <i class="fas <?php echo esc_attr($express_movers_about_list_icon); ?> icon-white"
                                style="font-size:14px;"></i>

                        </div><?php echo esc_html($express_movers_featured_about_section_li_items4); ?>
                    </li>
                </ul>

                <a href="<?php echo esc_url(get_theme_mod('express_movers_aboutus_button_url', '#')); ?>"
                    class="express-about-btn">
                    <?php echo esc_html(get_theme_mod('express_movers_aboutus_button_text', 'Discover Our Story')); ?><svg
                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        style="margin : 0.2rem 0rem 0rem 1rem;"
                        class="lucide lucide-arrow-right group-hover:translate-x-2 transition-transform">
                        <path d="M5 12h14"></path>
                        <path d="m12 5 7 7-7 7"></path>
                    </svg>
                </a>
            </div>

            <div
                class="express-about-visual <?php echo esc_attr(get_theme_mod('express_movers_featured_about_onload_effects', 'wow zoomIn')); ?>">
                <div class="express-about-main-image">
                    <img src="<?php echo esc_url($express_movers_about_image1); ?>"
                        alt="<?php esc_attr_e('Warehouse Image', 'express-movers'); ?>">

                        <div class="custom-box position-absolute"></div>


                </div>
                <div class="express-about-sub-image">
                    <img src="<?php echo esc_url($express_movers_about_image2); ?>"
                        alt="<?php esc_attr_e('Building Image', 'express-movers'); ?>">
                         <div class="custom-box2"></div>
                </div>
                <div class="express-about-float-badge">
                    <strong></strong>
                    <span></span>

                    <div class="award-badge position-absolute text-white d-flex flex-column align-items-center justify-content-center">
  
  <!-- Icon -->
<i class="fas <?php echo esc_attr($express_movers_about_award_icon); ?>" style="font-size:26px;"></i>

  <!-- Text -->
  <div class="years-text"><?php echo esc_html($express_movers_featured_about_section_aboutus_experienceyearno); ?></div>
  <div class="years-subtext text-center px-2"><?php echo esc_html($express_movers_featured_about_section_aboutus_experienceyear); ?></div>

  <!-- Ping Border -->
  <div class="ping-circle"></div>

</div>
                </div>
                
            </div>
        </div>
    </div>
</section>