<?php
/**
 * Hero Slider Template Part
 *
 * Displays latest posts in a beautiful Swiper slider
 *
 */

// Query for latest 5 posts for the slider
$hero_args = array(
	'post_type'      => 'post',
	'posts_per_page' => 5,
	'post_status'    => 'publish',
	'orderby'        => 'date',
	'order'          => 'DESC',
	// Optional: Only show posts with featured images
	'meta_query'     => array(
		array(
			'key'     => '_thumbnail_id',
			'compare' => 'EXISTS'
		),
	),
);

$hero_query = new WP_Query($hero_args);

if ($hero_query->have_posts()) : ?>

	<!-- Hero Slider -->
	<div class="hero-slider">
		<div class="swiper heroSwiper">
			<div class="swiper-wrapper">

				<?php while ($hero_query->have_posts()) : $hero_query->the_post();
					// Get featured image URL
					$featured_img = get_the_post_thumbnail_url(get_the_ID(), 'full');

					// Fallback image if no featured image
					if (!$featured_img) {
						$featured_img = get_template_directory_uri() . '/assets/images/banner.jpg';
					}

					// Get categories
					$categories = get_the_category();
					$category_name = !empty($categories) ? esc_html($categories[0]->name) : 'UNCATEGORIZED';

					// Get excerpt
					$excerpt = has_excerpt() ? get_the_excerpt() : wp_trim_words(get_the_content(), 30);
					?>

					<!-- Slide -->
					<div class="swiper-slide">
						<div class="slide-image" style="background-image: url('<?php echo esc_url($featured_img); ?>');">
							<div class="overlay"></div>
						</div>
						<div class="container-fluid">
							<div class="row align-items-center">
								<div class="col-lg-6 offset-lg-6">
									<div class="slide-content">
										<span class="category"><?php echo strtoupper($category_name); ?></span>

										<h1 class="slide-title">
											<a href="<?php the_permalink(); ?>">
												<?php the_title(); ?>
											</a>
										</h1>

										<p class="slide-description">
											<?php echo esc_html($excerpt); ?>
										</p>

										<a href="<?php the_permalink(); ?>" class="btn-read-more">
											READ MORE
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>

				<?php endwhile; ?>

			</div>

			<!-- Navigation Arrows -->
			<div class="slider-navigation">
				<div class="swiper-button-prev">
					<i class="fas fa-chevron-down"></i>
				</div>
				<div class="swiper-button-next">
					<i class="fas fa-chevron-up"></i>
				</div>
			</div>

			<!-- Pagination -->
			<div class="swiper-pagination"></div>
		</div>
	</div>

	<?php
	wp_reset_postdata();
endif;
?>