<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package Matreshka
 */

get_header();
?>

<style>
/* ── 404 hero card ──────────────────────────────── */
.matreshka-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px 40px;
}
.matreshka-404__card {
	text-align: center;
	max-width: 520px;
	width: 100%;
	border-radius: 24px;
	padding: 0px 36px;
}
.matreshka-404__img {
	max-width: 240px;
	width: 100%;
	height: auto;
	margin-bottom: 24px;
}
.matreshka-404__code {
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(90deg, #A92231 0%, #E02842 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 12px;
}
.matreshka-404__title {
	font-size: 24px;
	color: var(--dark, #171717);
	margin-bottom: 8px;
}
.matreshka-404__text {
	font-size: 15px;
	color: var(--dark-opacity, #6b6b6b);
	margin-bottom: 28px;
	line-height: 1.5;
}
.matreshka-404__btn {
	display: inline-block;
	padding: 14px 36px;
	font-size: 16px;
	border-radius: 16px;
	background: linear-gradient(90deg, #A92231 0%, #E02842 100%);
	color: #fff !important;
	text-decoration: none !important;
	transition: opacity .2s, transform .2s;
}
.matreshka-404__btn:hover {
	opacity: .9;
	transform: translateY(-1px);
}
.matreshka-404__btn:active {
	transform: translateY(0);
}

/* ── 404 products grid (no horizontal scroll) ──── */
.matreshka-404-products {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-top: 20px;
}
.matreshka-404-products .product-card-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}
.matreshka-404-products .product-card p {
	max-width: 100% !important;
}

@media (max-width: 1200px) {
	.matreshka-404-products { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
	.matreshka-404-products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.matreshka-404-products { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
@media (max-width: 576px) {
	.matreshka-404 {
		padding: 40px 16px 24px;
	}
	.matreshka-404__card {
		padding: 36px 20px;
		border-radius: 20px;
	}
	.matreshka-404__img {
		max-width: 180px;
	}
	.matreshka-404__code {
		font-size: 56px;
	}
	.matreshka-404__title {
		font-size: 20px;
	}
	.matreshka-404__text {
		font-size: 14px;
	}
	.matreshka-404__btn {
		padding: 12px 28px;
		font-size: 15px;
	}
}
@media (max-width: 480px) {
	.matreshka-404-products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
</style>

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

	<!-- ── 404 hero ──────────────────────────────── -->
	<section class="matreshka-404">
		<div class="matreshka-404__card">
			<img
				src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/cartzero.png' ); ?>"
				alt="Страница не найдена"
				class="matreshka-404__img"
			>
			<div class="matreshka-404__code montserrat-extrabold">404</div>
			<h1 class="matreshka-404__title montserrat-bold">Страница не найдена</h1>
			<p class="matreshka-404__text montserrat-medium">
				К сожалению, запрашиваемая страница не существует или была перемещена. Вернитесь на главную и продолжите покупки.
			</p>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="matreshka-404__btn montserrat-bold">
				На главную
			</a>
		</div>
	</section>

	<!-- ── Categories grid ───────────────────────── -->
	<?php
	$product_categories = get_terms( array(
		'taxonomy'   => 'product_cat',
		'hide_empty' => true,
		'pad_counts' => true,
		'parent'     => 0,
	) );

	if ( ! empty( $product_categories ) && ! is_wp_error( $product_categories ) ) : ?>
	<section>
		<div class="container">
			<h2 class="montserrat-semibold shop-title">Каталог товаров</h2>
			<div class="container-categories">
				<?php foreach ( $product_categories as $category ) :
					if ( $category->slug === 'misc' ) continue;
					$category_link = get_term_link( $category );
					$bg_styles     = matreshka_get_category_background_styles( $category->term_id );
				?>
					<a href="<?php echo esc_url( $category_link ); ?>"
					   class="btn btn-category montserrat-medium"
					   <?php echo $bg_styles['inline_style']; ?>>
						<?php echo esc_html( $category->name ); ?>
					</a>
				<?php endforeach; ?>
			</div>
		</div>
	</section>
	<?php endif; ?>

	<!-- ── Popular products grid (10 items) ──────── -->
	<?php
	$args = array(
		'post_type'      => 'product',
		'posts_per_page' => 10,
		'post_status'    => 'publish',
		'meta_key'       => 'total_sales',
		'orderby'        => 'meta_value_num',
		'order'          => 'DESC',
	);
	$popular_products = new WP_Query( $args );

	if ( $popular_products->have_posts() ) : ?>
	<section>
		<div class="container" style="padding-bottom: 60px;">
			<h2 class="montserrat-semibold shop-title">Популярные товары</h2>
			<div class="matreshka-404-products">
				<?php while ( $popular_products->have_posts() ) : $popular_products->the_post();
					global $product;

					$product_id    = get_the_ID();
					$product_link  = get_permalink();
					$product_image = wp_get_attachment_image_url( $product->get_image_id(), 'woocommerce_thumbnail' );
					$product_title = get_the_title();
					$weight        = $product->get_weight();
					$weight_text   = $weight ? $weight . 'г' : '';

					$is_liked  = matreshka_is_in_wishlist( $product_id );
					$like_icon = $is_liked
						? get_template_directory_uri() . '/assets/icons/Heart.svg'
						: get_template_directory_uri() . '/assets/icons/like.svg';
				?>
					<div class="product-card" data-product-id="<?php echo esc_attr( $product_id ); ?>">
						<a class="link-product" href="<?php echo esc_url( $product_link ); ?>">
							<div class="product-card-img">
								<?php echo matreshka_get_product_card_image_html( $product, $product_title ); ?>
							</div>
							<p class="montserrat-medium"><?php echo esc_html( $product_title ); ?></p>
							<?php if ( $weight_text ) : ?>
								<span class="montserrat-medium"><?php echo esc_html( $weight_text ); ?></span>
							<?php endif; ?>
						</a>
						<div class="product-card-bottom">
							<?php echo matreshka_get_product_price_html( $product ); ?>
							<img src="<?php echo esc_url( $like_icon ); ?>"
							     alt="like icon"
							     class="like-icon <?php echo $is_liked ? 'active' : ''; ?>">
						</div>
						<button class="btn w-100 btn-secondary montserrat-bold add-to-cart-btn"
						        data-product_id="<?php echo esc_attr( $product_id ); ?>"
						        data-product_sku="<?php echo esc_attr( $product->get_sku() ); ?>">
							В корзину
						</button>
					</div>
				<?php endwhile;
				wp_reset_postdata(); ?>
			</div>
		</div>
	</section>
	<?php endif; ?>

</main>

<?php
get_footer();