<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
// Section toggle
$enabled = (bool) get_theme_mod('pawfect_testimonial_enabled', true);
if (! $enabled) { return; }

$testimonials_raw = get_theme_mod('pawfect_testimonial_content');
$title = get_theme_mod('pawfect_testimonial_area_title', __( 'Happy Customers', 'pawfect' ));
$desc = get_theme_mod('pawfect_testimonial_area_desc', __( 'Real reviews from the Pawfect family.', 'pawfect' ));
$bg = get_theme_mod('pawfect_testimonial_background');
$bg_color = get_theme_mod('pawfect_testimonial_background_color', '#f9fafb');
$container_size = get_theme_mod('pawfect_testimonial_container_size', 'container');
$container_class = $container_size === 'container' ? 'pawfect-container' : 'pawfect-container-full';

// Enhanced customization options
$card_style = get_theme_mod('pawfect_testimonial_card_style', 'classic');
$show_ratings = get_theme_mod('pawfect_testimonial_show_ratings', true);
$show_products = get_theme_mod('pawfect_testimonial_show_products', true);
$text_color = get_theme_mod('pawfect_testimonial_text_color', '#1f2937');
$accent_color = get_theme_mod('pawfect_testimonial_accent_color', '#f59e0b');
$heading_color = get_theme_mod('pawfect_testimonial_heading_color', '#1f2937');
$description_color = get_theme_mod('pawfect_testimonial_description_color', '#6b7280');
$slide_gap = get_theme_mod('pawfect_testimonial_slide_gap', 30);
$autoplay = get_theme_mod('pawfect_testimonial_autoplay', 1);
$autoplay_delay = get_theme_mod('pawfect_testimonial_animation_speed', 4000);

$testimonials = [];
if (!empty($testimonials_raw)) {
    $decoded = json_decode($testimonials_raw);
    if (is_array($decoded)) {
        $testimonials = $decoded;
    }
}

if (empty($testimonials))
    return;
// Localize Swiper settings with enhanced options
wp_localize_script('pawfect-main', 'pawfectTestimonialOptions', [
    'autoplay'      => $autoplay ? ['delay' => (int) $autoplay_delay, 'disableOnInteraction' => false] : false,
    'speed' => 1000,
    'effect' => get_theme_mod('pawfect_testimonial_animation', false) ? 'fade' : 'slide',
    'slidesPerView' => 1,
    'spaceBetween' => $slide_gap,
    'breakpoints' => [
        640 => [
            'slidesPerView' => 2, // Default to 2 columns for small devices
            'spaceBetween' => $slide_gap
        ],
        768 => [
            'slidesPerView' => get_theme_mod('pawfect_testimonial_column_layout', 2),
            'spaceBetween' => $slide_gap
        ],
        1024 => [
            'slidesPerView' => get_theme_mod('pawfect_testimonial_column_layout', 2),
            'spaceBetween' => $slide_gap
        ]
    ]
]);



?>

<!-- Clean Testimonials Section - Matching Original Template -->
<section class="pawfect-testimonial-section pawfect-bg-pawfect-background pawfect-py-8 lg:pawfect-py-12 pawfect-section-wrapper pawfect-overflow-hidden" <?php if ($bg): ?>
        style="background-image:url('<?php echo esc_url($bg); ?>'); background-size: cover;" <?php endif; ?>>

  

    <div class="<?php echo esc_attr($container_class); ?>">

        <!-- Header with Left Text and Right Navigation -->
        <div class="pawfect-testimonial-heading pawfect-flex pawfect-justify-between pawfect-items-end pawfect-mb-8">
            <!-- Left Side - Text Content -->
            <div class="pawfect-text-left">
                <h2 class="pawfect-testimonial-heading-title pawfect-text-4xl md:pawfect-text-5xl pawfect-font-bold pawfect-text-[#1f2937] pawfect-mb-2">
                    <?php echo esc_html($title); ?>
                </h2>
                <?php if ($desc): ?>
                    <p class="pawfect-testimonial-heading-desc pawfect-text-pawfect-text">
                        <?php echo esc_html($desc); ?>
                    </p>
                <?php endif; ?>
            </div>

            <!-- Right Side - Navigation Controls -->
            <div class="pawfect-flex pawfect-items-center pawfect-gap-4">
                
                <div class="pawfect-testimonial-pagination pawfect-text-sm pawfect-text-pawfect-text swiper-pagination-fraction">
                </div>
                <div class="pawfect-flex pawfect-gap-2">
                    <button class="pawfect-testimonial-prev pawfect-p-2 pawfect-rounded-full pawfect-bg-white pawfect-shadow hover:pawfect-bg-gray-100 pawfect-transition">
                        <svg class="pawfect-w-5 pawfect-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <button class="pawfect-testimonial-next pawfect-p-2 pawfect-rounded-full pawfect-bg-white pawfect-shadow hover:pawfect-bg-gray-100 pawfect-transition">
                        <svg class="pawfect-w-5 pawfect-h-5" 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" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

       <div class="swiper pawfect-happy-customers-swiper pawfect-px-4 pawfect-py-4"
    <?php echo pawfect_get_aos_attrs('fade-up', 800, 300); ?>>
    <div class="swiper-wrapper">
        <?php foreach ($testimonials as $item):
            $name = $item->title ?? '';
            $role = $item->subtitle ?? '';
            $text = $item->text ?? '';
            $img = $item->image_url ?? '';
            ?>
            <div class="swiper-slide">
                <?php if ($card_style === 'modern'): ?>
                    <div class="pawfect-feature-card pawfect-group pawfect-relative pawfect-bg-white pawfect-rounded-xl pawfect-p-8 pawfect-border pawfect-border-gray-100 pawfect-transition-all pawfect-duration-300 hover:pawfect-border-gray-200 hover:pawfect-shadow-sm pawfect-h-full pawfect-flex pawfect-flex-col pawfect-justify-between">

                        <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>
                            <?php if ($img): ?>
                                <div class="pawfect-flex pawfect-justify-center pawfect-mb-6">
                                    <div class="pawfect-w-20 pawfect-h-20 pawfect-rounded-full pawfect-overflow-hidden pawfect-border-4 pawfect-border-white pawfect-shadow-lg pawfect-transition-transform pawfect-duration-300 group-hover:pawfect-scale-110">
                                        <img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr($name); ?>"
                                                class="pawfect-w-full pawfect-h-full pawfect-object-cover">
                                    </div>
                                </div>
                            <?php endif; ?>

                            <div class="pawfect-flex-grow pawfect-text-center">
                                <h4 class="pawfect-testimonial-author pawfect-text-xl pawfect-font-bold pawfect-text-[#1f2937] pawfect-mb-2 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary">
                                    <?php echo esc_html($name); ?>
                                </h4>
                                <?php if ($role): ?>
                                    <div class="pawfect-text-sm pawfect-text-gray-500 pawfect-mb-4">
                                        <?php echo esc_html($role); ?>
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_ratings): ?>
                                    <div class="pawfect-flex pawfect-justify-center pawfect-items-center pawfect-mb-4">
                                        <span class="pawfect-testimonial-rating pawfect-text-pawfect-primary">★★★★★</span>
                                    </div>
                                <?php endif; ?>

                                <p class="pawfect-testimonial-content pawfect-text-gray-600 pawfect-leading-relaxed pawfect-text-sm">
                                    <?php echo esc_html($text); ?>
                                </p>
                            </div>

                            <?php if ($show_products): ?>
                                <?php
                                $product_id = $item->product_select ?? null;
                                if ($product_id && function_exists('wc_get_product') && $product = wc_get_product($product_id)):
                                    $product_link = get_permalink($product_id);
                                    $product_image = $product->get_image('woocommerce_thumbnail', ['class' => 'pawfect-w-10 pawfect-h-10 pawfect-rounded-md pawfect-object-cover']);
                                    $product_name = $product->get_name();
                                    ?>
                                    <div class="pawfect-border-t pawfect-border-gray-200 pawfect-mt-6 pawfect-pt-4">
                                        <a href="<?php echo esc_url($product_link); ?>"
                                            class="pawfect-flex pawfect-items-center pawfect-gap-3 pawfect-group pawfect-justify-center">
                                            <?php echo wp_kses_post( $product_image ); ?>
                                            <div>
                                                <p class="pawfect-testimonial-author pawfect-text-sm pawfect-font-semibold pawfect-text-pawfect-dark group-hover:pawfect-text-pawfect-primary pawfect-transition">
                                                    <?php echo esc_html($product_name); ?>
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>
                    </div>
                <?php else: ?>
                    <div class="pawfect-feature-card pawfect-group pawfect-relative pawfect-bg-white pawfect-rounded-xl pawfect-p-8 pawfect-border pawfect-border-gray-100 pawfect-transition-all pawfect-duration-300 hover:pawfect-border-gray-200 hover:pawfect-shadow-sm pawfect-h-full pawfect-flex pawfect-flex-col pawfect-justify-between">

                        <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>
                        <div class="pawfect-flex pawfect-gap-6 pawfect-flex-grow">
                            <div class="pawfect-flex-1">
                                <h4 class="pawfect-testimonial-author pawfect-font-bold pawfect-text-pawfect-dark pawfect-mb-2">
                                    <?php echo esc_html($name); ?>
                                </h4>
                                <?php if ($role): ?>
                                    <div class="pawfect-text-xs pawfect-text-gray-400 pawfect-mb-3">
                                        <?php echo esc_html($role); ?>
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_ratings): ?>
                                    <div class="pawfect-flex pawfect-items-center pawfect-mb-3">
                                        <span class="pawfect-testimonial-rating pawfect-text-pawfect-primary">★★★★★</span>
                                    </div>
                                <?php endif; ?>

                                <p class="pawfect-testimonial-content pawfect-text-pawfect-text pawfect-leading-relaxed">
                                    <?php echo esc_html($text); ?>
                                </p>
                            </div>

                            <?php if ($img): ?>
                                <div class="pawfect-w-16 pawfect-h-16 pawfect-rounded-lg pawfect-overflow-hidden pawfect-shrink-0">
                                    <img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr($name); ?>"
                                            class="pawfect-w-full pawfect-h-full pawfect-object-cover">
                                </div>
                            <?php endif; ?>
                        </div>

                        <?php if ($show_products): ?>
                            <?php
                            $product_id = $item->product_select ?? null;
                            if ($product_id && $product = wc_get_product($product_id)):
                                $product_link = get_permalink($product_id);
                                $product_image = $product->get_image('woocommerce_thumbnail', ['class' => 'pawfect-w-10 pawfect-h-10 pawfect-rounded-md pawfect-object-cover']);
                                $product_name = $product->get_name();
                                ?>
                                <div class="pawfect-border-t pawfect-border-gray-200 pawfect-mt-6 pawfect-pt-4">
                                    <a href="<?php echo esc_url($product_link); ?>"
                                        class="pawfect-flex pawfect-items-center pawfect-gap-3 pawfect-group">
                                        <?php echo wp_kses_post( $product_image ); ?>
                                        <div>
                                            <p class="pawfect-testimonial-author pawfect-text-sm pawfect-font-semibold pawfect-text-pawfect-dark group-hover:pawfect-text-pawfect-primary pawfect-transition">
                                                <?php echo esc_html($product_name); ?>
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    </div>
</div>

    </div>
</section>