<?php

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

// Section toggle
$enabled = (bool) get_theme_mod('pawfect_featured_collection_enabled', true);
if (! $enabled) { return; }

$title = get_theme_mod('pawfect_featured_collection_title', __( 'Featured Collection', 'pawfect' ));
$subtitle = get_theme_mod('pawfect_featured_collection_subtitle', __( 'Featured Collection', 'pawfect' ));
$desc = get_theme_mod('pawfect_featured_collection_desc', __( 'Discover our handpicked selection of premium pet products.', 'pawfect' ));
$container_class = get_theme_mod('pawfect_featured_collection_container_size', 'pawfect-container');
$bg_color = get_theme_mod('pawfect_featured_collection_bg_color', '#ffffff');

// Collection items (assuming repeater data)
$collection_raw = get_theme_mod('pawfect_featured_collection_items');
$collection_items = [];

if (!empty($collection_raw)) {
    $decoded = json_decode($collection_raw);
    if (is_array($decoded)) {
        $collection_items = $decoded;
    }
}

// If no items, don't show the section
if (empty($collection_items)) {
    return;
}
?>

<!-- Enhanced Featured Collection Section -->
<section class="pawfect-featured-collection pawfect-relative pawfect-py-20 lg:pawfect-py-28 pawfect-overflow-hidden">

   

    <!-- 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--right-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--left-32 pawfect-animate-pulse pawfect-animation-delay-2000"></div>
    </div>

    <div class="<?php echo esc_attr($container_class); ?> pawfect-relative pawfect-z-10">
        <?php if ($title || $desc): ?>
            <div class="pawfect-text-center pawfect-mb-12 lg:pawfect-mb-16">
                <!-- Minimal Section Badge -->
                <?php if ( ! empty( $subtitle ) && trim( $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( $subtitle ); ?></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; ?>

                <!-- Decorative Divider -->
                <div class="pawfect-flex pawfect-justify-center pawfect-mb-6">
                    <div class="pawfect-w-16 pawfect-h-1 pawfect-bg-pawfect-primary pawfect-rounded-full"></div>
                </div>

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

        <!-- Enhanced Collection Grid -->
        <div class="pawfect-grid pawfect-grid-cols-1 md:pawfect-grid-cols-2 lg:pawfect-grid-cols-3 pawfect-gap-8 lg:pawfect-gap-10">
            <?php foreach ($collection_items as $index => $item): ?>
                <?php if (!empty($item->title)): ?>
                    <!-- Enhanced Collection Card -->
                    <div class="pawfect-collection-card pawfect-group pawfect-relative pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-lg pawfect-border pawfect-border-gray-100 pawfect-overflow-hidden pawfect-transition-all pawfect-duration-500 hover:pawfect-shadow-2xl hover:pawfect-scale-105 hover:pawfect-border-pawfect-primary hover:pawfect-border-opacity-20"
                         style="animation-delay: <?php echo absint( $index * 150 ); ?>ms;">

                        <!-- 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-5 pawfect--z-10"></div>

                        <?php if (!empty($item->image)): ?>
                            <div class="pawfect-relative pawfect-aspect-[4/3] pawfect-overflow-hidden">
                                <img src="<?php echo esc_url($item->image); ?>"
                                     alt="<?php echo esc_attr($item->title); ?>"
                                     class="pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-110 group-hover:pawfect-brightness-110">

                                <!-- Image Overlay -->
                                <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-t pawfect-from-black pawfect-from-opacity-20 pawfect-to-transparent pawfect-opacity-0 pawfect-transition-opacity pawfect-duration-300 group-hover:pawfect-opacity-100"></div>

                                <!-- Hover Icon -->
                                <div class="pawfect-absolute pawfect-top-4 pawfect-right-4 pawfect-w-10 pawfect-h-10 pawfect-bg-white pawfect-bg-opacity-90 pawfect-backdrop-blur-sm pawfect-rounded-full 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">
                                    <svg class="pawfect-w-5 pawfect-h-5 pawfect-text-pawfect-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                </div>
                            </div>
                        <?php endif; ?>

                        <!-- Enhanced Content -->
                        <div class="pawfect-relative pawfect-z-10 pawfect-p-6 lg:pawfect-p-8">
                            <h3 class="pawfect-text-xl lg:pawfect-text-2xl pawfect-font-bold pawfect-text-[#1f2937] pawfect-mb-3 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary">
                                <?php echo esc_html($item->title); ?>
                            </h3>

                            <?php if (!empty($item->description)): ?>
                                <p class="pawfect-text-gray-600 pawfect-leading-relaxed pawfect-mb-6">
                                    <?php echo esc_html($item->description); ?>
                                </p>
                            <?php endif; ?>

                            <?php if (!empty($item->link)): ?>
                                <a href="<?php echo esc_url($item->link); ?>"
                                   class="pawfect-group pawfect-inline-flex pawfect-items-center pawfect-text-pawfect-primary pawfect-font-semibold pawfect-transition-all pawfect-duration-300 hover:pawfect-gap-3">
                                    <span><?php echo esc_html($item->button_text ?? 'View Collection'); ?></span>
                                    <svg class="pawfect-w-5 pawfect-h-5 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>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
</section>
