<?php
/**
 * Template part for displaying the about section
 *
 * @package Paws_And_Care
 * @since 1.0.0
 */

// Check if section is enabled
$about_enable = get_theme_mod('paws_and_care_about_enable', true);
if (!$about_enable) {
    return;
}

// Get customizer values (defaults are in inc/customizer/defaults.php)
$about_title = get_theme_mod('paws_and_care_about_title', __('About Our Pet Care Center', 'paws-and-care'));
$about_lead = get_theme_mod('paws_and_care_about_lead', __('We are passionate about providing the highest quality care for your pets.', 'paws-and-care'));
$about_description = get_theme_mod('paws_and_care_about_description', __('Founded in 2010, Paws & Care has grown to become one of the most trusted pet care providers in the region. Our team of certified professionals is dedicated to ensuring your pets receive the love and attention they deserve.', 'paws-and-care'));
$about_image = get_theme_mod('paws_and_care_about_image', get_template_directory_uri() . '/assets/img/about.webp');
$about_features = get_theme_mod('paws_and_care_about_features', paws_and_care_get_about_features_default());

// Decode features if it's a string
if (is_string($about_features)) {
    $about_features = json_decode($about_features, true);
}
?>

<!-- About Section -->
<section class="py-5 my-5 about-section">
    <?php paws_and_care_section_shortcut('paws_and_care_about', __('Edit About', 'paws-and-care')); ?>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <img src="<?php echo esc_url($about_image); ?>" alt="<?php echo esc_attr($about_title); ?>"
                    class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h2 class="section-title"><?php echo esc_html($about_title); ?></h2>
                <p class="lead"><?php echo esc_html($about_lead); ?></p>
                <p class="text-dark"><?php echo esc_html($about_description); ?></p>

                <?php if (!empty($about_features) && is_array($about_features)): ?>
                    <div class="row mt-4">
                        <?php foreach ($about_features as $feature):
                            $feature_title = !empty($feature['title']) ? $feature['title'] : '';
                            $feature_text = !empty($feature['text']) ? $feature['text'] : '';
                            $feature_icon = !empty($feature['icon_value']) ? $feature['icon_value'] : 'fa-star';

                            // Always add fa-solid prefix
                            $icon_class = str_replace(array('fa-solid ', 'fa-brands ', 'fa-regular ', 'fa '), '', $feature_icon);
                            $icon_class = 'fa-solid ' . $icon_class;
                            ?>
                            <div class="col-md-6 mb-3">
                                <div class="d-flex align-items-center">
                                    <div class="feature-icon-circle me-3">
                                        <i class="<?php echo esc_attr($icon_class); ?>"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-0"><?php echo esc_html($feature_title); ?></h5>
                                        <p class="mb-0 text-muted"><?php echo esc_html($feature_text); ?></p>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>