<?php get_header(); ?>

<main id="primary" class="site-main">
    <div class="container">

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

        <!-- Breadcrumbs — full width above grid -->
        <nav class="article-breadcrumbs" aria-label="<?php esc_attr_e('Breadcrumbs', 'khabarnavis'); ?>">
            <a href="<?php echo esc_url(home_url('/')); ?>"><?php esc_html_e('Home', 'khabarnavis'); ?></a>
            <span class="sep">/</span>
            <?php $cats = get_the_category(); if ($cats) : ?>
                <a href="<?php echo esc_url(get_category_link($cats[0]->term_id)); ?>"><?php echo esc_html($cats[0]->name); ?></a>
                <span class="sep">/</span>
            <?php endif; ?>
            <span><?php the_title(); ?></span>
        </nav>

        <!-- 2-column wrapper: main content + sidebar -->
        <div class="single-article-wrapper">

            <!-- Main Article Content -->
            <article id="post-<?php the_ID(); ?>" <?php post_class('article-main'); ?>>

                <!-- Article Header -->
                <header class="article-header">
                    <?php echo khabarnavis_get_category_badge(); ?>
                    <h1><?php the_title(); ?></h1>

                    <?php if (has_excerpt()) : ?>
                        <p class="article-deck"><?php echo wp_kses_post(get_the_excerpt()); ?></p>
                    <?php endif; ?>

                    <div class="article-byline">
                        <div class="author-info">
                            <div class="author-avatar">
                                <?php echo get_avatar(get_the_author_meta('email'), 88, '', get_the_author(), ['class' => '']); ?>
                            </div>
                            <div>
                                <p class="author-name"><?php the_author(); ?></p>
                                <p class="author-role metadata">
                                    <?php the_date('j F Y'); ?> &bull; <?php echo khabarnavis_read_time(); ?>
                                </p>
                            </div>
                        </div>
                        <div class="article-share-btns">
                            <button class="share-btn" aria-label="<?php esc_attr_e('Share', 'khabarnavis'); ?>" id="share-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
                            </button>
                            <button class="share-btn" aria-label="<?php esc_attr_e('Save', 'khabarnavis'); ?>">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
                            </button>
                        </div>
                    </div>
                </header>

                <!-- Featured Image -->
                <?php if (has_post_thumbnail()) : ?>
                <figure class="article-featured-image">
                    <?php the_post_thumbnail('khabarnavis-hero', ['alt' => esc_attr(get_the_title())]); ?>
                    <?php $caption = get_the_post_thumbnail_caption(); if ($caption) : ?>
                        <figcaption><?php echo esc_html($caption); ?></figcaption>
                    <?php endif; ?>
                </figure>
                <?php endif; ?>

                <!-- Article Body -->
                <div class="article-body">
                    <?php the_content(); ?>
                    <?php
                    wp_link_pages([
                        'before' => '<div class="page-links">' . esc_html__('Pages:', 'khabarnavis'),
                        'after'  => '</div>',
                    ]);
                    ?>
                </div>

                <!-- Tags -->
                <?php $tags = get_the_tags(); if ($tags) : ?>
                <div class="article-tags">
                    <h4><?php esc_html_e('Tagged', 'khabarnavis'); ?></h4>
                    <div class="tags-list">
                        <?php foreach ($tags as $tag) : ?>
                            <a href="<?php echo esc_url(get_tag_link($tag->term_id)); ?>" class="tag-pill"><?php echo esc_html($tag->name); ?></a>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>

                <!-- Post Navigation -->
                <?php
                the_post_navigation([
                    'prev_text' => '<span class="nav-label">' . esc_html__('Previous', 'khabarnavis') . '</span><span class="nav-title">%title</span>',
                    'next_text' => '<span class="nav-label">' . esc_html__('Next', 'khabarnavis') . '</span><span class="nav-title">%title</span>',
                    'class'     => 'post-navigation',
                ]);
                ?>

                <!-- Comments -->
                <?php if (comments_open() || get_comments_number()) :
                    comments_template();
                endif; ?>

            </article><!-- .article-main -->

            <!-- Article Sidebar -->
            <aside class="article-sidebar">
                <!-- Related Articles -->
                <?php
                $cats     = get_the_category();
                $cat_ids  = wp_list_pluck($cats, 'term_id');
                $related  = get_posts([
                    'category__in'   => $cat_ids,
                    'posts_per_page' => 3,
                    'post__not_in'   => [get_the_ID()],
                    'post_status'    => 'publish',
                    'meta_key'       => '_thumbnail_id',
                ]);
                if ($related) : ?>
                <div class="related-articles-widget">
                    <h4><?php esc_html_e('Related Articles', 'khabarnavis'); ?></h4>
                    <?php foreach ($related as $rp) : ?>
                    <div class="related-article-item">
                        <?php if (has_post_thumbnail($rp->ID)) : ?>
                        <div class="thumb">
                            <?php echo get_the_post_thumbnail($rp->ID, 'khabarnavis-medium', ['alt' => esc_attr($rp->post_title)]); ?>
                        </div>
                        <?php endif; ?>
                        <h5><a href="<?php echo esc_url(get_permalink($rp->ID)); ?>"><?php echo esc_html($rp->post_title); ?></a></h5>
                        <p class="read-time metadata"><?php echo khabarnavis_read_time($rp->ID); ?></p>
                    </div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>

                <!-- Email Signup -->
                <div class="sidebar-email-widget">
                    <h4><?php esc_html_e('The Weekly Briefing', 'khabarnavis'); ?></h4>
                    <p><?php esc_html_e('Curated news delivered to your inbox every morning. No noise, just signal.', 'khabarnavis'); ?></p>
                    <form action="#" method="post">
                        <input type="email" name="email" placeholder="<?php esc_attr_e('your@email.com', 'khabarnavis'); ?>" required>
                        <button type="submit"><?php esc_html_e('Subscribe', 'khabarnavis'); ?></button>
                    </form>
                </div>

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

            </aside><!-- .article-sidebar -->

        </div><!-- .single-article-wrapper -->

        <?php endwhile; ?>

    </div><!-- .container -->
</main><!-- #primary -->

<?php get_footer(); ?>