<?php get_header(); ?>

<!-- Blog Hero -->
<section class="wpbs-blog-hero position-relative overflow-hidden" style="background-color: var(--wpbs-navbar-bg, #0f172a);">
    <div class="container" style="padding: 80px 0 60px;">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h1 class="display-5 fw-bold text-white mb-3">
                    <?php
                    if (is_category()) {
                        single_cat_title();
                    } elseif (is_tag()) {
                        single_tag_title();
                    } elseif (is_author()) {
                        the_author();
                    } elseif (is_archive()) {
                        the_archive_title();
                    } else {
                        echo 'News & Insights';
                    }
                    ?>
                </h1>
                <?php if (is_category() || is_tag()) : ?>
                    <p class="lead text-white-50"><?php echo term_description(); ?></p>
                <?php else : ?>
                    <p class="lead text-white-50">Stay up to date with our latest strategies, case studies, and industry insights.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<main id="main" class="wpbs-content-area" style="background-color: var(--wpbs-light, #f8f9fa);">
    <div class="container px-3 px-md-0" style="padding-top: 60px; padding-bottom: 80px;">
        <?php if (have_posts()) : ?>

            <?php
            // Feature the first post large if on the first page
            if (!is_paged() && !is_search()) :
                the_post();
            ?>
            <div class="row mb-5">
                <div class="col-12">
                    <article <?php post_class('card border-0 shadow-sm overflow-hidden'); ?>>
                        <div class="row g-0">
                            <?php if (has_post_thumbnail()) : ?>
                                <div class="col-lg-6">
                                    <a href="<?php the_permalink(); ?>" class="d-block h-100">
                                        <?php the_post_thumbnail('large', ['class' => 'w-100 h-100 object-fit-cover', 'style' => 'min-height: 300px;']); ?>
                                    </a>
                                </div>
                            <?php endif; ?>
                            <div class="<?php echo has_post_thumbnail() ? 'col-lg-6' : 'col-12'; ?>">
                                <div class="card-body d-flex flex-column justify-content-center p-4 p-lg-5">
                                    <div class="mb-2">
                                        <?php
                                        $cats = get_the_category();
                                        if ($cats) {
                                            echo '<span class="badge rounded-pill text-white me-2" style="background-color: var(--wpbs-primary);">' . esc_html($cats[0]->name) . '</span>';
                                        }
                                        ?>
                                        <small class="text-muted"><?php echo get_the_date(); ?></small>
                                    </div>
                                    <h2 class="h3 fw-bold mb-3">
                                        <a href="<?php the_permalink(); ?>" class="text-decoration-none" style="color: var(--wpbs-heading-color, #212529);"><?php the_title(); ?></a>
                                    </h2>
                                    <p class="text-muted mb-3"><?php echo get_the_excerpt(); ?></p>
                                    <div>
                                        <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-primary">Read More <i class="bi bi-arrow-right ms-1"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
            <?php endif; ?>

            <!-- Post Grid -->
            <div class="row g-4">
                <?php while (have_posts()) : the_post(); ?>
                    <div class="col-md-6 col-lg-4">
                        <article <?php post_class('card h-100 border-0 shadow-sm overflow-hidden'); ?>>
                            <?php if (has_post_thumbnail()) : ?>
                                <a href="<?php the_permalink(); ?>" class="d-block overflow-hidden" style="height: 220px;">
                                    <?php the_post_thumbnail('wpbs-card', ['class' => 'w-100 h-100 object-fit-cover']); ?>
                                </a>
                            <?php endif; ?>
                            <div class="card-body d-flex flex-column">
                                <div class="mb-2">
                                    <?php
                                    $cats = get_the_category();
                                    if ($cats) {
                                        echo '<span class="badge rounded-pill text-white" style="background-color: var(--wpbs-primary); font-size: 0.7rem;">' . esc_html($cats[0]->name) . '</span>';
                                    }
                                    ?>
                                </div>
                                <h2 class="h6 fw-bold mb-2">
                                    <a href="<?php the_permalink(); ?>" class="text-decoration-none" style="color: var(--wpbs-heading-color, #212529);"><?php the_title(); ?></a>
                                </h2>
                                <p class="text-muted small flex-grow-1"><?php echo wp_trim_words(get_the_excerpt(), 18); ?></p>
                                <div class="d-flex align-items-center justify-content-between mt-auto pt-2 border-top">
                                    <small class="text-muted"><?php echo get_the_date(); ?></small>
                                    <a href="<?php the_permalink(); ?>" class="text-decoration-none small fw-semibold" style="color: var(--wpbs-primary);">Read <i class="bi bi-arrow-right"></i></a>
                                </div>
                            </div>
                        </article>
                    </div>
                <?php endwhile; ?>
            </div>

            <nav class="mt-5" aria-label="<?php esc_attr_e('Posts navigation', 'wpbs-theme'); ?>">
                <?php
                the_posts_pagination([
                    'mid_size' => 2,
                    'prev_text' => '<i class="bi bi-chevron-left"></i> ' . __('Previous', 'wpbs-theme'),
                    'next_text' => __('Next', 'wpbs-theme') . ' <i class="bi bi-chevron-right"></i>',
                    'class' => 'pagination justify-content-center',
                ]);
                ?>
            </nav>
        <?php else : ?>
            <div class="text-center py-5">
                <h2><?php esc_html_e('Nothing found', 'wpbs-theme'); ?></h2>
                <p class="text-muted"><?php esc_html_e('It seems we can\'t find what you\'re looking for.', 'wpbs-theme'); ?></p>
            </div>
        <?php endif; ?>
    </div>
</main>

<?php get_footer(); ?>
