<?php

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

$enabled = get_theme_mod('pawfect_blog_enabled', true);
if (! $enabled) {
    return;
}



$container_class = get_theme_mod('pawfect_blog_width', 'pawfect-container');
$column_class = get_theme_mod('pawfect_blog_column_layout', 'col-md-4');
// Get responsive blog count - handle both old and new formats
$blog_count_setting = get_theme_mod('pawfect_blog_count');

if (is_array($blog_count_setting) && isset($blog_count_setting['slider'])) {
    // Old format compatibility
    $post_count = $blog_count_setting['slider'];
} else {
    // New responsive format
    $blog_count_values = is_string($blog_count_setting) ? json_decode($blog_count_setting, true) : $blog_count_setting;
    if (is_array($blog_count_values)) {
        // Use desktop value as default for server-side rendering
        $post_count = isset($blog_count_values['desktop']) ? $blog_count_values['desktop'] : 6;
    } else {
        $post_count = 6; // Default fallback
    }
}
$blog_category = get_theme_mod('pawfect_theme_blog_category');
$blog_title = get_theme_mod('pawfect_blog_area_title', __( 'From Our Blog', 'pawfect' ));
$blog_desc = get_theme_mod('pawfect_blog_area_des', __( 'Tips, stories & ideas for every dog lover', 'pawfect' ));
$blog_button_text = get_theme_mod('pawfect_blog_area_button', __( 'View All Posts', 'pawfect' ));
$blog_button_link = get_theme_mod('pawfect_blog_section_button_link', '/blog');
$card_style = get_theme_mod('pawfect_blog_card_style', 'modern');

// Convert column class to grid columns
$grid_columns = 'pawfect-grid-cols-1 md:pawfect-grid-cols-2';
switch ($column_class) {
    case 'col-md-6': // 2 columns
        $grid_columns = 'pawfect-grid-cols-1 md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2';
        break;
    case 'col-md-4': // 3 columns
        $grid_columns = 'pawfect-grid-cols-1 md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-3';
        break;
    case 'col-md-3': // 4 columns
        $grid_columns = 'pawfect-grid-cols-1 md:pawfect-grid-cols-2 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-4';
        break;
    default:
        $grid_columns = 'pawfect-grid-cols-1 md:pawfect-grid-cols-2  sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-3';
}
?>
<!-- Enhanced From Our Blog Section -->
<section class="pawfect-blog-section pawfect-relative pawfect-py-20 lg:pawfect-py-28 pawfect-overflow-hidden" style="background-color: var(--pawfect-blog-bg, #fef9f5);">



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

    <div class="<?php echo esc_attr($container_class); ?> pawfect-relative pawfect-z-10">
        <div class="pawfect-blog-heading pawfect-text-center pawfect-mb-12 lg:pawfect-mb-16">
            <!-- Consistent 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__( 'Latest Stories', 'pawfect' ); ?></span>
                <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
            </div>

            <!-- Consistent Title -->
            <h2 class="pawfect-text-4xl md:pawfect-text-5xl pawfect-font-bold pawfect-text-[#1f2937] pawfect-mb-2">
                <?php echo esc_html($blog_title); ?>
            </h2>

            <!-- Consistent Description -->
            <?php if (!empty($blog_desc)) : ?>
                <p class="pawfect-text-pawfect-text">
                    <?php echo esc_html($blog_desc); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- Enhanced Blog Grid -->
        <div class="pawfect-grid <?php echo esc_attr($grid_columns); ?> pawfect-gap-8">
            <?php
            $args = array(
                'post_type' => 'post',
                'posts_per_page' => $post_count,
            );
            if ($blog_category) {
                $args['cat'] = $blog_category;
            }

            $query = new WP_Query($args);
            if ($query->have_posts()):
                $i = 0;
                while ($query->have_posts()):
                    $query->the_post();
                    $categories = get_the_category();
                    $cat_label = !empty($categories) ? $categories[0]->name : '';
                    ?>
                    <?php if ($card_style === 'modern'): ?>
                        <!-- Modern Blog Card - Original Structure -->
                        <article class="pawfect-blog-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-border-pawfect-primary hover:pawfect-border-opacity-20<?php echo ($i == 0 ? ' lg:pawfect-col-span-3' : ''); ?>"
                                 <?php echo pawfect_get_aos_attrs('fade-up', 600, 400 + ($i * 100)); ?>>
                    <?php elseif ($card_style === 'classic'): ?>
                        <!-- Classic Blog Card - Exact Match to content.php -->
                        <article class="pawfect-blog-post pawfect-bg-white pawfect-rounded-xl pawfect-border pawfect-border-gray-100 pawfect-overflow-hidden pawfect-transition-all pawfect-duration-300 hover:pawfect-shadow-lg hover:pawfect-border-pawfect-primary hover:pawfect-border-opacity-20"
                                 <?php echo pawfect_get_aos_attrs('fade-up', 600, 400 + ($i * 150)); ?>>
                    <?php endif; ?>

                        <?php if ($card_style === 'modern'): ?>
                            <!-- Modern Card Style - Original Complex Structure -->
                            <a href="<?php the_permalink(); ?>"
                               class="pawfect-relative pawfect-z-10 <?php echo ($i == 0 ? 'pawfect-flex pawfect-flex-col lg:pawfect-flex-row lg:pawfect-h-[400px]' : ''); ?>">

                                <!-- Modern Image Section -->
                                <div class="pawfect-relative <?php echo ($i == 0 ? 'pawfect-w-full lg:pawfect-w-1/2' : 'pawfect-overflow-hidden pawfect-aspect-[4/3]'); ?>">
                                    <?php the_post_thumbnail('full', [
                                        'class' => 'pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-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 pawfect-overflow-hidden"></div>

                                    <!-- Category Badge -->
                                    <?php if ($cat_label): ?>
                                        <span class="pawfect-absolute pawfect-top-4 pawfect-left-4 pawfect-bg-pawfect-primary 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($cat_label); ?>
                                        </span>
                                    <?php endif; ?>

                                    <!-- Read More Icon -->
                                    <div class="pawfect-absolute pawfect-bottom-4 pawfect-right-4 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-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-shadow-lg">
                                            <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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modern Content Section -->
                                <div class="pawfect-relative pawfect-z-10 <?php echo ($i == 0 ? 'pawfect-p-8 lg:pawfect-p-12 pawfect-flex pawfect-flex-col pawfect-justify-center' : 'pawfect-p-6'); ?>">
                                    <!-- Post Meta -->
                                    <div class="pawfect-flex pawfect-items-center pawfect-gap-4 pawfect-text-sm pawfect-text-gray-500 pawfect-mb-4">
                                        <div class="pawfect-flex pawfect-items-center pawfect-gap-1">
                                            <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                            <span><?php echo esc_html( get_the_date() ); ?></span>
                                        </div>
                                        <div class="pawfect-flex pawfect-items-center pawfect-gap-1">
                                            <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                            </svg>
                                            <span><?php echo esc_html( get_the_author() ); ?></span>
                                        </div>
                                    </div>

                                    <!-- Post Title -->
                                    <h3 class="pawfect-text-lg <?php echo ($i == 0 ? 'lg:pawfect-text-3xl' : 'lg:pawfect-text-xl'); ?> pawfect-font-bold pawfect-text-[#1a1f2b] pawfect-leading-tight pawfect-mb-4 pawfect-transition-colors pawfect-duration-300 group-hover:pawfect-text-pawfect-primary">
                                        <?php the_title(); ?>
                                    </h3>

                                    <!-- Post Excerpt -->
                                    <p class="pawfect-text-gray-600 pawfect-leading-relaxed pawfect-mb-6 <?php echo ($i == 0 ? 'pawfect-text-base' : 'pawfect-text-sm'); ?>">
                                        <?php echo wp_trim_words(get_the_excerpt(), ($i == 0 ? 30 : 20)); ?>
                                    </p>

                                    <!-- Read More Link -->
                                    <div class="pawfect-flex pawfect-items-center pawfect-text-pawfect-primary pawfect-font-semibold pawfect-text-sm pawfect-transition-all pawfect-duration-300 group-hover:pawfect-gap-2">
                                        <span><?php echo esc_html__( 'Read More', 'pawfect' ); ?></span>
                                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-ml-1 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>

                        <?php elseif ($card_style === 'classic'): ?>
                            <!-- Classic Card Style - Exact Match to content.php -->

                            <?php if (has_post_thumbnail()): ?>
                                <div class="pawfect-post-featured-image pawfect-relative pawfect-mb-6 pawfect-overflow-hidden pawfect-aspect-[4/3] pawfect-rounded-xl">

                                <a href="<?php the_permalink(); ?>">
                                    <?php the_post_thumbnail('medium_large', [
                                        'class' => 'pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-110 wp-post-image'
                                    ]); ?>
                                    <div class="pawfect-absolute pawfect-bottom-4 pawfect-right-4 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-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-shadow-lg">
                                            <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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </a>
                                </div>
                            <?php endif; ?>

                            <div class="pawfect-post-meta pawfect-text-xs pawfect-uppercase pawfect-tracking-widest pawfect-text-gray-400 pawfect-mb-2">
                                <?php
                                $categories = get_the_category();
                                if (!empty($categories)): ?>
                                    <span><?php the_category(', '); ?></span>
                                    <span> &bull; </span>
                                <?php endif; ?>
                                <time datetime="<?php echo esc_attr( get_the_date('c') ); ?>">
                                    <?php echo esc_html( get_the_date() ); ?>
                                </time>
                            </div>

                            <h2 class="pawfect-text-2xl pawfect-font-bold pawfect-text-gray-900 pawfect-mb-2">
                                <a href="<?php the_permalink(); ?>" class="pawfect-transition-colors pawfect-duration-200 hover:pawfect-text-pawfect-primary">
                                    <?php the_title(); ?>
                                </a>
                            </h2>

                            <div class="pawfect-text-gray-600 pawfect-mb-4 pawfect-line-clamp-3">
                                <?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?>
                            </div>

                            <a href="<?php the_permalink(); ?>" class="pawfect-text-pawfect-primary pawfect-font-medium pawfect-text-sm pawfect-transition-colors pawfect-duration-200 hover:pawfect-text-gray-900">
                                <?php echo esc_html__( 'Read More', 'pawfect' ); ?> &rarr;
                            </a>

                        <?php endif; ?>
                    </article>
                    <?php
                    $i++;
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>

        <!-- Consistent View All Posts Button -->
        <?php if (!empty($blog_button_text)) : ?>
            <div class="pawfect-text-center pawfect-mt-16"
                 data-aos="fade-up" data-aos-duration="600" data-aos-delay="600">
                <a href="<?php echo esc_url($blog_button_link); ?>" class="pawfect-btn pawfect-bg-pawfect-primary pawfect-text-white pawfect-border-pawfect-primary hover:pawfect-bg-pawfect-dark hover:pawfect-border-pawfect-dark">
                    <span><?php echo esc_html($blog_button_text); ?></span>
                    <svg class="pawfect-w-5 pawfect-h-5 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>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>