<?php
/**
 * The template for displaying single products
 *
 * @package multitas
 */

get_header();
?>

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

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

			<article id="post-<?php the_ID(); ?>" <?php post_class( 'single-product-article' ); ?>>
				<div class="single-product-container">
					<div class="single-product-grid">
						<!-- Product Image -->
						<div class="single-product-image-wrapper">
							<?php if ( has_post_thumbnail() ) : ?>
								<div class="single-product-image">
									<?php the_post_thumbnail( 'full' ); ?>
								</div>
							<?php else : ?>
								<div class="single-product-no-image">
									<span class="dashicons dashicons-format-image"></span>
									<p><?php esc_html_e( 'No image available', 'multitas' ); ?></p>
								</div>
							<?php endif; ?>
						</div>

						<!-- Product Content -->
						<div class="single-product-content">
							<header class="single-product-header">
								<h1 class="single-product-title"><?php the_title(); ?></h1>
								<?php if ( has_excerpt() ) : ?>
									<div class="single-product-excerpt">
										<?php the_excerpt(); ?>
									</div>
								<?php endif; ?>
							</header>

							<div class="single-product-body">
								<?php the_content(); ?>
							</div>

							<footer class="single-product-footer">
								<a href="<?php echo esc_url( home_url( '/#products' ) ); ?>" class="back-to-products">
									<span class="arrow">←</span> <?php esc_html_e( 'Back to Products', 'multitas' ); ?>
								</a>
							</footer>
						</div>
					</div>
				</div>
			</article>

			<?php
			// Related Products
			$current_product_id = get_the_ID();
			$related_query      = new WP_Query(
				array(
					'post_type'      => 'product',
					'posts_per_page' => 3,
					'post__not_in'   => array( $current_product_id ),
					'orderby'        => 'rand',
				)
			);

			if ( $related_query->have_posts() ) :
				?>
				<section class="related-products">
					<div class="related-products-container">
						<h2 class="related-products-title"><?php esc_html_e( 'Related Products', 'multitas' ); ?></h2>
						<div class="related-products-grid">
							<?php
							while ( $related_query->have_posts() ) :
								$related_query->the_post();
								?>
								<article class="product-card">
									<?php if ( has_post_thumbnail() ) : ?>
										<div class="product-image">
											<a href="<?php the_permalink(); ?>">
												<?php the_post_thumbnail( 'large', array( 'class' => 'product-img' ) ); ?>
											</a>
										</div>
									<?php endif; ?>
									<div class="product-content">
										<h3 class="product-title">
											<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
										</h3>
										<?php if ( has_excerpt() ) : ?>
											<p class="product-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></p>
										<?php endif; ?>
										<a href="<?php the_permalink(); ?>" class="product-link"><?php esc_html_e( 'View Details', 'multitas' ); ?> <span class="arrow">→</span></a>
									</div>
								</article>
								<?php
							endwhile;
							wp_reset_postdata();
							?>
						</div>
					</div>
				</section>
				<?php
			endif;
			?>

		<?php endwhile; ?>

	</main><!-- #main -->

<?php
get_footer();