<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Template Part: Enhanced Why Choose Section
 *
 * Features:
 * - Improved card design with hover effects
 * - Better icon handling and animations
 * - Enhanced responsive layout
 * - Modern visual styling
 */

// Get service settings from the Customizer
$pawfect_service_enabled = (bool) get_theme_mod('pawfect_service_area_enabled', true);
if (!$pawfect_service_enabled) {
    return;
}

// Add customizer edit shortcut for service content
if (is_customize_preview()) {
    echo '<div data-customize-partial-id="pawfect_service_content" data-customize-partial-type="widget" data-customize-partial-placement-context="frontpage">';
}
$pawfect_service_content = get_theme_mod('pawfect_service_content');
$pawfect_service_subtitle = get_theme_mod('pawfect_service_area_subtitle', __('Why Choose Us', 'pawfect'));
$pawfect_service_title = get_theme_mod('pawfect_service_area_title', __('Why Choose Pawfect?', 'pawfect'));
$pawfect_service_desc = get_theme_mod('pawfect_service_area_des', __('We create thoughtful, high-quality essentials that keep tails wagging — and hearts full.', 'pawfect'));
$pawfect_service_count = get_theme_mod('pawfect_service_count', array('slider' => 6));
$service_item_count = isset($pawfect_service_count['slider']) ? $pawfect_service_count['slider'] : 6;
$card_style = get_theme_mod('pawfect_service_card_style', 'modern');

// Enhanced styling options
$bg_color = get_theme_mod('pawfect_service_bg_color', '#fef9f5');
$text_color = get_theme_mod('pawfect_service_text_color', '#1f2937');

// Determine grid classes from customizer settings
$column_layout = get_theme_mod('pawfect_service_column_layout', 'col-md-4');
$grid_cols_class = 'lg:pawfect-grid-cols-4'; // Default to 4 columns
if ($column_layout === 'col-md-4') {
    $grid_cols_class = 'lg:pawfect-grid-cols-3'; // 3 columns
} elseif ($column_layout === 'col-md-6') {
    $grid_cols_class = 'lg:pawfect-grid-cols-2'; // 2 columns
}


function pawfect_sanitize_svg( $svg ) {
    // More permissive SVG sanitization for theme customizer
    $allowed_tags = [
        'svg' => [
            'xmlns' => true, 'width' => true, 'height' => true,
            'fill' => true, 'viewbox' => true, 'viewBox' => true, 'class' => true,
            'aria-hidden' => true, 'role' => true, 'focusable' => true,
            'style' => true, 'id' => true, 'data-*' => true, 'version' => true,
            'xmlns:xlink' => true, 'xml:space' => true,
        ],
        'path' => [
            'd' => true, 'fill' => true, 'stroke' => true,
            'stroke-width' => true, 'stroke-linecap' => true,
            'stroke-linejoin' => true, 'class' => true, 'id' => true,
            'opacity' => true, 'transform' => true, 'fill-rule' => true,
            'clip-rule' => true, 'stroke-dasharray' => true, 'stroke-dashoffset' => true,
        ],
        'g' => [
            'fill' => true, 'stroke' => true, 'class' => true, 'id' => true,
            'transform' => true, 'opacity' => true, 'stroke-width' => true,
        ],
        'circle' => [
            'cx' => true, 'cy' => true, 'r' => true, 'fill' => true,
            'stroke' => true, 'stroke-width' => true, 'class' => true,
            'opacity' => true, 'transform' => true,
        ],
        'ellipse' => [
            'cx' => true, 'cy' => true, 'rx' => true, 'ry' => true, 'fill' => true,
            'stroke' => true, 'stroke-width' => true, 'class' => true,
        ],
        'rect' => [
            'x' => true, 'y' => true, 'width' => true, 'height' => true,
            'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true,
            'rx' => true, 'ry' => true, 'opacity' => true, 'transform' => true,
        ],
        'line' => [
            'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true,
            'stroke' => true, 'stroke-width' => true, 'class' => true,
            'opacity' => true, 'transform' => true,
        ],
        'polygon' => [
            'points' => true, 'fill' => true, 'stroke' => true,
            'stroke-width' => true, 'class' => true, 'opacity' => true, 'transform' => true,
        ],
        'polyline' => [
            'points' => true, 'fill' => true, 'stroke' => true,
            'stroke-width' => true, 'class' => true, 'opacity' => true, 'transform' => true,
        ],
        'text' => [
            'x' => true, 'y' => true, 'fill' => true, 'font-family' => true,
            'font-size' => true, 'font-weight' => true, 'text-anchor' => true,
        ],
        'defs' => [],
        'use' => ['href' => true, 'xlink:href' => true],
        'clipPath' => ['id' => true],
        'mask' => ['id' => true],
    ];

    // Clean the SVG string first
    $svg = trim($svg);

    // If it's empty, return empty
    if (empty($svg)) {
        return '';
    }

    return wp_kses( $svg, $allowed_tags );
}



// Check if the service section is enabled and has content
if ($pawfect_service_enabled && !empty($pawfect_service_content)):
    $service_items = json_decode($pawfect_service_content, true);
    // Ensure we have an array to work with
    if (!is_array($service_items)) {
        $service_items = array();
    }
    // Limit the number of items based on the customizer setting
    $service_items = array_slice($service_items, 0, $service_item_count);
    ?>

    <!-- Enhanced Why Choose Section -->
    <section class="pawfect-why-choose pawfect-relative pawfect-py-20 lg:pawfect-py-32 pawfect-overflow-hidden pawfect-section-wrapper">


        <!-- Background Decorations -->
        <div class="pawfect-absolute pawfect-inset-0 pawfect-opacity-5">
            <div class="pawfect-absolute pawfect-w-96 pawfect-h-96 pawfect-bg-pawfect-primary pawfect-rounded-full pawfect-blur-3xl pawfect--top-48 pawfect--left-48 pawfect-animate-pulse"></div>
            <div class="pawfect-absolute pawfect-w-64 pawfect-h-64 pawfect-bg-gray-400 pawfect-rounded-full pawfect-blur-2xl pawfect--bottom-32 pawfect--right-32 pawfect-animate-pulse pawfect-animation-delay-2000"></div>
        </div>

        <!-- Content Container -->
        <div class="pawfect-container pawfect-relative pawfect-z-10">

            <!-- Enhanced Section Heading -->
            <div class="pawfect-why-choose-heading pawfect-text-center pawfect-mb-16 lg:pawfect-mb-20">

                <!-- Section Badge -->
                <?php if ( ! empty( $pawfect_service_subtitle ) && trim( $pawfect_service_subtitle ) !== '' ) : ?>
                <div class="pawfect-inline-flex pawfect-items-center pawfect-gap-2 pawfect-text-primary pawfect-text-sm pawfect-text-gray-500 pawfect-font-medium pawfect-mb-4">
                    <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
                    <span class="pawfect-uppercase pawfect-tracking-wider"><?php echo esc_html( $pawfect_service_subtitle ); ?></span>
                    <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
                </div>
                <?php endif; ?>


                <!-- Main Title -->
                <?php if (!empty($pawfect_service_title)): ?>
                    <h2 class="pawfect-text-3xl md:pawfect-text-4xl lg:pawfect-text-5xl pawfect-font-bold pawfect-leading-tight pawfect-mb-6">
                        <?php echo esc_html($pawfect_service_title); ?>
                    </h2>
                <?php endif; ?>



                <!-- Description -->
                <?php if (!empty($pawfect_service_desc)): ?>
                    <p class="pawfect-text-base pawfect-leading-relaxed pawfect-max-w-3xl pawfect-mx-auto">
                        <?php echo esc_html($pawfect_service_desc); ?>
                    </p>
                <?php endif; ?>
            </div>

            <!-- Enhanced Features Grid -->
            <?php 
            $display_mode = get_theme_mod('pawfect_service_display_mode', 'grid');
            if ($display_mode === 'slider'): 
            ?>
            <div class="swiper pawfect-service-swiper pawfect-relative pawfect-px-4 pawfect-py-8">
                <div class="swiper-wrapper">
            <?php else: ?>
            <div class="pawfect-grid pawfect-grid-cols-1 sm:pawfect-grid-cols-2 <?php echo esc_attr($grid_cols_class); ?> pawfect-gap-6 lg:pawfect-gap-8">
            <?php endif; ?>

    <?php foreach ($service_items as $index => $item):
        $title = !empty($item['title']) ? esc_html($item['title']) : '';
        $text = !empty($item['text']) ? esc_html($item['text']) : '';
        $icon = !empty($item['icon_value']) ? esc_attr($item['icon_value']) : '';
        $image_url = !empty($item['image_url']) ? esc_url($item['image_url']) : '';
        $svg_code = !empty($item['svg_code']) ? $item['svg_code'] : '';
        $choice = !empty($item['choice']) ? esc_attr($item['choice']) : '';
        $button_text = !empty($item['button_text']) ? esc_html($item['button_text']) : '';
        $link = !empty($item['link']) ? esc_url($item['link']) : '#';
        ?>

        <?php if ($display_mode === 'slider'): ?>
        <div class="swiper-slide pawfect-pb-8 pawfect-h-auto">
        <?php endif; ?>

        <!-- Premium Minimal Feature Card -->
        <?php if ($card_style === 'modern'): ?>
        <div class="pawfect-why-choose-item pawfect-feature-card pawfect-group pawfect-relative pawfect-bg-white pawfect-rounded-xl pawfect-p-6 pawfect-border pawfect-border-gray-100 pawfect-transition-all pawfect-duration-300 hover:pawfect-border-gray-200 hover:pawfect-shadow-sm <?php echo ($display_mode === 'slider') ? 'pawfect-h-full' : ''; ?>"
             <?php echo pawfect_get_aos_attrs('fade-up', 600, 400 + ($index * 150)); ?>>
        <?php else: ?>
        <div class="pawfect-why-choose-item pawfect-feature-card pawfect-group pawfect-relative pawfect-bg-white pawfect-rounded-lg pawfect-p-8 pawfect-shadow-lg pawfect-transition-all pawfect-duration-300 hover:pawfect-shadow-xl hover:pawfect-transform hover:pawfect-scale-105 <?php echo ($display_mode === 'slider') ? 'pawfect-h-full' : ''; ?>"
             <?php echo pawfect_get_aos_attrs('fade-up', 600, 400 + ($index * 150)); ?>>
        <?php endif; ?>

            <!-- Subtle Accent Line -->
            <div class="pawfect-absolute pawfect-top-0 pawfect-left-6 pawfect-right-6 pawfect-h-px pawfect-bg-gradient-to-r pawfect-from-transparent pawfect-via-pawfect-primary pawfect-to-transparent pawfect-opacity-0 pawfect-transition-opacity pawfect-duration-300 group-hover:pawfect-opacity-100"></div>

            <!-- Content Container -->
            <div class="pawfect-flex pawfect-items-start pawfect-space-x-4">
                
                <!-- Icon Container -->
                <div class="pawfect-flex-shrink-0">
                    <div class="pawfect-w-12 pawfect-h-12 pawfect-bg-gray-50 pawfect-rounded-lg pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 group-hover:pawfect-bg-pawfect-primary group-hover:pawfect-bg-opacity-10">
                        <?php if ($choice === 'customizer_repeater_image' && !empty($image_url)): ?>
                            <img src="<?php echo esc_url( $image_url ); ?>"
                                 alt="<?php echo esc_attr( $title ); ?>"
                                 class="pawfect-w-6 pawfect-h-6 pawfect-object-contain pawfect-transition-opacity pawfect-duration-300 group-hover:pawfect-opacity-80">
                        <?php elseif ($choice === 'customizer_repeater_icon' && !empty($icon)): ?>
                            <i class="<?php echo esc_attr( $icon ); ?> pawfect-text-lg pawfect-text-gray-600 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary"></i>
                        <?php elseif ($choice === 'customizer_repeater_svg' && !empty($svg_code)): ?>
                            <div class="pawfect-w-6 pawfect-h-6 pawfect-text-gray-600 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary">
                                <?php echo pawfect_sanitize_svg($svg_code); ?>
                            </div>
                        <?php else: ?>
                            <!-- Minimal Default Icon -->
                            <svg class="pawfect-w-6 pawfect-h-6 pawfect-text-gray-600 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Text Content -->
                <div class="pawfect-flex-1 pawfect-min-w-0">
                    <?php if ($title): ?>
                        <h3 class="pawfect-text-lg pawfect-font-semibold pawfect-mb-2 pawfect-transition-colors pawfect-duration-300">
                            <?php echo esc_html( $title ); ?>
                        </h3>
                    <?php endif; ?>

                    <?php if ($text): ?>
                        <p class="pawfect-text-sm pawfect-leading-relaxed pawfect-transition-colors pawfect-duration-300 pawfect-mb-4">
                            <?php echo esc_html( $text ); ?>
                        </p>
                    <?php endif; ?>

                    <?php if ($button_text): ?>
                        <a href="<?php echo esc_url($link); ?>" class="pawfect-inline-flex pawfect-items-center pawfect-text-sm pawfect-font-semibold pawfect-text-pawfect-primary pawfect-transition-all pawfect-duration-300 hover:pawfect-gap-2">
                            <span><?php echo esc_html($button_text); ?></span>
                            <svg class="pawfect-w-4 pawfect-h-4 pawfect-ml-1 pawfect-transition-transform pawfect-duration-300 group-hover:pawfect-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    <?php endif; ?>
                </div>

                <?php if (!$button_text): ?>
                <!-- Minimal Arrow Indicator -->
                <div class="pawfect-flex-shrink-0 pawfect-opacity-0 pawfect-transform pawfect-translate-x-2 pawfect-transition-all pawfect-duration-300 group-hover:pawfect-opacity-100 group-hover:pawfect-translate-x-0">
                    <svg class="pawfect-w-4 pawfect-h-4 pawfect-text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
                <?php endif; ?>
            </div>
        </div>
        
        <?php if ($display_mode === 'slider'): ?>
        </div> <!-- End swiper-slide -->
        <?php endif; ?>

    <?php endforeach; ?>

    <?php if ($display_mode === 'slider'): ?>
        </div> <!-- End swiper-wrapper -->
        <div class="swiper-pagination pawfect-mt-8"></div>
    </div> <!-- End swiper container -->
    <?php else: ?>
    </div> <!-- End grid container -->
    <?php endif; ?>
        </div>
    </section>
<?php endif; ?>

<?php
// Close customizer edit shortcut
if (is_customize_preview()) {
    echo '</div>';
}
?>


