<?php get_header(); ?>

<main class="max-w-7xl mx-auto px-4 py-8 flex flex-col <?php echo esc_attr(kumibox_sidebar_class()); ?> gap-8">
    <section class="lg:w-2/3">
        
        <header class="mb-8 border-b-2 border-black dark:border-white pb-4">
            <h1 class="text-3xl font-black text-[var(--text-main)] uppercase">
                <?php echo esc_html(get_theme_mod('section1_title', 'Wiadomości')); ?>
            </h1>
        </header>

        <div class="space-y-6 mb-12">
            <?php 
            if (have_posts()) : while (have_posts()) : the_post(); 
            ?>
                
                <article id="post-<?php the_ID(); ?>" <?php post_class('flex flex-col sm:flex-row bg-[var(--bg-card)] border border-[var(--border-custom)] hover:shadow-lg transition-shadow img-zoom-container'); ?>>
                    <div class="sm:w-1/3 h-56 sm:h-auto overflow-hidden relative">
                        <a href="<?php the_permalink(); ?>">
                            <?php if (has_post_thumbnail()) : ?>
                                <?php the_post_thumbnail('medium', array('class' => 'w-full h-full object-cover img-zoom')); ?>
                            <?php else: ?>
                                <div class="w-full h-full bg-gray-200 dark:bg-gray-700 img-zoom"></div>
                            <?php endif; ?>
                        </a>
                    </div>
                    <div class="sm:w-2/3 p-5 flex flex-col justify-center">
                        <h2 class="text-xl font-bold mb-2 text-[var(--text-main)] leading-tight">
                            <a href="<?php the_permalink(); ?>" class="hover:text-[var(--color-primary)] transition-colors"><?php the_title(); ?></a>
                        </h2>
                        
                        <?php if (get_theme_mod('show_meta_date', true)) : ?>
                        <div class="text-[11px] text-gray-500 uppercase font-bold tracking-wider mb-3">
                            <span><i class="far fa-clock text-[var(--color-primary)]"></i> <?php echo get_the_date(); ?></span>
                        </div>
                        <?php endif; ?>

                        <div class="text-sm opacity-80 line-clamp-3 mb-4 leading-relaxed">
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                </article>

            <?php endwhile; else: ?>
                <p>Brak artykułów w tej kategorii.</p>
            <?php endif; ?>
        </div>

        <div class="mb-12 flex justify-center items-center gap-2 font-bold text-[var(--color-primary)] pagination-links">
            <?php 
            echo paginate_links(array(
                'prev_text' => '<i class="fas fa-angle-double-left"></i>',
                'next_text' => '<i class="fas fa-angle-double-right"></i>',
            )); 
            ?>
        </div>

        <?php if (!is_paged()) : ?>
            <div class="border-b-2 border-black dark:border-white mb-6 flex justify-between items-end pb-2">
                <h3 class="text-lg font-bold uppercase bg-[var(--color-primary)] text-white px-4 py-1 -mb-[2px]">
                    <?php echo esc_html(get_theme_mod('section2_title', 'Na Czasie')); ?>
                </h3>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <?php 
                $sec2_cat = get_theme_mod('section2_cat', 0);
                $args2 = array('posts_per_page' => 4, 'ignore_sticky_posts' => 1);
                if($sec2_cat) $args2['cat'] = (int)$sec2_cat;

                $trending_query = new WP_Query($args2);
                while ($trending_query->have_posts()) : $trending_query->the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class('bg-[var(--bg-card)] border border-[var(--border-custom)] p-4 hover:shadow-md transition-shadow'); ?>>
                        <h4 class="font-bold text-[var(--text-main)] mb-2 leading-tight">
                            <a href="<?php the_permalink(); ?>" class="hover:text-[var(--color-primary)] transition-colors"><?php the_title(); ?></a>
                        </h4>
                        <span class="text-[10px] text-gray-500 uppercase font-bold"><i class="far fa-clock text-[var(--color-primary)]"></i> <?php echo get_the_date(); ?></span>
                    </article>
                <?php endwhile; wp_reset_postdata(); ?>
            </div>
        <?php endif; ?>

    </section>

    <aside class="lg:w-1/3 space-y-8">
        <div class="bg-[var(--bg-card)] border border-[var(--border-custom)] p-5 shadow-sm">
            <div class="border-b-2 border-black dark:border-white mb-4 flex justify-between items-end pb-2">
                <h3 class="text-sm font-bold uppercase bg-[var(--color-primary)] text-white px-3 py-1 -mb-[2px]">
                    <?php echo esc_html(get_theme_mod('sidebar_popular_title', 'Popularne')); ?>
                </h3>
            </div>
            <ul class="space-y-4">
                <?php
                $popular = new WP_Query(array('posts_per_page' => 5, 'orderby' => 'comment_count', 'ignore_sticky_posts' => 1));
                $num = 1;
                while($popular->have_posts()) : $popular->the_post(); ?>
                    <li class="flex gap-4 img-zoom-container items-center">
                        <div class="w-20 h-20 flex-shrink-0 overflow-hidden relative shadow-sm">
                            <?php if(has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('thumbnail', array('class' => 'w-full h-full object-cover img-zoom')); ?>
                            <?php else: ?>
                                <div class="w-full h-full bg-gray-200 dark:bg-gray-700 img-zoom"></div>
                            <?php endif; ?>
                            <span class="absolute top-0 left-0 bg-[var(--color-primary)] text-white text-[10px] w-5 h-5 flex justify-center items-center font-bold z-10"><?php echo esc_html($num++); ?></span>
                        </div>
                        <div class="flex-grow">
                            <h4 class="text-sm font-bold leading-snug mb-1">
                                <a href="<?php the_permalink(); ?>" class="hover:text-[var(--color-primary)] transition-colors"><?php echo esc_html(wp_trim_words(get_the_title(), 8)); ?></a>
                            </h4>
                            <span class="text-[10px] text-gray-500 uppercase font-bold"><i class="far fa-comments text-[var(--color-primary)]"></i> <?php echo esc_html(get_comments_number()); ?></span>
                        </div>
                    </li>
                <?php endwhile; wp_reset_postdata(); ?>
            </ul>
        </div>

        <?php if (is_active_sidebar('main-sidebar')) : ?>
            <?php dynamic_sidebar('main-sidebar'); ?>
        <?php endif; ?>
    </aside>
</main>

<?php get_footer(); ?>