<?php
/**
 * Template Name: Подарочные сертификаты
 *
 * Страница с информацией о подарочных сертификатах Матрёшка.
 * Все тексты и картинки можно редактировать через метабоксы на этой странице.
 */

get_header();

$post_id   = get_the_ID();
$theme_uri = get_template_directory_uri();

// --- Meta fields with defaults ---
$hero_title       = get_post_meta( $post_id, '_gc_hero_title', true ) ?: 'Подарочные сертификаты';
$hero_subtitle    = get_post_meta( $post_id, '_gc_hero_subtitle', true ) ?: 'Подарите близким возможность выбрать лучшие продукты в Матрёшке';
$hero_image       = get_post_meta( $post_id, '_gc_hero_image', true );
$hero_image_url   = $hero_image ? wp_get_attachment_image_url( $hero_image, 'full' ) : $theme_uri . '/assets/img/gift-hero.png';

// Certificates
$cert_1_image  = get_post_meta( $post_id, '_gc_cert_1_image', true );
$cert_1_url    = $cert_1_image ? wp_get_attachment_image_url( $cert_1_image, 'large' ) : '/wp-content/uploads/2026/02/sert_1000.png';
$cert_1_label  = get_post_meta( $post_id, '_gc_cert_1_label', true ) ?: '1 000 ₽';

$cert_2_image  = get_post_meta( $post_id, '_gc_cert_2_image', true );
$cert_2_url    = $cert_2_image ? wp_get_attachment_image_url( $cert_2_image, 'large' ) : '/wp-content/uploads/2026/02/cert_3000.png';
$cert_2_label  = get_post_meta( $post_id, '_gc_cert_2_label', true ) ?: '3 000 ₽';

$cert_3_image  = get_post_meta( $post_id, '_gc_cert_3_image', true );
$cert_3_url    = $cert_3_image ? wp_get_attachment_image_url( $cert_3_image, 'large' ) : '/wp-content/uploads/2026/02/cert_5000.png';
$cert_3_label  = get_post_meta( $post_id, '_gc_cert_3_label', true ) ?: '5 000 ₽';

// How it works
$how_title = get_post_meta( $post_id, '_gc_how_title', true ) ?: 'Как это работает?';
$how_step_1 = get_post_meta( $post_id, '_gc_how_step_1', true ) ?: 'Выберите номинал сертификата: 1 000 ₽, 3 000 ₽ или 5 000 ₽';
$how_step_2 = get_post_meta( $post_id, '_gc_how_step_2', true ) ?: 'Приобретите сертификат на кассе любого магазина Матрёшка';
$how_step_3 = get_post_meta( $post_id, '_gc_how_step_3', true ) ?: 'Подарите красивую карточку — получатель сам выберет любимые продукты';
$how_step_4 = get_post_meta( $post_id, '_gc_how_step_4', true ) ?: 'Сертификат принимается к оплате во всех магазинах сети Матрёшка';

// Why section
$why_title = get_post_meta( $post_id, '_gc_why_title', true ) ?: 'Почему сертификат Матрёшки — идеальный подарок?';
$why_item_1 = get_post_meta( $post_id, '_gc_why_item_1', true ) ?: 'Универсальный — подходит каждому, ведь продукты нужны всем';
$why_item_2 = get_post_meta( $post_id, '_gc_why_item_2', true ) ?: 'Без срочности — можно использовать в удобное время';
$why_item_3 = get_post_meta( $post_id, '_gc_why_item_3', true ) ?: 'Свобода выбора — получатель сам решает, что купить';
$why_item_4 = get_post_meta( $post_id, '_gc_why_item_4', true ) ?: 'Красивый дизайн — не стыдно дарить в подарочном конверте';
$why_item_5 = get_post_meta( $post_id, '_gc_why_item_5', true ) ?: 'Для любого повода — день рождения, праздник, благодарность';
$why_item_6 = get_post_meta( $post_id, '_gc_why_item_6', true ) ?: 'Всегда в наличии — приобретайте прямо на кассе';

// CTA
$cta_title   = get_post_meta( $post_id, '_gc_cta_title', true ) ?: 'Подарите радость уже сегодня!';
$cta_text    = get_post_meta( $post_id, '_gc_cta_text', true ) ?: 'Сертификаты доступны на кассе любого магазина Матрёшка. Просто скажите кассиру нужный номинал — и подарок готов!';
$cta_button  = get_post_meta( $post_id, '_gc_cta_button', true ) ?: 'Найти ближайший магазин';
$cta_link    = get_post_meta( $post_id, '_gc_cta_link', true ) ?: '/contacts/';

$icons_url = $theme_uri . '/assets/icons/';
?>

<link rel="stylesheet" href="<?php echo esc_url( $theme_uri . '/assets/css/gift-certificates.css?v=1.0.0' ); ?>">
<style>.footer, .footer-menu { margin-top: 0; }</style>

<main class="gc-page mt-5">

	<!-- ===== HERO ===== -->
	<section class="gc-hero" style="background-image: url('<?php echo esc_url( $hero_image_url ); ?>');">
		<div class="gc-hero-overlay"></div>
		<div class="container gc-hero-inner">
			<h1 class="gc-hero-title montserrat-bold"><?php echo esc_html( $hero_title ); ?></h1>
			<p class="gc-hero-subtitle montserrat-medium"><?php echo esc_html( $hero_subtitle ); ?></p>
			<a href="#gc-certificates" class="btn btn-red-primary montserrat-bold gc-hero-btn">
				Смотреть сертификаты
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="margin-left:8px;"><path d="M10 3.333v13.334M10 16.667l5-5M10 16.667l-5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
			</a>
		</div>
	</section>

	<!-- ===== CERTIFICATES ===== -->
	<section class="gc-certificates" id="gc-certificates">
		<div class="container">
			<h2 class="gc-section-title montserrat-bold">Выберите номинал</h2>
			<p class="gc-section-desc montserrat-medium">Три варианта на любой бюджет</p>

			<div class="gc-cards-row">
				<img src="<?php echo esc_url( $cert_1_url ); ?>" alt="Сертификат <?php echo esc_attr( $cert_1_label ); ?>" class="gc-cert-img" loading="lazy">
				<img src="<?php echo esc_url( $cert_2_url ); ?>" alt="Сертификат <?php echo esc_attr( $cert_2_label ); ?>" class="gc-cert-img" loading="lazy">
				<img src="<?php echo esc_url( $cert_3_url ); ?>" alt="Сертификат <?php echo esc_attr( $cert_3_label ); ?>" class="gc-cert-img" loading="lazy">
			</div>
		</div>
	</section>

	<!-- ===== HOW IT WORKS ===== -->
	<section class="gc-how">
		<div class="container">
			<h2 class="gc-section-title montserrat-bold"><?php echo esc_html( $how_title ); ?></h2>

			<div class="gc-steps">
				<div class="gc-step">
					<div class="gc-step-num montserrat-bold">1</div>
					<p class="gc-step-text montserrat-medium"><?php echo esc_html( $how_step_1 ); ?></p>
				</div>
				<div class="gc-step-arrow">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M19 12l-5-5M19 12l-5 5" stroke="var(--red-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
				</div>
				<div class="gc-step">
					<div class="gc-step-num montserrat-bold">2</div>
					<p class="gc-step-text montserrat-medium"><?php echo esc_html( $how_step_2 ); ?></p>
				</div>
				<div class="gc-step-arrow">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M19 12l-5-5M19 12l-5 5" stroke="var(--red-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
				</div>
				<div class="gc-step">
					<div class="gc-step-num montserrat-bold">3</div>
					<p class="gc-step-text montserrat-medium"><?php echo esc_html( $how_step_3 ); ?></p>
				</div>
				<div class="gc-step-arrow">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M19 12l-5-5M19 12l-5 5" stroke="var(--red-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
				</div>
				<div class="gc-step">
					<div class="gc-step-num montserrat-bold">4</div>
					<p class="gc-step-text montserrat-medium"><?php echo esc_html( $how_step_4 ); ?></p>
				</div>
			</div>
		</div>
	</section>

	<!-- ===== WHY SECTION ===== -->
	<section class="gc-why">
		<div class="container">
			<h2 class="gc-section-title montserrat-bold"><?php echo esc_html( $why_title ); ?></h2>

			<div class="gc-why-grid">
				<div class="gc-why-item">
					<div class="gc-why-icon">
						<img src="/wp-content/themes/matreshka/assets/icons/loyalty.svg" alt="">
					</div>
					<p class="montserrat-medium"><?php echo esc_html( $why_item_1 ); ?></p>
				</div>
				<div class="gc-why-item">
					<div class="gc-why-icon">
						<img src="/wp-content/themes/matreshka/assets/icons/timelapse.svg" alt="">
					</div>
					<p class="montserrat-medium"><?php echo esc_html( $why_item_2 ); ?></p>
				</div>
				<div class="gc-why-item">
					<div class="gc-why-icon">
						<img src="/wp-content/themes/matreshka/assets/icons/star_shine.svg" alt="">
					</div>
					<p class="montserrat-medium"><?php echo esc_html( $why_item_3 ); ?></p>
				</div>
				<div class="gc-why-item">
					<div class="gc-why-icon">
						<img src="/wp-content/themes/matreshka/assets/icons/redeem.svg" alt="">
					</div>
					<p class="montserrat-medium"><?php echo esc_html( $why_item_4 ); ?></p>
				</div>
				<div class="gc-why-item">
					<div class="gc-why-icon">
						<img src="/wp-content/themes/matreshka/assets/icons/celebration.svg" alt="">
					</div>
					<p class="montserrat-medium"><?php echo esc_html( $why_item_5 ); ?></p>
				</div>
				<div class="gc-why-item">
					<div class="gc-why-icon">
						<img src="/wp-content/themes/matreshka/assets/icons/shopping_bag.svg" alt="">
					</div>
					<p class="montserrat-medium"><?php echo esc_html( $why_item_6 ); ?></p>
				</div>
			</div>
		</div>
	</section>

	<!-- ===== CTA ===== -->
	<section class="gc-cta">
		<div class="container">
			<div class="gc-cta-box">
				<h2 class="gc-cta-title montserrat-bold"><?php echo esc_html( $cta_title ); ?></h2>
				<p class="gc-cta-text montserrat-medium"><?php echo esc_html( $cta_text ); ?></p>
				<a href="<?php echo esc_url( $cta_link ); ?>" class="btn btn-red-primary montserrat-bold gc-cta-btn">
					<?php echo esc_html( $cta_button ); ?>
				</a>
			</div>
		</div>
	</section>

	<!-- ===== PAGE CONTENT (rules / terms — from WP Editor) ===== -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<?php $content = get_the_content(); if ( ! empty( $content ) ) : ?>
		<section class="gc-content">
			<div class="container">
				<div class="gc-content-box">
					<?php the_content(); ?>
				</div>
			</div>
		</section>
		<?php endif; ?>
	<?php endwhile; endif; ?>

	

</main>

<?php get_footer(); ?>