<?php

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

$title = get_theme_mod('pawfect_pet_shop_title', __( 'Shop By Pets', 'pawfect' ));
$desc = get_theme_mod('pawfect_pet_shop_desc', __( 'We create thoughtful, high-quality essentials that keep tails wagging — and hearts full.', 'pawfect' ));
$container_size = get_theme_mod('pawfect_pet_shop_container_size', 'pawfect-container');
$columns = get_theme_mod('pawfect_pet_shop_column_layout', 3);

// Generate proper grid classes based on column count
$column_classes = '';
switch (intval($columns)) {
    case 1:
        $column_classes = 'lg:pawfect-grid-cols-1';
        break;
    case 2:
        $column_classes = 'lg:pawfect-grid-cols-2';
        break;
    case 3:
        $column_classes = 'lg:pawfect-grid-cols-3';
        break;
    case 4:
        $column_classes = 'lg:pawfect-grid-cols-4';
        break;
    case 5:
        $column_classes = 'lg:pawfect-grid-cols-5';
        break;
    default:
        $column_classes = 'lg:pawfect-grid-cols-3';
}

// Get repeater data
$raw_items = get_theme_mod('pawfect_pet_shop_items');
$items = [];

if (!empty($raw_items)) {
    $decoded = json_decode($raw_items);
    if (is_array($decoded)) {
        $items = $decoded;
    }
}

// If no items from customizer, section will not display
if (empty($items)) {
    return;
}
?>

<!-- Premium Minimal Shop By Pets Section -->
<section class="pawfect-shop-by-pets pawfect-relative pawfect-py-12 lg:pawfect-py-16 pawfect-bg-white pawfect-section-wrapper">



    <div class="<?php echo esc_attr($container_size); ?> pawfect-relative">
        <!-- Standardized Header -->
        <div class="pawfect-shop-by-pet-heading pawfect-text-center pawfect-mb-12 lg:pawfect-mb-16">
            <!-- Minimal Section Badge -->
            <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__( 'Pet Categories', 'pawfect' ); ?></span>
                <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
            </div>

            <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 if ($desc): ?>
                <p class="pawfect-text-base pawfect-text-gray-600 pawfect-max-w-2xl pawfect-mx-auto pawfect-leading-relaxed">
                    <?php echo esc_html($desc); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- Responsive Pet Category Grid -->
        <div class="pawfect-grid pawfect-grid-cols-1 sm:pawfect-grid-cols-2 <?php echo esc_attr($column_classes); ?> pawfect-gap-8 lg:pawfect-gap-10">
            <?php foreach ($items as $index => $item): ?>
                <?php
                    $link = $item->link ?? '#';
                    $img = $item->image_url ?? '';
                    $label = $item->title ?? '';
                    $desc = $item->text ?? '';
                    $open_new_tab = !empty($item->open_new_tab) && $item->open_new_tab === 'yes' ? '_blank' : '_self';
                ?>
                <!-- Enhanced Pet Category Card -->
                <div class="pawfect-pet-category pawfect-group pawfect-text-center"
                     <?php echo pawfect_get_aos_attrs('zoom-in-up', 600, 400 + ($index * 100)); ?>>
                    <a href="<?php echo esc_url($link); ?>" target="<?php echo esc_attr($open_new_tab); ?>" <?php echo esc_attr( $open_new_tab === '_blank' ? 'rel="noopener noreferrer"' : '' ); ?> class="pawfect-block pawfect-transition-all pawfect-duration-300">

                        <!-- Enhanced Pet Image Container -->
                        <div class="pawfect-relative pawfect-w-32 pawfect-h-32 lg:pawfect-w-40 lg:pawfect-h-40 pawfect-mx-auto pawfect-mb-6">

                            <!-- Modern Image Circle -->
                            <div class="pawfect-relative pawfect-w-full pawfect-h-full pawfect-rounded-full pawfect-overflow-hidden pawfect-bg-gradient-to-br pawfect-from-gray-50 pawfect-to-gray-100   pawfect-transition-all pawfect-duration-500  group-hover:pawfect-transform group-hover:pawfect-scale-110">
                                <img src="<?php echo esc_url($img); ?>"
                                     alt="<?php echo esc_attr($label); ?>"
                                     class="pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-transform pawfect-duration-700 group-hover:pawfect-scale-110">

                                <!-- Overlay Effect -->
                                <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-pawfect-primary pawfect-opacity-0 pawfect-transition-opacity pawfect-duration-300 group-hover:pawfect-opacity-10"></div>
                            </div>
                        </div>

                        <!-- Enhanced Text Content -->
                        <div class="pawfect-space-y-3">
                            <h3 class="pawfect-text-xl lg:pawfect-text-2xl pawfect-font-bold pawfect-text-gray-900 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary">
                                <?php echo esc_html($label); ?>
                            </h3>

                            <?php if ($desc): ?>
                                <p class="pawfect-text-sm pawfect-text-gray-600 pawfect-max-w-xs pawfect-mx-auto pawfect-leading-relaxed">
                                    <?php echo esc_html($desc); ?>
                                </p>
                            <?php endif; ?>
                        </div>

                        <!-- Enhanced Action Text -->
                        <div class="pawfect-flex pawfect-items-center pawfect-justify-center pawfect-mt-6 pawfect-text-pawfect-primary pawfect-font-medium pawfect-text-sm">
                            <span class="pawfect-transition-all pawfect-duration-300 group-hover:pawfect-mr-2"><?php echo esc_html__( 'Shop Now', '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>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
