<?php if (get_theme_mod('display_pages', true)) : ?>
	<section id="chic_lifestyle_pages_select_sections" class="home-pages spacer py-48">
		<div class="container">

			<?php
			$cards = get_theme_mod('chic_lifestyle_select_pages', []);
			$section_title = get_theme_mod('pages_section_title');
			?>

			<?php if (!empty($cards)) : ?>
				<h2 class="text-start"><?php echo esc_html($section_title); ?></h2>

				<div class="d-flex flex-column flex-sm-row gap-12">

					<?php foreach ($cards as $card) : ?>

						<?php
						// Resolve page (optional)
						$page_id = $card['card_page'] ?? 0;

						// Resolve image (priority: card image → page thumbnail)
						$image_url = '';

						if (!empty($card['card_image'])) {
							$img = wp_get_attachment_image_src((int) $card['card_image'], 'large');
							$image_url = $img[0] ?? '';
						} elseif ($page_id) {
							$img = wp_get_attachment_image_src(get_post_thumbnail_id($page_id), 'large');
							$image_url = $img[0] ?? '';
						}

						// Link & title
						$link  = !empty($card['card_url'])
							? esc_url($card['card_url'])
							: ($page_id ? get_permalink($page_id) : '#');

						$title = !empty($card['card_text'])
							? $card['card_text']
							: ($page_id ? get_the_title($page_id) : __('Button', 'chic-lifestyle'));
						?>

						<div class="flex-1 h-280">
							<a href="<?php echo $link; ?>" class="page-card position-relative h-280 overflow-hidden d-block text-decoration-none">

								<div class="page-card-bg bg-info bg-opacity-50 background-size-cover background-position-center w-p100 h-p100"
									style="<?php echo $image_url
														? 'background-image:url(' . esc_url($image_url) . ');'
														: ''; ?>">
								</div>

								<div class="page-home-summary position-absolute start-50 top-50 text-center border border-primary bg-white py-8 px-28">
									<span class="m-0 text-primary text-uppercase fs-6"><?php echo esc_html($title); ?></span>
								</div>

							</a>
						</div>

					<?php endforeach; ?>

				</div>
			<?php endif; ?>

		</div>
	</section>
	<style>
		.page-home-summary {
			transform: translate(-50%);
		}
		.page-home-summary:hover {
			background-color: var(--primary-color) !important;
			color: #fff !important;
			border-color: #fff !important;
			transition: all 0.3s ease-in-out;
		}
		.page-home-summary:hover span {
			color: #fff !important;
			transition: all 0.3s ease-in-out;
		}
	</style>
<?php endif; ?>