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

<main class="puffergo-fullpage-layout puffergo-blog-archive 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' => $data->get_breadcrumb_items())); ?>
		</nav>

		<!-- Header -->
		<header class="mb-10">
			<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-3"><?php echo esc_html($data->page_title); ?></h1>
			<?php if ($data->page_subtitle) : ?>
				<p class="text-lg text-neutral-500 max-w-2xl"><?php echo esc_html($data->page_subtitle); ?></p>
			<?php endif; ?>
		</header>

		<!-- Category filter -->
		<?php if (! empty($data->categories)) : ?>
			<div class="flex flex-wrap gap-2 mb-8">
				<a href="<?php echo esc_url($data->archive_url); ?>" class="px-4 py-2 rounded-full text-sm font-medium transition <?php echo ! $data->is_category_page ? 'bg-brand-600 text-white' : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'; ?>">
					<?php esc_html_e('All', 'puffergo'); ?>
				</a>
				<?php foreach ($data->categories as $cat) : ?>
					<a href="<?php echo esc_url($cat['url']); ?>" class="px-4 py-2 rounded-full text-sm font-medium transition <?php echo $data->active_category_id === $cat['id'] ? 'bg-brand-600 text-white' : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'; ?>">
						<?php echo esc_html($cat['name']); ?>
					</a>
				<?php endforeach; ?>
			</div>
		<?php endif; ?>

		<!-- Posts grid -->
		<?php if (! empty($data->posts)) : ?>
			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
				<?php foreach ($data->posts as $post_item) : ?>
					<article class="blog-card group bg-neutral-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow duration-300">
						<a href="<?php echo esc_url($post_item['url']); ?>" class="block">
							<?php if ($post_item['image_url']) : ?>
								<div class="relative aspect-video overflow-hidden">
									<img src="<?php echo esc_url($post_item['image_url']); ?>" alt="<?php echo esc_attr($post_item['image_alt']); ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
									<?php if ($post_item['category_name']) : ?>
										<span class="absolute top-3 left-3 px-2.5 py-1 text-xs font-semibold rounded-full bg-white/90 text-neutral-800 backdrop-blur-sm">
											<?php echo esc_html($post_item['category_name']); ?>
										</span>
									<?php endif; ?>
								</div>
							<?php else : ?>
								<div class="aspect-video bg-neutral-200 flex items-center justify-center">
									<svg class="w-10 h-10 text-neutral-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
									</svg>
								</div>
							<?php endif; ?>
						</a>
						<div class="p-5">
							<a href="<?php echo esc_url($post_item['url']); ?>">
								<h2 class="text-lg font-semibold text-neutral-900 group-hover:text-brand-600 transition line-clamp-2 mb-2"><?php echo esc_html($post_item['title']); ?></h2>
							</a>
							<?php if ($post_item['excerpt']) : ?>
								<p class="text-sm text-neutral-600 line-clamp-2 mb-3"><?php echo esc_html($post_item['excerpt']); ?></p>
							<?php endif; ?>
							<div class="flex items-center gap-3 text-xs text-neutral-400">
								<span><?php echo esc_html($post_item['author']); ?></span>
								<span>&middot;</span>
								<span><?php echo esc_html($post_item['date']); ?></span>
							</div>
						</div>
					</article>
				<?php endforeach; ?>
			</div>

			<?php if ($data->max_pages > 1) : ?>
				<?php puffergo_render_component('blog-pagination', array('current_page' => $data->paged, 'max_pages' => $data->max_pages, 'current_url' => $data->pagination_base_url ?: $data->current_url, )); ?>
			<?php endif; ?>

		<?php else : ?>
			<div class="text-center py-16">
				<svg class="w-16 h-16 mx-auto text-neutral-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
				</svg>
				<p class="text-neutral-500"><?php esc_html_e('No posts found.', 'puffergo'); ?></p>
			</div>
		<?php endif; ?>
	</div>
</main>
