<?php
/**
 * Blog Hero Section — 博客 Hero 区域组件。
 *
 * 变量作用域（由父模板注入）：
 * @var PufferGo_Blog_Archive_Data $data 归档页数据对象。
 *
 * @package PufferGo
 */

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

<section class="blog-hero-section">
	<?php
	$is_mobile  = wp_is_mobile();
	$bg_pc      = $data->hero_bg_image;
	$bg_mobile  = $data->hero_bg_image_mobile;

	if ( $is_mobile ) {
		$image_url  = ! empty( $bg_mobile ) ? $bg_mobile : $bg_pc;
		$image_class = 'hero-bg-image-mobile';
	} else {
		$image_url  = ! empty( $bg_pc ) ? $bg_pc : $bg_mobile;
		$image_class = 'hero-bg-image';
	}
	?>
	<?php if ( ! empty( $image_url ) ) : ?>
		<img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $data->page_title ); ?>" class="<?php echo esc_attr( $image_class ); ?>" />
	<?php endif; ?>
	<div class="hero-overlay"></div>
	<div class="hero-content">
		<h1 class="title"><?php echo wp_kses_post( $data->page_title ?? __( 'Industry Insights & Tech Trends', 'puffergo' ) ); ?></h1>
		<p class="subtitle"><?php echo esc_html( $data->page_subtitle ?? __( 'Sharing insights on global branding, tech architecture, and user experience.', 'puffergo' ) ); ?></p>

		<?php if ( ! empty( $data->categories ) ) : ?>
			<div class="hero-filter-tags">
				<a href="<?php echo esc_url( $data->archive_url ); ?>" class="hero-tag <?php echo empty( $data->category_slug ) ? 'active' : ''; ?>" data-category="">
					<?php esc_html_e( 'All', 'puffergo' ); ?>
				</a>
				<?php foreach ( $data->categories as $cat ) :
					$is_active = ( $cat['slug'] === $data->category_slug );
				?>
					<a href="<?php echo esc_url( $cat['url'] ); ?>" class="hero-tag <?php echo $is_active ? 'active' : ''; ?>" data-category="<?php echo esc_attr( $cat['slug'] ); ?>">
						<?php echo esc_html( $cat['name'] ); ?>
					</a>
				<?php endforeach; ?>
			</div>
		<?php endif; ?>
	</div>
</section>
