<?php
/** Case teaser on the homepage. @package Fragrance_Trade */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$case_query = new WP_Query(
	array(
		'post_type'      => 'case',
		'posts_per_page' => 6,
		'post_status'    => 'publish',
		'no_found_rows'  => true,
	)
);
?>
<section id="cases" class="b2b-section cases-section">
	<div class="container">
		<div class="section-heading text-center mx-auto">
			<p class="section-eyebrow"><?php esc_html_e( '施工记录', 'fragrance-trade' ); ?></p>
			<h2><?php esc_html_e( '从案例了解不同项目的实际效果', 'fragrance-trade' ); ?></h2>
		</div>
		<?php if ( $case_query->have_posts() ) : ?>
			<div
				class="b2b-carousel cases-carousel mt-5"
				data-carousel
				data-autoplay="9000"
				data-page-label="<?php esc_attr_e( '转到第 %d 组', 'fragrance-trade' ); ?>"
				role="region"
				aria-roledescription="carousel"
				aria-label="<?php esc_attr_e( '案例作品', 'fragrance-trade' ); ?>"
			>
				<div class="b2b-carousel-viewport">
					<div class="case-grid b2b-carousel-track">
						<?php
						$count       = 1;
						$total_items = $case_query->post_count;
						while ( $case_query->have_posts() ) :
							$case_query->the_post();
							?>
							<a
								class="case-card b2b-carousel-slide"
								href="<?php the_permalink(); ?>"
								role="group"
								aria-roledescription="slide"
								aria-label="<?php echo esc_attr( sprintf( '%1$d / %2$d', $count, $total_items ) ); ?>"
							>
								<?php if ( has_post_thumbnail() ) : ?>
									<?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid', 'loading' => 'lazy', 'decoding' => 'async' ) ); ?>
								<?php else : ?>
									<img src="<?php echo esc_url( fragrance_trade_asset_uri( 'images/products/placeholder-01.svg' ) ); ?>" alt="<?php the_title_attribute(); ?>" class="img-fluid" loading="lazy" decoding="async">
								<?php endif; ?>
								<span class="case-card-title"><?php the_title(); ?></span>
							</a>
							<?php
							$count++;
						endwhile;
						wp_reset_postdata();
						?>
					</div>
				</div>
				<div class="b2b-carousel-controls" aria-label="<?php esc_attr_e( '案例作品轮播控制', 'fragrance-trade' ); ?>">
					<button type="button" class="b2b-carousel-arrow b2b-carousel-prev" aria-label="<?php esc_attr_e( '上一组案例', 'fragrance-trade' ); ?>">
						<span aria-hidden="true">←</span>
					</button>
					<div class="b2b-carousel-dots"></div>
					<button type="button" class="b2b-carousel-arrow b2b-carousel-next" aria-label="<?php esc_attr_e( '下一组案例', 'fragrance-trade' ); ?>">
						<span aria-hidden="true">→</span>
					</button>
				</div>
			</div>
			<div class="text-center mt-5">
				<a href="<?php echo esc_url( home_url( '/cases/' ) ); ?>" class="btn btn-b2b-primary"><?php esc_html_e( '查看全部案例', 'fragrance-trade' ); ?></a>
			</div>
		<?php else : ?>
			<p class="text-center mt-4 mb-0"><?php esc_html_e( '案例内容正在整理中。', 'fragrance-trade' ); ?></p>
		<?php endif; ?>
	</div>
</section>
