<?php
/**
 * Hero section — cinematic split-screen redesign 2026
 *
 * Fields loaded from Carbon Fields tab "🖼️ Герой (баннер)".
 * Город и адрес — из Настроек филиала (branch_city_prep, branch_address).
 *
 * @package Dekart
 */

$post_id       = get_the_ID();
$page_breadcrumbs = carbon_get_post_meta( $post_id, 'page_breadcrumbs' );

// Поля из Carbon Fields (вкладка "🖼️ Герой")
$banner_img_id = carbon_get_post_meta( $post_id, 'banner_image' );
$h1            = carbon_get_post_meta( $post_id, 'banner_h1' );
$subtitle      = carbon_get_post_meta( $post_id, 'banner_subtitle' );
$scarcity      = carbon_get_post_meta( $post_id, 'banner_scarcity' );

// Город и адрес из Настроек филиала
$branch_city    = get_option( 'branch_city_prep', 'в Щёлково' );
$branch_address = get_option( 'branch_address', 'ул. Комсомольская, 11' );
?>
<section class="hero-pksh" aria-label="Hero">

	<!-- ── Background layers ── -->
	<div class="hero-pksh__bg" aria-hidden="true">
		<div class="hero-pksh__blob hero-pksh__blob--1"></div>
		<div class="hero-pksh__blob hero-pksh__blob--2"></div>
		<div class="hero-pksh__blob hero-pksh__blob--3"></div>
		<div class="hero-pksh__pattern"></div>
	</div>

	<!-- ── Breadcrumbs ── -->
	<?php if ( ! empty( $page_breadcrumbs ) ) : ?>
		<nav class="hero-pksh__breadcrumbs container" aria-label="Хлебные крошки">
			<ul class="breadcrumbs">
				<li>
					<a href="<?php echo esc_url( home_url() ); ?>/" class="home fa-home" title="Главная страница">
						<span style="display:none;">Главная</span>
						<svg width="21" height="16" viewBox="0 0 21 16" fill="none">
							<path d="M11.6473 10.6896H12.1473V11.1896V15.4691H16.4353C16.5143 15.4691 16.5756 15.4462 16.6432 15.3788C16.7108 15.3113 16.7333 15.2505 16.7333 15.1725V9.36976L10.0513 3.8712L3.36922 9.36976V15.1725C3.36922 15.2505 3.39178 15.3113 3.45937 15.3788C3.52698 15.4462 3.5883 15.4691 3.66723 15.4691H7.95527V11.1896V10.6896H8.45527H11.6473ZM10.3711 1.74407L18.9226 8.86174L19.5643 8.09722L16.9141 5.8987L16.7333 5.74874V5.51388V0.537319H14.5413V2.86272V3.93127L13.7209 3.2466L10.6815 0.709949C10.5114 0.572829 10.3095 0.499981 10.0513 0.499981C9.79293 0.499981 9.59094 0.572914 9.42075 0.710194L0.538196 8.09712L1.17996 8.86174L9.73142 1.74407L10.0513 1.47783L10.3711 1.74407Z" fill="currentColor" stroke="currentColor"/>
						</svg>
					</a>
				</li>
				<?php foreach ( $page_breadcrumbs as $index => $item ) :
					$breadcrumbs_name = $item['breadcrumbs_name'];
					$breadcrumbs_link = $item['breadcrumbs_link'];
					$is_last          = ( $index === count( $page_breadcrumbs ) - 1 );
				?>
					<li>
						<?php if ( $is_last ) : ?>
							<span class="last_item"><?php echo esc_html( $breadcrumbs_name ); ?></span>
						<?php else : ?>
							<a href="<?php echo esc_url( $breadcrumbs_link ); ?>" title="<?php echo esc_attr( $breadcrumbs_name ); ?>">
								<?php echo esc_html( $breadcrumbs_name ); ?>
							</a>
						<?php endif; ?>
					</li>
				<?php endforeach; ?>
			</ul>
		</nav>
	<?php endif; ?>

	<!-- ── Main hero layout: split screen ── -->
	<div class="hero-pksh__layout">

		<!-- ====== LEFT COLUMN: Content ====== -->
		<div class="hero-pksh__content">

			<!-- Address pill -->
			<div class="hero-pksh__address">
				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
				<span><?php echo esc_html( $branch_address ); ?> — центр <?php echo esc_html( str_replace( array( 'в ', 'В ' ), '', $branch_city ) ); ?></span>
			</div>

			<!-- Main headline -->
			<h1 class="hero-pksh__title">
				<?php echo esc_html( $h1 ?: 'Подготовка к школе в Щёлково' ); ?>
			</h1>

			<!-- Subtitle -->
			<?php if ( '' !== $subtitle ) : ?>
				<p class="hero-pksh__subtitle"><?php echo esc_html( $subtitle ); ?></p>
			<?php endif; ?>

			<!-- CTA + Scarcity -->
			<div class="hero-pksh__actions">
				<button class="hero-pksh__cta btn-write">Записаться на бесплатное пробное</button>
				<div class="hero-pksh__scarcity">
					<?php echo wp_kses_post( $scarcity ?: '🔥 Осталось <strong>2 места из 8</strong> в группе 5–6 лет. Стартуем <strong>1 июня</strong>' ); ?>
				</div>
			</div>

			<!-- Trust bar -->
			<div class="hero-pksh__trust">
				<div class="hero-pksh__trust-item">
					<span class="hero-pksh__trust-icon">⭐</span>
					<span class="hero-pksh__trust-label">Рейтинг <strong>4.8</strong></span>
				</div>
				<div class="hero-pksh__trust-item">
					<span class="hero-pksh__trust-icon">🎓</span>
					<span class="hero-pksh__trust-label"><strong>500+</strong> выпускников</span>
				</div>
				<div class="hero-pksh__trust-item">
					<span class="hero-pksh__trust-icon">📜</span>
					<span class="hero-pksh__trust-label">Гослицензия</span>
				</div>
				<div class="hero-pksh__trust-item">
					<span class="hero-pksh__trust-icon">🛡️</span>
					<span class="hero-pksh__trust-label">Гарантия результата</span>
				</div>
			</div>

		</div>

		<!-- ====== RIGHT COLUMN: Photo of children + floating badges ====== -->
		<div class="hero-pksh__visual">

			<!-- Purple glow backdrop -->
			<div class="hero-pksh__visual-glow" aria-hidden="true"></div>

			<!-- Hero photo — the emotional anchor -->
			<div class="hero-pksh__photo-wrap">
				<div class="hero-pksh__photo-frame">
					<?php if ( $banner_img_id ) : ?>
						<?php echo wp_get_attachment_image( $banner_img_id, 'full', false, array(
							'class'    => 'hero-pksh__photo',
							'loading'  => 'eager',
							'decoding' => 'async',
						) ); ?>
					<?php else : ?>
					<img
						src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/girl_and_a_boy.webp' ); ?>"
						alt="Девочка и мальчик — весёлые занятия подготовкой к школе"
						class="hero-pksh__photo"
						loading="eager"
						decoding="async"
						width="689"
						height="689"
					/>
					<?php endif; ?>
				</div>
				<!-- Photo accent glow ring -->
				<div class="hero-pksh__photo-ring" aria-hidden="true"></div>
			</div>

			<!-- Floating badges — sticky-note style around photo -->
			<div class="hero-pksh__float hero-pksh__float--1">
				<span class="hero-pksh__float-icon">👩‍🏫</span>
				<span>Педагоги с опытом 15+ лет</span>
			</div>
			<div class="hero-pksh__float hero-pksh__float--2">
				<span class="hero-pksh__float-icon">🎮</span>
				<span>Игровая методика</span>
			</div>
			<div class="hero-pksh__float hero-pksh__float--3">
				<span class="hero-pksh__float-icon">📚</span>
				<span>Авторская программа</span>
			</div>
			<div class="hero-pksh__float hero-pksh__float--4">
				<span>🌟 Рейтинг <strong>4.8</strong></span>
			</div>

			<!-- Decorative shapes -->
			<div class="hero-pksh__deco hero-pksh__deco--1" aria-hidden="true"></div>
			<div class="hero-pksh__deco hero-pksh__deco--2" aria-hidden="true"></div>
			<div class="hero-pksh__deco hero-pksh__deco--3" aria-hidden="true"></div>
			<div class="hero-pksh__deco hero-pksh__deco--4" aria-hidden="true"></div>

			<!-- Sparkle particles -->
			<div class="hero-pksh__sparkle" aria-hidden="true"></div>
			<div class="hero-pksh__sparkle" aria-hidden="true"></div>
			<div class="hero-pksh__sparkle" aria-hidden="true"></div>
			<div class="hero-pksh__sparkle" aria-hidden="true"></div>
			<div class="hero-pksh__sparkle" aria-hidden="true"></div>

		</div>

	</div>

</section>
