<?php
if (! defined('ABSPATH')) {
    exit;
} ?>

<main class="puffergo-fullpage-layout puffergo-blog-single bg-white">
	<div class="mx-auto max-w-canvas px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
		<!-- Breadcrumb -->
		<nav class="mb-8">
			<?php puffergo_render_component('breadcrumb', array('items' => array(array('url' => get_home_url(), 'label' => __('Home', 'puffergo')), array('url' => get_post_type_archive_link('post') ?: get_home_url(), 'label' => __('Blog', 'puffergo')), array('url' => null, 'label' => get_the_title()), ))); ?>
		</nav>

		<div class="lg:grid lg:grid-cols-12 lg:gap-12">
			<!-- Main content -->
			<article class="lg:col-span-8">
				<header class="mb-8">
					<?php if (has_post_thumbnail()) : ?>
						<div class="mb-6 rounded-xl overflow-hidden">
							<?php the_post_thumbnail('large', array('class' => 'w-full h-auto')); ?>
						</div>
					<?php endif; ?>
					<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-4"><?php the_title(); ?></h1>
					<div class="flex items-center gap-4 text-sm text-neutral-500">
						<span class="flex items-center gap-1">
							<svg class="w-4 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"/></svg>
							<?php echo get_the_date(); ?>
						</span>
						<span class="flex items-center gap-1">
							<svg class="w-4 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"/></svg>
							<?php the_author(); ?>
						</span>
					</div>
				</header>

				<div class="prose prose-lg prose-gray max-w-none">
					<?php the_content(); ?>
				</div>

				<?php if (comments_open() || get_comments_number()) : ?>
					<div class="mt-12 pt-8 border-t border-neutral-200">
						<?php comments_template(); ?>
					</div>
				<?php endif; ?>
			</article>

			<!-- Sidebar -->
			<aside class="lg:col-span-4 mt-12 lg:mt-0">
				<div class="sticky top-8 space-y-8">
					<!-- Categories -->
					<?php
$categories = get_categories(array('orderby' => 'name'));

if ($categories) : ?>
						<div class="bg-neutral-50 rounded-lg p-6">
							<h3 class="text-sm font-bold uppercase tracking-wider text-neutral-900 mb-4"><?php esc_html_e('Categories', 'puffergo'); ?></h3>
							<ul class="space-y-2">
								<?php foreach ($categories as $cat) : ?>
									<li>
										<a href="<?php echo esc_url(get_category_link($cat->term_id)); ?>" class="text-neutral-600 hover:text-brand-600 transition">
											<?php echo esc_html($cat->name); ?>
											<span class="text-neutral-400 text-sm">(<?php echo $cat->count; ?>)</span>
										</a>
									</li>
								<?php endforeach; ?>
							</ul>
						</div>
					<?php endif; ?>
				</div>
			</aside>
		</div>
	</div>
</main>
