<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
if (!class_exists('WooCommerce'))
	return;

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

$title = get_theme_mod('pawfect_woocommerce_title', __('Featured Products', 'pawfect'));
$desc = get_theme_mod('pawfect_woocommerce_area_des', '');
$container = get_theme_mod('pawfect_woocommerce_container_size', 'container');
$autoplay = get_theme_mod('pawfect_woocommerce_autoplay', 1);
$columns = get_theme_mod('pawfect_woocommerce_column_layout', 3);
$container_size = get_theme_mod('pawfect_woocommerce_container_size', 'container');
$container_class = $container_size === 'container' ? 'pawfect-container' : 'pawfect-container-full';
$card_style = get_theme_mod('pawfect_woocommerce_card_style', 'classic');


$autoplay_delay   = '5000';


wp_localize_script('pawfect-main', 'pawfectWooOptions', [
    'autoplay'      => $autoplay ? ['delay' => (int) $autoplay_delay, 'disableOnInteraction' => false] : false,
    'slidesPerView' => (int) $columns,
]);





// Query WooCommerce products (exclude hidden)
$args = array(
	'post_type' => 'product',
	'posts_per_page' => 8,
	'tax_query' => array(
		array(
			'taxonomy' => 'product_visibility',
			'field' => 'name',
			'terms' => array('exclude-from-catalog'),
			'operator' => 'NOT IN',
		),
	),
);

$products = new WP_Query($args);
?>

<?php if ($products->have_posts()): ?>
	<!-- Premium Minimal WooCommerce Section -->
	<section
		class="<?php echo esc_attr($container_class); ?>  pawfect-woocommerce-featured pawfect-relative pawfect-py-16 lg:pawfect-py-20">

		

		<div class="<?php echo esc_attr($container); ?> pawfect-relative">
			<?php if ($title || $desc): ?>
				<div class="pawfect-text-left pawfect-mb-12 lg:pawfect-mb-16">

					<!-- Minimal Section Badge -->
					<?php if ($title): ?>

						<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__( 'Featured Products', 'pawfect' ); ?></span>
							<div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
						</div>

					<?php endif; ?>

					<?php if ($title): ?>
						<h2
							class="pawfect-text-3xl md:pawfect-text-4xl lg:pawfect-text-5xl pawfect-font-bold pawfect-text-gray-900 pawfect-mb-4">
							<?php echo esc_html($title); ?>
						</h2>
					<?php endif; ?>

					<?php if ($desc): ?>
						<p
							class="pawfect-text-base pawfect-text-white pawfect-max-w-2xl pawfect-leading-relaxed">
							<?php echo esc_html($desc); ?>
						</p>
					<?php endif; ?>
				</div>
			<?php endif; ?>

			<!-- Product Carousel -->
			<div class="swiper pawfect-product-swiper pawfect-relative pawfect-px-4 pawfect-py-8"
				data-autoplay="<?php echo esc_attr( $autoplay ? 'true' : 'false' ); ?>">
				<div class="swiper-wrapper">
					<?php while ($products->have_posts()):
						$products->the_post();
						global $product; ?>

						<!-- Product Card -->
						<div class="swiper-slide pawfect-pb-8 pawfect-h-auto">
							<?php if ($card_style === 'modern'): ?>
								<!-- Modern Product Card (Shop by Category Style) -->
								<div class="pawfect-category-card pawfect-group pawfect-relative pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-sm pawfect-border pawfect-border-gray-100 pawfect-overflow-hidden pawfect-transition-all pawfect-duration-500 hover:pawfect-shadow-lg hover:pawfect-scale-[1.02] pawfect-flex pawfect-flex-col pawfect-h-full">

									<!-- Subtle Background Glow Effect -->
									<div class="pawfect-absolute pawfect-inset-0 pawfect-bg-pawfect-primary pawfect-opacity-0 pawfect-rounded-2xl pawfect-blur-xl pawfect-transition-opacity pawfect-duration-500 group-hover:pawfect-opacity-2 pawfect--z-10"></div>

									<a href="<?php the_permalink(); ?>" class="pawfect-relative pawfect-z-10 pawfect-flex pawfect-flex-col pawfect-flex-grow">
										<!-- Product Image -->
										<div class="pawfect-relative pawfect-h-64 pawfect-bg-gray-100 pawfect-overflow-hidden pawfect-shrink-0">
											<?php echo wp_kses_post( $product->get_image('woocommerce_thumbnail', [
												'class' => 'pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-110'
											]) ); ?>

											<!-- Consistent Sale Badge -->
											<?php if ($product->is_on_sale()): ?>
												<span class="pawfect-absolute pawfect-top-4 pawfect-left-4 pawfect-bg-red-500 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-px-3 pawfect-py-1 pawfect-rounded-full pawfect-shadow-lg pawfect-z-20">
													<?php echo esc_html__( 'SALE', 'pawfect' ); ?>
												</span>
											<?php endif; ?>

											<!-- Gradient Overlay -->
											<div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-t pawfect-from-black pawfect-from-opacity-60 pawfect-via-transparent pawfect-to-transparent"></div>

											<!-- Hover Overlay -->
											<div class="pawfect-absolute pawfect-inset-0  pawfect-bg-opacity-0 pawfect-transition-all pawfect-duration-300 group-hover:pawfect-bg-opacity-20"></div>

											<!-- Add to Cart Button -->
											<div class="pawfect-absolute pawfect-inset-0 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-opacity-0 pawfect-transform pawfect-scale-75 pawfect-transition-all pawfect-duration-300 group-hover:pawfect-opacity-100 group-hover:pawfect-scale-100 pawfect-z-20">
												<?php
												// Check if product is in cart
												$in_cart = false;
												if (function_exists('WC') && WC()->cart && !WC()->cart->is_empty()) {
													foreach (WC()->cart->get_cart() as $cart_item) {
														if ($cart_item['product_id'] == $product->get_id()) {
															$in_cart = true;
															break;
														}
													}
												}
												?>
												<button type="button"
												   class="pawfect-btn pawfect-add-to-cart-btn pawfect-ajax-add-to-cart"
												   data-product-id="<?php echo esc_attr( $product->get_id() ); ?>"
												   data-product-sku="<?php echo esc_attr($product->get_sku()); ?>"
												   data-quantity="1">
													<span class="pawfect-btn-text"><?php echo esc_html( $in_cart ? __('Added to Cart', 'pawfect') : __('Add to Cart', 'pawfect') ); ?></span>
													<svg class="pawfect-w-4 pawfect-h-4 pawfect-inline-block pawfect-ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
														<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m0 0h8"></path>
													</svg>
												</button>
											</div>
										</div>

										<!-- Product Content -->
										<div class="pawfect-p-6 pawfect-flex pawfect-flex-col pawfect-flex-grow">
											<h3 class="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 the_title(); ?>
											</h3>
											<div class="pawfect-text-pawfect-primary pawfect-font-bold pawfect-text-lg pawfect-mb-4">
												<?php echo wp_kses_post( $product->get_price_html() ); ?>
											</div>

											<!-- Arrow Icon -->
											<div class="pawfect-flex pawfect-items-center pawfect-mt-auto pawfect-text-pawfect-primary pawfect-font-medium pawfect-text-sm">
												<span class="pawfect-transition-all pawfect-duration-300 group-hover:pawfect-mr-2"><?php esc_html_e( 'View Product', 'pawfect' ); ?></span>
												<svg class="pawfect-w-4 pawfect-h-4 pawfect-ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
												</svg>
											</div>
										</div>
									</a>
								</div>
							<?php else: ?>
								<!-- Classic Product Card (Horizontal Layout Style) -->
								<div class="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 pawfect-h-full">

									<!-- 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">

										<!-- Product Image Container -->
										<div class="pawfect-flex-shrink-0">
											<div class="pawfect-w-16 pawfect-h-16 pawfect-bg-gray-50 pawfect-rounded-lg pawfect-overflow-hidden pawfect-transition-all pawfect-duration-300 group-hover:pawfect-bg-pawfect-primary group-hover:pawfect-bg-opacity-10">
												<a href="<?php the_permalink(); ?>" class="pawfect-block pawfect-w-full pawfect-h-full">
													<?php echo wp_kses_post( $product->get_image('woocommerce_thumbnail', [
														'class' => 'pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-transform pawfect-duration-300 group-hover:pawfect-scale-110'
													]) ); ?>
												</a>
											</div>
										</div>

										<!-- Text Content -->
										<div class="pawfect-flex-1 pawfect-min-w-0">
											<!-- Product Title -->
											<h3 class="pawfect-text-lg pawfect-font-semibold pawfect-mb-2 pawfect-transition-colors pawfect-duration-300" style="color: #1f2937;">
												<a href="<?php the_permalink(); ?>" class="hover:pawfect-text-pawfect-primary pawfect-transition-colors pawfect-duration-300">
													<?php the_title(); ?>
												</a>
											</h3>

											<!-- Product Price -->
											<div class="pawfect-text-xl pawfect-font-bold pawfect-text-pawfect-primary pawfect-mb-2">
												<?php echo wp_kses_post( $product->get_price_html() ); ?>
											</div>

											<!-- Product Short Description -->
											<?php if ($product->get_short_description()): ?>
												<p class="pawfect-text-sm pawfect-leading-relaxed pawfect-transition-colors pawfect-duration-300 pawfect-line-clamp-2" style="color: #1f2937; opacity: 0.7;">
													<?php echo esc_html( wp_strip_all_tags($product->get_short_description()) ); ?>
												</p>
											<?php endif; ?>
										</div>

										<!-- 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>
									</div>

									<!-- Sale Badge (if on sale) -->
									<?php if ($product->is_on_sale()): ?>
										<span class="pawfect-absolute pawfect-top-4 pawfect-right-4 pawfect-bg-red-500 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-px-2 pawfect-py-1 pawfect-rounded-full pawfect-shadow-lg pawfect-z-20">
											<?php echo esc_html__( 'SALE', 'pawfect' ); ?>
										</span>
									<?php endif; ?>
								</div>
							<?php endif; ?>
						</div>
					<?php endwhile;
					wp_reset_postdata(); ?>
				</div>

				<!-- Minimal Navigation -->
				<div
					class="swiper-button-prev pawfect-w-10 pawfect-h-10 pawfect-bg-white pawfect-rounded-full pawfect-shadow-sm pawfect-border pawfect-border-gray-200 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-200 hover:pawfect-bg-gray-50 hover:pawfect-border-gray-300 pawfect-left-4">
					<svg class="pawfect-w-5 pawfect-h-5 pawfect-text-gray-600" 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"></path>
					</svg>
				</div>

				<div
					class="swiper-button-next pawfect-w-10 pawfect-h-10 pawfect-bg-white pawfect-rounded-full pawfect-shadow-sm pawfect-border pawfect-border-gray-200 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-200 hover:pawfect-bg-gray-50 hover:pawfect-border-gray-300 pawfect-right-4">
					<svg class="pawfect-w-5 pawfect-h-5 pawfect-text-gray-600" 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>

				<!-- Clean Pagination Dots -->
				<div class="swiper-pagination pawfect-mt-8"></div>
			</div>
		</div>
	</section>
<?php endif; ?>