<section class="about-section">
    <div class="container">

        <div class="aboutheading">
            <p class="about-header">
                <?php echo esc_html(get_theme_mod('go_mechanic_about_header', __('ABOUT US', 'go-mechanic'))); ?>
            </p>

            <h2 class="about-title">
                <?php echo esc_html(get_theme_mod('go_mechanic_subheading_text', __('A modern garage built on trust, skill, and speed', 'go-mechanic'))); ?>
            </h2>

            <p class="about-description">
                <?php echo esc_html(get_theme_mod('go_mechanic_text', __('We combine experienced technicians with up-to-date tools to deliver repairs that last—without the guesswork.', 'go-mechanic'))); ?>
            </p>
        </div>
        <div class="about-grid">
            <!-- LEFT COLUMN -->
            <div class="about-left">

                <div class="about-image-wrapper">
                    <?php
                    $go_mechanic_about_bigimage = get_theme_mod('go_mechanic_about_bigimage');
                    if (!empty($go_mechanic_about_bigimage)) {
                        echo '<img class="about-main-image" alt="' . esc_attr__('About us', 'go-mechanic') . '" src="' . esc_url($go_mechanic_about_bigimage) . '" />';
                    } else {
                        echo '<img class="about-main-image" alt="' . esc_attr__('About us', 'go-mechanic') . '" src="' . esc_url(get_template_directory_uri()) . '/assets/images/car-image.png"/>';
                    }
                    ?>
                </div>

                <!-- Statistics Cards -->
                <div class="about-stats">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper">
                            <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_statfirst_icon', 'fa-solid fa-shield-halved')); ?>"></i><span
                                class="stat-label"><?php echo esc_html(get_theme_mod('go_mechanic_statfirst_label', __('Experience', 'go-mechanic'))); ?></span>
                        </div>
                        <div class="stat-content">
                            <span
                                class="stat-value"><?php echo esc_html(get_theme_mod('go_mechanic_statfirst_value', __('18+ Years', 'go-mechanic'))); ?></span>

                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon-wrapper">
                            <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_statsecond_icon', 'fa-solid fa-users')); ?>"></i> <span
                                class="stat-label"><?php echo esc_html(get_theme_mod('go_mechanic_statsecond_label', __('Customers', 'go-mechanic'))); ?></span>
                        </div>
                        <div class="stat-content">
                            <span
                                class="stat-value"><?php echo esc_html(get_theme_mod('go_mechanic_statsecond_value', __('12K+', 'go-mechanic'))); ?></span>

                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon-wrapper">
                            <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_statthird_icon', 'fa-solid fa-wrench')); ?>"></i> <span
                                class="stat-label"><?php echo esc_html(get_theme_mod('go_mechanic_statthird_label', __('Repairs', 'go-mechanic'))); ?></span>
                        </div>
                        <div class="stat-content">
                            <span
                                class="stat-value"><?php echo esc_html(get_theme_mod('go_mechanic_statthird_value', __('28K+', 'go-mechanic'))); ?></span>

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

            <!-- RIGHT COLUMN -->
            <div class="about-right">
                <!-- Main Image -->


                <!-- Feature Cards -->
                <div class="about-features">
                    <div class="feature-card">

                        <div class="feature-content">
                            <div class="flex">
                                <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_featurefirst_icon', 'fa-solid fa-magnifying-glass')); ?>"></i>
                                <h3><?php echo esc_html(get_theme_mod('go_mechanic_featurefirst_title', __('Diagnose precisely', 'go-mechanic'))); ?>
                                </h3>
                            </div>
                            <p><?php echo esc_html(get_theme_mod('go_mechanic_featurefirst_text', __('We start with data-backed diagnostics so we fix the root cause—not just the symptom.', 'go-mechanic'))); ?>
                            </p>
                        </div>
                    </div>

                    <div class="feature-card">

                        <div class="feature-content">
                            <div class="flex">
                                <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_featuresecond_icon', 'fa-solid fa-file-invoice')); ?>"></i>
                                <h3><?php echo esc_html(get_theme_mod('go_mechanic_featuresecond_title', __('Quote transparently', 'go-mechanic'))); ?>
                                </h3>
                            </div>
                            <p><?php echo esc_html(get_theme_mod('go_mechanic_featuresecond_text', __('Clear estimates with options. You approve the work before we begin.', 'go-mechanic'))); ?>
                            </p>
                        </div>
                    </div>

                    <div class="feature-card">

                        <div class="feature-content">
                            <div class="flex">
                                <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_featurethird_icon', 'fa-solid fa-toolbox')); ?>"></i>
                                <h3><?php echo esc_html(get_theme_mod('go_mechanic_featurethird_title', __('Repair with care', 'go-mechanic'))); ?>
                                </h3>
                            </div>
                            <p><?php echo esc_html(get_theme_mod('go_mechanic_featurethird_text', __('Quality parts, certified hands, and checks that ensure your car leaves in better condition.', 'go-mechanic'))); ?>
                            </p>
                        </div>
                    </div>

                    <div class="feature-card">

                        <div class="feature-content">
                            <div class="flex">
                                <i class="<?php echo esc_attr(get_theme_mod('go_mechanic_featurefourth_icon', 'fa-solid fa-shield-halved')); ?>"></i>
                                <h3><?php echo esc_html(get_theme_mod('go_mechanic_featurefourth_title', __('Stand behind it', 'go-mechanic'))); ?>
                                </h3>
                            </div>
                            <p><?php echo esc_html(get_theme_mod('go_mechanic_featurefourth_text', __('We support our work with warranty-backed repairs and follow-up recommendations.', 'go-mechanic'))); ?>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>