<?php
/**
 * Services Section — Carousel Layout.
 *
 * @package electrical_services
 */

if ( ! get_theme_mod( 'electrical_services_enable_services_section', false ) ) {
	return;
}

// ── Section-level settings ────────────────────────────────────────────────────
$electrical_services_sv_bg_text    = get_theme_mod( 'electrical_services_services_bg_heading', '' );
$electrical_services_sv_title      = get_theme_mod( 'electrical_services_services_section_title', '' );
$electrical_services_sv_category   = get_theme_mod( 'electrical_services_services_category', '' );

$electrical_services_query_args = array(
	'post_type'           => 'post',
	'post_status'         => 'publish',
	'posts_per_page'      => 6,
	'ignore_sticky_posts' => true,
	'no_found_rows'       => true,
);

if ( ! empty( $electrical_services_sv_category ) ) {
	$electrical_services_query_args['category_name'] = sanitize_title( $electrical_services_sv_category );
}

// ── Services posts ────────────────────────────────────────────────────────────
$electrical_services_blog_query = new WP_Query( $electrical_services_query_args );
?>
<section id="electrical_services_services_section" class="cm-services-section">
	<?php if ( is_customize_preview() ) : ?>
		<?php electrical_services_section_link( 'electrical_services_services_section' ); ?>
	<?php endif; ?>

	<div class="asterthemes-wrapper">

		<header class="cm-services__header">
			<?php if ( ! empty( $electrical_services_sv_bg_text ) ) : ?>
				<span class="cm-services__badge"><?php echo esc_html( $electrical_services_sv_bg_text ); ?></span>
			<?php endif; ?>
			<?php if ( ! empty( $electrical_services_sv_title ) ) : ?>
				<h2 class="cm-services__title"><?php echo esc_html( $electrical_services_sv_title ); ?></h2>
			<?php endif; ?>
		</header>

		<?php if ( $electrical_services_blog_query->have_posts() ) : ?>
		<div class="cm-services__carousel owl-carousel">
			<?php
			while ( $electrical_services_blog_query->have_posts() ) :
				$electrical_services_blog_query->the_post();
				$electrical_services_image_id  = get_post_thumbnail_id();
				$electrical_services_cats      = get_the_category();
				$electrical_services_cat_label = ! empty( $electrical_services_cats ) ? $electrical_services_cats[0]->name : '';
			?>
			<div class="cm-services__slide">
				<article class="cm-services__card">

					<div class="cm-services__card-bg">
						<?php
						if ( ! empty( $electrical_services_image_id ) ) {
							echo wp_get_attachment_image(
								$electrical_services_image_id,
								'large',
								false,
								array(
									'class'    => 'cm-services__card-bg-img',
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
						} else {
							?>
							<img 
								src="<?php echo esc_url( get_template_directory_uri() . '/resource/img/services-default.png' ); ?>" 
								class="cm-services__card-bg-img" 
								alt=""
								loading="lazy"
								decoding="async"
							/>
							<?php
						}
						?>
					</div>

					<div class="cm-services__card-overlay" aria-hidden="true"></div>

					<div class="cm-services__card-info">
						<div class="cm-services__card-info-text">
							<?php if ( ! empty( $electrical_services_cat_label ) ) : ?>
								<span class="cm-services__card-cat"><?php echo esc_html( $electrical_services_cat_label ); ?></span>
							<?php endif; ?>
							<h3 class="cm-services__card-title">
								<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
							</h3>
						</div>
						<a href="<?php the_permalink(); ?>" class="cm-services__card-arrow" aria-label="<?php esc_attr_e( 'Read more', 'electrical-services' ); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
						</a>
					</div>

				</article>
			</div>
			<?php endwhile; ?>
			<?php wp_reset_postdata(); ?>
		</div><!-- .cm-services__carousel -->
		<?php endif; ?>

	</div><!-- .asterthemes-wrapper -->
</section><!-- #electrical_services_services_section -->