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

$service_query = new WP_Query(
	array(
		'post_type'      => 'service',
		'posts_per_page' => 6,
		'post_status'    => 'publish',
		'no_found_rows'  => true,
	)
);
if ( ! $service_query->have_posts() ) {
	return;
}
?>
<section id="services" class="b2b-section services-section" style="padding-bottom: 5rem;">
	<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>
		<div
			class="b2b-carousel services-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="capability-grid b2b-carousel-track">
					<?php
					$count       = 1;
					$total_items = $service_query->post_count;
					while ( $service_query->have_posts() ) :
						$service_query->the_post();
						$fallback = 'products/placeholder-0' . ( $count < 10 ? $count : 1 ) . '.svg';
						?>
						<article
							class="capability-card b2b-carousel-slide"
							role="group"
							aria-roledescription="slide"
							aria-label="<?php echo esc_attr( sprintf( '%1$d / %2$d', $count, $total_items ) ); ?>"
						>
							<div class="capability-image"><a href="<?php the_permalink(); ?>"><?php echo fragrance_trade_service_card_image( get_the_ID(), $fallback ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></a></div>
							<div class="capability-body">
								<p class="capability-label"><?php esc_html_e( '贴膜服务', 'fragrance-trade' ); ?></p>
								<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
								<p><?php echo esc_html( get_the_excerpt() ); ?></p>
								<a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" class="btn btn-b2b-outline"><?php esc_html_e( '联系门店', 'fragrance-trade' ); ?></a>
							</div>
						</article>
						<?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( '/services/' ) ); ?>" class="btn btn-b2b-primary"><?php esc_html_e( '查看全部服务项目', 'fragrance-trade' ); ?></a>
		</div>
	</div>
</section>
