<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Template Part: Enhanced Category Highlights Section
 */

// Section toggle
if (! (bool) get_theme_mod('pawfect_portfolio_enabled', true)) { return; }

// Enhanced settings
$container_class = get_theme_mod('pawfect_portfolio_container_size', 'pawfect-container');
$subtitle = get_theme_mod('pawfect_project_area_title', __( 'Shop by Category', 'pawfect' ));
$heading = get_theme_mod('pawfect_portfolio_heading', __( 'Tailor Your Pet Experience', 'pawfect' ));
$description = get_theme_mod('pawfect_portfolio_description', __( 'Discover our curated collections designed specifically for your furry friends', 'pawfect' ));
$bg_color = get_theme_mod('pawfect_portfolio_bg_color', '#ffffff');
$column_layout = get_theme_mod('pawfect_portfolio_homepage1_column_layout', 4);
$button_text = get_theme_mod('pawfect_portfolio_button_text', __( 'Book Now', 'pawfect' ));




// Responsive column classes
switch ((int) $column_layout) {
    case 1:
        $column_classes = 'lg:pawfect-grid-cols-1';
        break;
    case 2:
        $column_classes = 'md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2';
        break;
    case 3:
        $column_classes = 'md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-3';
        break;
    case 4:
        $column_classes = 'md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-4';
        break;
    case 5:
        $column_classes = 'md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-5';
        break;
    default:
        $column_classes = 'md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-4';
        break;
}

// Item count limit (Free version: max 4)
$limit = 4;

// Repeater data
$raw = get_theme_mod('pawfect_portfolio_content');
$categories = [];


if (!empty($raw)) {
    $decoded = json_decode($raw);
    if (is_array($decoded)) {
        $categories = array_slice($decoded, 0, $limit);
    }
}
?>

<?php if (!empty($categories)): ?>
    <section class="pawfect-portfolio-section pawfect-py-28">

       

        <div class="<?php echo esc_attr($container_class); ?> pawfect-text-center">
            <div class="pawfect-category-highlights-heading pawfect-text-center pawfect-mb-12 lg:pawfect-mb-16">
                <?php if ( ! empty( $subtitle ) && trim( $subtitle ) !== '' ) : ?>
                <!-- 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( $subtitle ); ?></span>
                    <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
                </div>
                <?php endif; ?>

                <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($heading); ?>
                </h2>

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

            <div
                class="pawfect-grid pawfect-grid-cols-1 <?php echo esc_attr($column_classes); ?> pawfect-gap-6 pawfect-mx-auto">
            <?php 
                // Default images for fallback
                $default_images = array(
                    PAWFECT_THEME_URL . '/assets/images/category/dog-food.webp',
                    PAWFECT_THEME_URL . '/assets/images/category/dog-toy.webp',
                    PAWFECT_THEME_URL . '/assets/images/category/dog-collar.webp',
                    PAWFECT_THEME_URL . '/assets/images/category/dog-bad.webp',
                );
                
                foreach ($categories as $index => $item):
                    $title = $item->title ?? '';
                    $image = $item->image_url ?? '';
                    
                    // Check if image URL is valid (must end with image extension)
                    $valid_extensions = array('.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg');
                    $has_valid_extension = false;
                    if (!empty($image)) {
                        $image_lower = strtolower($image);
                        foreach ($valid_extensions as $ext) {
                            if (substr($image_lower, -strlen($ext)) === $ext) {
                                $has_valid_extension = true;
                                break;
                            }
                        }
                    }
                    
                    // Use default image if URL is empty or doesn't have valid image extension
                    if (empty($image) || !$has_valid_extension) {
                        if (isset($default_images[$index])) {
                            $image = $default_images[$index];
                        }
                    }
                    
                    $link = $item->link ?? '#';
                    $desc = $item->text ?? '';
                    $item_btn_text = !empty($item->button_text) ? $item->button_text : $button_text;
                    ?>
                    <!-- Enhanced Category Card -->
                    <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] "
                         style="animation-delay: <?php echo absint( $index * 150 ); ?>ms;">

                        <!-- 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 echo esc_url($link); ?>" class=" pawfect-relative pawfect-z-10">
                            <!-- Category Image -->
                            <div class="pawfect-relative pawfect-h-64 pawfect-bg-gray-100 pawfect-overflow-hidden">
                                <?php if ($image): ?>
                                    <img src="<?php echo esc_url($image); ?>"
                                         alt="<?php echo esc_attr($title); ?>"
                                         class="pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-110">
                                <?php else: ?>
                                    <!-- Fallback placeholder -->
                                    <div class="pawfect-w-full pawfect-h-full pawfect-bg-gray-200 pawfect-flex pawfect-items-center pawfect-justify-center">
                                        <svg class="pawfect-w-16 pawfect-h-16 pawfect-text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                <?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>

                                <!-- Shop Now 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">
                                    <div class="pawfect-btn">
                                        <span><?php echo esc_html($item_btn_text); ?></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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- Category Content -->
                            <div class="pawfect-p-6 pawfect-text-left">
                                <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 pawfect-text-left">
                                    <?php echo esc_html($title); ?>
                                </h3>
                                <?php if ($desc): ?>
                                    <p class="pawfect-text-gray-600 pawfect-text-sm pawfect-leading-relaxed pawfect-text-left">
                                        <?php echo esc_html($desc); ?>
                                    </p>
                                <?php endif; ?>

                                <!-- Arrow Icon -->
                                <div class="pawfect-flex pawfect-items-center pawfect-justify-start pawfect-mt-4 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( $item_btn_text ); ?></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 endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>