<?php
/*
Template Name: Шаблон страницы Продленка
*/
?>
<?php

get_header();
$term = get_queried_object();
$post_id = get_the_ID();
?>

<main class="as-container">
   <?php
   $banner_img = carbon_get_post_meta($post_id, 'banner_img_desktop');
   $banner_mobile = carbon_get_post_meta( $post_id, 'banner_img_mobile' );
   if ($banner_mobile == '') $banner_mobile = $banner_img;
   $banner_title = carbon_get_post_meta($post_id, 'banner_h1');
   ?>

   <section class="as-banner">
		<picture class="banner-main-page_img">
			<source srcset="<?php echo wp_get_attachment_url($banner_img); ?>" media="(min-width: 780px)">
			<img src="<?php echo wp_get_attachment_url($banner_mobile); ?>" alt="<?php echo get_post_meta( $banner_img, '_wp_attachment_image_alt', true ); ?>">
		</picture>
      <h1 class="as-banner_title"><?php echo $banner_title; ?></h1>
      <div class="as-banner_blocks">
         <div class="as_block1">Выполнение домашних заданий, маленькие группы и забота о детях.<br><span>Для 1–4
               классов.</span>Освободите время для своих дел!</div>
         <div class="as_block2">Забираем детей от школы №3, Гимназии №2, Гимназии №2 корпус "Солнечный"</div>
         <div class="as_block3">
			<p>Наш адрес:<span><?php echo carbon_get_post_meta($post_id, 'as_address' ); ?></span></p>
			
		</div>
      </div>
   </section>

  
   <!-- БЛОК о продленке -->
   <section class="as-lsi-description" style="padding: 40px 0; background: #fff;">
      <div class="container">
         <div class="as_description" style="max-width: 900px; margin: 0 auto; text-align: justify; line-height: 1.7; font-size: 18px; color: #333; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;">
            <p>В образовательном центре <strong>"Декарт"</strong> в Щёлково мы предлагаем больше, чем просто продленку – это полноценная программа <strong>обучения</strong> и <strong>развития</strong> для <strong>школьников</strong>. Мы гарантируем полную <strong>безопасность</strong> каждого ребенка, уделяя особое <strong>внимание</strong> созданию комфортной и поддерживающей среды. Наши высококвалифицированные <strong>педагоги</strong> профессионально помогают с <strong>домашними заданиями</strong>, объясняя сложные темы и закрепляя пройденный материал, чтобы у вас больше не возникало сложностей по вечерам. Помимо академической успеваемости, мы активно вовлекаем детей в увлекательные <strong>внеурочные занятия</strong> и мастер-классы, способствующие всестороннему развитию личности. Через <strong>творчество</strong> и участие в разнообразных активностях в нашем <strong>центре</strong> дети смогут раскрыть свой потенциал. Присоединяйтесь к нам, чтобы каждый день вашего ребенка был наполнен смыслом и пользой!</p>
         </div>
      </div>
   </section>

   <!-- ГЛАВНЫЙ CTA БЛОК -->
   <section class="as-main-cta" style="background-color: #f0f7ff; padding: 50px 0; text-align: center; border-top: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed;">
       <div class="container">
           <h2 class="as_title" style="margin-bottom: 25px;">Запишитесь на бесплатный пробный день продленки!</h2>
           <button class="btn-write-camp" style="background-color: #0088ff; color: #fff; border: none; padding: 20px 45px; font-size: 22px; font-weight: 800; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 136, 255, 0.4); text-transform: uppercase; transition: 0.3s;">
               Записаться на пробный день
           </button>
           <p style="margin-top: 15px; color: #555; font-size: 15px;">Узнайте стоимость и наличие мест за 2 минуты</p>
       </div>
   </section>

   <!-- ПРЕИМУЩЕСТВА -->
   <section class="as-advantages">
      <h2 class="as_title">Почему родители доверяют нам своих детей?</h2>
      <p class="as_description">Преимущества нашей продленки в Щёлково</p>
      
	  <ul class="as-advantages-wrapper mobile">
		<li>Профессиональный присмотр и помощь с уроками.</li>
		<li>Развивающие активности и кружки.</li>
		<li>Комфортная и дружелюбная атмосфера.</li>
		<li>Гибкий график и удобное расположение.</li>
	  </ul>

      <div class="as-advantages-wrapper desktop">
         <div class="as-advantages__item">
            <div class="as-advantages__item_logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L1 7L11 12L21 7L12 2Z" stroke="#121417" stroke-width="2"/><path d="M1 12L11 17L21 12" stroke="#121417" stroke-width="2"/><path d="M1 17L11 22L21 17" stroke="#121417" stroke-width="2"/></svg>
            </div>
            <h3 class="as-advantages__item_title">Помощь с уроками</h3>
            <p class="as-advantages__item_description">Опытные педагоги гарантируют безопасное нахождение и эффективную помощь в выполнении домашних заданий.</p>
         </div>
         <div class="as-advantages__item">
            <div class="as-advantages__item_logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" stroke="#121417" stroke-width="2"/></svg>
            </div>
            <h3 class="as-advantages__item_title">Развитие и досуг</h3>
            <p class="as-advantages__item_description">После уроков дети занимаются творчеством, посещают интеллектуальные игры и развивающие занятия.</p>
         </div>
         <div class="as-advantages__item">
            <div class="as-advantages__item_logo">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#121417" stroke-width="2"/><path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14" stroke="#121417" stroke-width="2"/><path d="M9 9H9.01" stroke="#121417" stroke-width="2"/><path d="M15 9H15.01" stroke="#121417" stroke-width="2"/></svg>
            </div>
            <h3 class="as-advantages__item_title">Добрая атмосфера</h3>
            <p class="as-advantages__item_description">Мы создаем среду, где каждый ребенок чувствует себя частью коллектива и находит друзей.</p>
         </div>
         <div class="as-advantages__item">
            <div class="as-advantages__item_logo">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#121417" stroke-width="2"/><path d="M12 6V12L16 14" stroke="#121417" stroke-width="2"/></svg>
            </div>
            <h3 class="as-advantages__item_title">Удобный график</h3>
            <p class="as-advantages__item_description">Выбирайте удобное время посещения. Наше расположение в центре Щёлково удобно для всех.</p>
         </div>
      </div>
   </section>

   <!-- СЕКЦИЯ АКТИВНОСТЕЙ (ИСПРАВЛЕНО ЦЕНТРОВАНИЕ) -->
   <section class="as-advantages activities">
      <h2 class="as_title">Наши активности</h2>
      <p class="as_description">Интересный день в дружественной среде с выполненными уроками и без гаджетов!</p>
      <div class="as-advantages-wrapper as-activities-wrapper">
         <div class="as-activities__item" style="text-align: center; display: flex; flex-direction: column; align-items: center;">
            <div class="as-activities__item_logo" style="margin-bottom: 15px;">
               <img loading="lazy" width="180" height="173" src="<?php echo get_template_directory_uri(); ?>/assets/images/06945baa588ba69c212cf79ba922a8dd79ae62f7.webp" alt="Наука">
            </div>
            <h3 class="as-advantages__item_title" style="text-align: center; width: 100%;">Научные эксперименты</h3>
            <p class="as-advantages__item_description" style="text-align: center; width: 100%;">Наука своими руками</p>
         </div>
         <div class="as-activities__item" style="text-align: center; display: flex; flex-direction: column; align-items: center;">
            <div class="as-activities__item_logo" style="margin-bottom: 15px;">
               <img loading="lazy" width="180" height="173" src="<?php echo get_template_directory_uri(); ?>/assets/images/45060977e7ba4589b733a6e93d888e6729a4aa3a.webp" alt="Творчество">
            </div>
            <h3 class="as-advantages__item_title" style="text-align: center; width: 100%;">Творческая мастерская</h3>
            <p class="as-advantages__item_description" style="text-align: center; width: 100%;">Рисуем, лепим, мастерим</p>
         </div>
         <div class="as-activities__item" style="text-align: center; display: flex; flex-direction: column; align-items: center;">
            <div class="as-activities__item_logo" style="margin-bottom: 15px;">
               <img loading="lazy" width="180" height="173" src="<?php echo get_template_directory_uri(); ?>/assets/images/a86e2bc9b936c8708f1fc4769cc9e82560ffd2ed.webp" alt="Уроки">
            </div>
            <h3 class="as-advantages__item_title" style="text-align: center; width: 100%;">Домашнее задание</h3>
            <p class="as-advantages__item_description" style="text-align: center; width: 100%;">Выполняем домашнее задание</p>
         </div>
         <div class="as-activities__item" style="text-align: center; display: flex; flex-direction: column; align-items: center;">
            <div class="as-activities__item_logo" style="margin-bottom: 15px;">
               <img loading="lazy" width="180" height="173" src="<?php echo get_template_directory_uri(); ?>/assets/images/350761753bfc001c4108be499b96be4eb6114a74.webp" alt="Спорт">
            </div>
            <h3 class="as-advantages__item_title" style="text-align: center; width: 100%;">Спорт и игры</h3>
            <p class="as-advantages__item_description" style="text-align: center; width: 100%;">Физическая активность</p>
         </div>
      </div>
   </section>

	<button class="promo__block_btn-action btn-write-camp mobile" style="margin: 20px auto 0;">Записаться на встречу</button>

   <!-- ПЕДАГОГИ -->
   <section class="as-advantages as-teachers">
      <h2 class="as_title">Встречайте наших педагогов</h2>
      <div class="as-advantages-wrapper">
		<?php 
		$mentors = carbon_get_post_meta($post_id, 'as_mentors' );
		if($mentors):
		foreach ($mentors as $item) { 
			$mentor_foto = $item['mentor_foto'];
			$mentor_name = $item['mentor_name'];
			$mentor_directions = $item['mentor_directions'];
		?>
			 <div class="as-teachers__item">
				<div class="as-teachers__item_logo">
					<img loading="lazy" width="140" height="140" src="<?php echo wp_get_attachment_url($mentor_foto); ?>" alt="<?php echo $mentor_name; ?>">
				</div>
				<h3 class="as-advantages__item_title"><?php echo $mentor_name; ?></h3>
				<p class="as-advantages__item_description"><?php echo $mentor_directions; ?></p>
			 </div>
			<?php } endif; ?>
      </div>
   </section>

   <section class="as-advantages as-schedule">
      <h2 class="as_title">Расписание</h2>
      <div class="as-schedule-wrapper">
		<?php echo carbon_get_post_meta($post_id, 'as_routine' ); ?>
      </div>
   </section>

   <section class="as-advantages as-price">
      <h2 class="as_title">Цены</h2>
      <div class="as-price__block">
         <p><?php echo carbon_get_post_meta($post_id, 'as_price' ); ?></p>
         <span style="font-size: 14px;">за неделю</span>
      </div>
      <div class="as-price__block">
         <p class="as-price_title">Условия оплаты</p>
         <span>Оплата производится до дня начала недельной смены. Можно оплатить сразу за месяц. Мы принимаем карты, СБП, наличные.</span>
      </div>
      <img loading="lazy" width="500" height="48" class="as-price_img" src="<?php echo get_template_directory_uri(); ?>/assets/images/dcb8dd0b50095e09a7ea19f6f08fa3828566cf46.webp" alt="Оплата">
   </section>

   <div class="promo__block desktop">
      <p class="promo__block_text">Узнайте больше о продлёнке — приходите на встречу!<span>Осталось 8 мест!</span></p>
      <button class="promo__block_btn-action btn-write-camp">Записаться на встречу</button>
   </div>

   <!-- ОТЗЫВЫ -->
   <section class="as-advantages as-reviews">
      <h2 class="as_title">Отзывы наших клиентов</h2>
		<div class="as-reviews-wrapper as-desctop">
			<div class='swiper as-reviews-owl'>
				<div class='swiper-wrapper'>
				<?php
				$reviews = carbon_get_post_meta($post_id, 'as_reviews' );
				if($reviews):
				foreach ($reviews as $item) { 
					$review_name = $item['review_name'];
					$avatar = $item['review_avatar'];
					$review_text = $item['review_text'];
                ?>
					<div class="swiper-slide reviews__item">
							<div class="reviews__item-wrapper">
								 <div class="reviews__item-client">
									<div class="reviews__item-client_avatar" style="background: #e3f2fd;">
										<?php if ($avatar) : ?>
											<img loading="lazy" width="57" height="57" src="<?php echo wp_get_attachment_url($avatar); ?>" alt="avatar">
										<?php endif; ?>
									</div>
									<div class="reviews__item-client_data">
										<div class="reviews__item-client_name"><?php echo $review_name; ?></div>
									</div>
								</div>
								<div class="reviews__item-client_text">
									<?php echo $review_text; ?>
								</div>
							</div>
					</div>
					<?php } endif; ?>
				</div>
			</div>
			<div class='custom-button-next reviews-owl-next custom-button'></div>
			<div class='custom-button-prev reviews-owl-prev custom-button'></div>
		</div>
   </section>

   <!-- FAQ -->
	<section class="as-advantages as-faq">
		<h2 class="as_title">Вопросы и ответы</h2>
		<div class="as-faq-wrapper">
		<?php 
			$questions = carbon_get_post_meta($post_id, 'as_questions' );
            $HTMcol = '';
			if($questions):
			foreach ($questions as $item) { 
				$q = $item['questions_question'];
				$a = $item['questions_answer'];
				$HTMcol .= "<div class='box__accordion'>
						  <div class='box__accordion_label'><span>$q</span></div>
						  <div class='box__accordion_content'>
							 <div class='box__accordion_content-text'>$a</div>
						  </div>
					   </div>";
			} endif;
			echo "<div class='accordion'>$HTMcol</div>";
			?>
		</div>
   </section>

   <!-- ФИНАЛЬНЫЙ CTA БЛОК ПЕРЕД ФУТЕРОМ -->
   <section class="as-final-cta" style="background: linear-gradient(135deg, #ff8800 0%, #ff5500 100%); padding: 60px 0; text-align: center; color: #fff; margin-top: 40px;">
       <div class="container">
           <h2 style="font-size: 28px; font-weight: 900; margin-bottom: 20px; color: #fff;">Осталось всего 8 свободных мест!</h2>
           <p style="font-size: 18px; margin-bottom: 30px; opacity: 0.9;">Запишитесь на встречу сегодня, чтобы закрепить место за вашим ребенком</p>
           <button class="btn-write-camp" style="background-color: #fff; color: #ff5500; border: none; padding: 20px 50px; font-size: 20px; font-weight: 900; border-radius: 50px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: 0.3s; text-transform: uppercase;">
               Хочу на продленку!
           </button>
       </div>
   </section>

   <section class="as-advantages as-map" style="padding-top: 40px;">
      <h2 class="as_title">Наш адрес</h2>
		<div class="location__map">
			<div id="ya-map" style="width: 100%; height: 420px;"></div>	
		</div>
   </section>

</main>

<div class="modal-camp-request-form" style="display: none;">
	<div class="form-wrapper">
		<button class="btn-close-request-form">
			<img class="btn-close-request-form-camp" src="<?php echo get_template_directory_uri(); ?>/assets/images/btn-close-modal.svg" alt="close">
		</button>
		<?php echo carbon_get_post_meta($post_id, 'as_bitrix_script' ); ?>
	</div>
</div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

<script>
	let mapLoad = false;
	window.addEventListener('scroll', function() {
		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
		if (scrollTop > 100 && !mapLoad) {
			ymaps.ready(function() {
				var map = new ymaps.Map("ya-map", {
					center: [<?php echo carbon_get_theme_option( 'site_location' ); ?>],
					zoom: 16 });
				var myPlacemark = new ymaps.Placemark([<?php echo carbon_get_theme_option( 'site_location' ); ?>], {iconContent: 'Декарт'}, {preset: 'islands#redStretchyIcon'});
				map.geoObjects.add(myPlacemark);
			});
			mapLoad = true;		
		} 
	});

const modalCampRequestForm = document.querySelector('.modal-camp-request-form');
document.addEventListener("click", function (event) {
	if (event.target.classList.contains("btn-close-request-form-camp")) {
		modalCampRequestForm.style="display: none;";
	}
	if (event.target.classList.contains("btn-write-camp")) {
		modalCampRequestForm.style="";
	}
});

window.addEventListener('load', function() {
	if (window.innerWidth < 960) {
		const desktopRev = document.querySelector('.as-desctop');
        if(desktopRev) desktopRev.classList.remove('as-desctop');
		new Swiper(".as-reviews-owl", {
			spaceBetween: 12,
			speed: 400,
			slidesPerView: 1.2,
			navigation: { nextEl: ".reviews-owl-next", prevEl: ".reviews-owl-prev" }
		});
	}
	new Swiper(".as-foto-owl", {
		spaceBetween: 20,
		speed: 400,
		slidesPerView: 1.3,
		navigation: { nextEl: ".reviews-foto-next", prevEl: ".reviews-foto-prev" }
	});
});
</script>

<?php get_footer(); ?>