<?php get_header(); ?>

<?php while (have_posts()) : the_post(); ?>

<!-- Post Hero — solid navy -->
<section class="wpbs-post-hero" style="background-color: var(--wpbs-navbar-bg, #0f172a);">
    <div class="container" style="padding: 80px 0 50px;">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="mb-3">
                    <?php
                    $cats = get_the_category();
                    if ($cats) {
                        foreach ($cats as $cat) {
                            echo '<span class="badge rounded-pill text-white me-1" style="background-color: var(--wpbs-accent, #0dcaf0);">' . esc_html($cat->name) . '</span>';
                        }
                    }
                    ?>
                </div>
                <h1 class="display-5 fw-bold text-white mb-3"><?php the_title(); ?></h1>
                <div class="d-flex align-items-center justify-content-center gap-3 text-white-50">
                    <span><i class="bi bi-calendar3 me-1"></i> <?php echo get_the_date(); ?></span>
                    <span><i class="bi bi-person me-1"></i> <?php the_author(); ?></span>
                    <span><i class="bi bi-clock me-1"></i> <?php echo ceil(str_word_count(wp_strip_all_tags(get_the_content())) / 200); ?> min read</span>
                </div>
            </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;">
        <div class="row g-5">

            <!-- Post Content -->
            <div class="col-lg-8">
                <article <?php post_class('bg-white rounded shadow-sm p-4 p-lg-5'); ?>>

                    <?php if (has_post_thumbnail()) : ?>
                        <figure class="mb-4">
                            <?php the_post_thumbnail('large', ['class' => 'img-fluid rounded w-100']); ?>
                        </figure>
                    <?php endif; ?>

                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>

                    <?php the_tags('<div class="mt-4 pt-3 border-top"><i class="bi bi-tags me-1"></i> ', ', ', '</div>'); ?>
                </article>

                <!-- Post Navigation -->
                <nav class="mt-4" aria-label="<?php esc_attr_e('Post navigation', 'wpbs-theme'); ?>">
                    <div class="row g-3">
                        <?php
                        $prev = get_previous_post();
                        $next = get_next_post();
                        ?>
                        <?php if ($prev) : ?>
                            <div class="<?php echo $next ? 'col-md-6' : 'col-12'; ?>">
                                <a href="<?php echo get_permalink($prev); ?>" class="d-block p-3 bg-white rounded shadow-sm text-decoration-none h-100">
                                    <small class="text-muted"><i class="bi bi-chevron-left"></i> Previous</small>
                                    <div class="fw-semibold mt-1" style="color: var(--wpbs-heading-color, #212529);"><?php echo get_the_title($prev); ?></div>
                                </a>
                            </div>
                        <?php endif; ?>
                        <?php if ($next) : ?>
                            <div class="<?php echo $prev ? 'col-md-6' : 'col-12'; ?> text-md-end">
                                <a href="<?php echo get_permalink($next); ?>" class="d-block p-3 bg-white rounded shadow-sm text-decoration-none h-100">
                                    <small class="text-muted">Next <i class="bi bi-chevron-right"></i></small>
                                    <div class="fw-semibold mt-1" style="color: var(--wpbs-heading-color, #212529);"><?php echo get_the_title($next); ?></div>
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                </nav>

                <?php if (comments_open() || get_comments_number()) : ?>
                    <div class="mt-5 bg-white rounded shadow-sm p-4 p-lg-5">
                        <?php comments_template(); ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Sticky Sidebar -->
            <div class="col-lg-4">
                <div class="position-sticky" style="top: 100px;">

                    <!-- CTA Box -->
                    <div class="rounded p-4 text-center text-white mb-4" style="background-color: var(--wpbs-navbar-bg, #0f172a);">
                        <h5 class="fw-bold mb-2 text-white">Ready to grow?</h5>
                        <p class="small mb-3 text-white-50">Get a free audit and see how we can scale your business.</p>
                        <?php
                        $cta_url = get_theme_mod('wpbs_navbar_cta_url', '/contact');
                        $cta_text = get_theme_mod('wpbs_navbar_cta_text', 'Schedule a Call');
                        ?>
                        <a href="<?php echo esc_url($cta_url); ?>" class="btn btn-primary wpbs-cta-btn w-100"><?php echo esc_html($cta_text); ?></a>
                    </div>

                    <!-- Recent Posts -->
                    <div class="bg-white rounded shadow-sm p-4">
                        <h6 class="fw-bold mb-3 text-uppercase" style="letter-spacing: 0.05em; font-size: 0.8rem; color: var(--wpbs-heading-color, #212529);">Recent Posts</h6>
                        <?php
                        $recent = new WP_Query([
                            'posts_per_page' => 5,
                            'post__not_in' => [get_the_ID()],
                            'post_status' => 'publish',
                        ]);
                        if ($recent->have_posts()) :
                            while ($recent->have_posts()) : $recent->the_post();
                        ?>
                            <a href="<?php the_permalink(); ?>" class="d-flex align-items-start gap-3 text-decoration-none mb-3 pb-3 border-bottom">
                                <?php if (has_post_thumbnail()) : ?>
                                    <div class="flex-shrink-0" style="width: 70px; height: 70px;">
                                        <?php the_post_thumbnail('thumbnail', ['class' => 'rounded w-100 h-100 object-fit-cover']); ?>
                                    </div>
                                <?php endif; ?>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold small" style="color: var(--wpbs-heading-color, #212529); line-height: 1.3;"><?php the_title(); ?></div>
                                    <small class="text-muted"><?php echo get_the_date(); ?></small>
                                </div>
                            </a>
                        <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                        ?>
                    </div>

                </div>
            </div>

        </div>
    </div>
</main>

<?php endwhile; ?>

<?php get_footer(); ?>
