<?php
/**
 * Template Name: Подготовка к школе (Bento 2026)
 *
 * Асимметричная Bento-сетка. Нейрокопирайтинг.
 * CSS: main.css (секции Bento/Social/Guarantee) + podgotovka-k-shkole.css (переопределения 2026)
 *
 * @package Dekart
 */

get_header();
$post_id = get_the_ID();

// ─── ДАННЫЕ ОРГАНИЗАЦИИ ───
$opt_address     = get_option( 'branch_address' ) ?: carbon_get_theme_option( 'site_address' ) ?: carbon_get_post_meta( $post_id, 'contact_address' ) ?: '';
$opt_coords      = get_option( 'branch_coords' ) ?: carbon_get_post_meta( $post_id, 'contact_location' ) ?: '';
$opt_phone       = get_option( 'branch_phone' ) ?: carbon_get_theme_option( 'site_phone' ) ?: carbon_get_post_meta( $post_id, 'contact_tel' ) ?: '';
$opt_email       = get_option( 'branch_email' ) ?: carbon_get_theme_option( 'site_mail' ) ?: carbon_get_post_meta( $post_id, 'contact_mail' ) ?: '';
$opt_name        = get_option( 'branch_name' ) ?: carbon_get_theme_option( 'site_name' ) ?: 'Декарт';
$opt_social_raw  = get_option( 'branch_social' ) ?: carbon_get_post_meta( $post_id, 'social_media' ) ?: [];
?>

<main class="page page-pksh">

    <?php get_template_part('template-parts/block-banner'); ?>

	<!-- ════════════════════════════════════════════ -->
    <!-- Social Proof — Confidence counters (4 cards) -->
    <!-- ════════════════════════════════════════════ -->
    <?php
    $social_counters = carbon_get_post_meta( $post_id, 'pksh_social_counters' );
    $social_icons    = array( '🎓', '📅', '⭐', '👩‍🏫' );
    ?>
    <section class="bento pksh-section" aria-label="Социальное доказательство">
        <div class="bento__full">
            <div class="social-counters">
                <?php if ( ! empty( $social_counters ) ) : ?>
                    <?php foreach ( $social_counters as $i => $counter ) :
                        $icon   = isset( $social_icons[ $i ] ) ? $social_icons[ $i ] : '✅';
                        $number = $counter['counter_number'] ?? '';
                        $label  = $counter['counter_label'] ?? '';
                        if ( empty( $number ) ) continue;
                    ?>
                    <div class="social-counter">
                        <div class="social-counter__top"></div>
                        <div class="social-counter__body">
                            <span class="social-counter__icon"><?php echo esc_html( $icon ); ?></span>
                            <div class="social-counter__number"><?php echo esc_html( $number ); ?></div>
                            <div class="social-counter__label"><?php echo esc_html( $label ); ?></div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else : ?>
                    <!-- Fallback, если поля не заполнены -->
                    <div class="social-counter">
                        <div class="social-counter__top"></div>
                        <div class="social-counter__body">
                            <span class="social-counter__icon">🎓</span>
                            <div class="social-counter__number">500+</div>
                            <div class="social-counter__label">выпускников в топ-школах</div>
                        </div>
                    </div>
                    <div class="social-counter">
                        <div class="social-counter__top"></div>
                        <div class="social-counter__body">
                            <span class="social-counter__icon">📅</span>
                            <div class="social-counter__number">12</div>
                            <div class="social-counter__label">лет готовим к школе</div>
                        </div>
                    </div>
                    <div class="social-counter">
                        <div class="social-counter__top"></div>
                        <div class="social-counter__body">
                            <span class="social-counter__icon">⭐</span>
                            <div class="social-counter__number">4.8</div>
                            <div class="social-counter__label">средняя оценка родителей</div>
                        </div>
                    </div>
                    <div class="social-counter">
                        <div class="social-counter__top"></div>
                        <div class="social-counter__body">
                            <span class="social-counter__icon">👩‍🏫</span>
                            <div class="social-counter__number">20+</div>
                            <div class="social-counter__label">опытных педагогов</div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Micro-Commitment: Checklist download        -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section" aria-label="Скачать чек-лист">
        <div class="bento__full">
            <div class="micro-commit">
                <div class="micro-commit__content">
                    <span class="bento-label">Бесплатно</span>
                    <h2 class="bento-h2">Скачайте чек-лист готовности к школе</h2>
                    <p class="bento-p">10 признаков, что ваш ребёнок готов к 1-му классу. Проверьте за 5 минут — и узнайте, на какие навыки обратить внимание.</p>
                    <button class="btn-primary btn-write micro-commit__btn">Получить чек-лист бесплатно</button>
                    <p class="micro-commit__disclaimer">Отправляя заявку, вы соглашаетесь на обработку персональных данных</p>
                </div>
                <div class="micro-commit__visual">
                    <svg class="micro-commit__svg" viewBox="0 0 130 170" fill="none" aria-hidden="true">
                        <!-- Paper background -->
                        <rect x="8" y="4" width="114" height="162" rx="8" fill="white" stroke="#DED3C0" stroke-width="1.2"/>
                        <!-- Header line -->
                        <rect x="24" y="20" width="82" height="4" rx="2" fill="#7C3AED" opacity="0.15"/>
                        <!-- Checklist items -->
                        <rect x="24" y="38" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
                        <path d="M26 44l3 3 5-5" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
                        <rect x="44" y="40" width="50" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>

                        <rect x="24" y="62" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
                        <path d="M26 68l3 3 5-5" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
                        <rect x="44" y="64" width="62" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>

                        <rect x="24" y="86" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
                        <rect x="44" y="88" width="42" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>

                        <rect x="24" y="110" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
                        <rect x="44" y="112" width="56" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>

                        <!-- Pencil illustration -->
                        <g transform="translate(92, 130) rotate(-30)">
                            <rect x="0" y="0" width="6" height="28" rx="1" fill="#7C3AED" opacity="0.12"/>
                            <polygon points="0,0 6,0 3,-6" fill="#7C3AED" opacity="0.15"/>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Guarantee Hero (Risk Reversal Showcase)     -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section pksh-section--alt" aria-label="Гарантия">
        <div class="bento__full">
            <div class="guarantee-hero">
                <div class="guarantee-hero__badges">
                    <div class="guarantee-hero__shield">🛡️</div>
                </div>
                <div class="guarantee-hero__content">
                    <h2 class="bento-h2">Ваш ребёнок начнёт читать через 3 недели</h2>
                    <p class="guarantee-hero__text">Или <strong>мы вернём деньги</strong> и продолжим обучение бесплатно, пока не дойдём до результата. Мы — частная школа <strong>с гослицензией</strong>, а не кружок. Отвечаем за результат.</p>
                    <button class="btn-primary btn-write guarantee-hero__btn">Записаться на бесплатное пробное</button>
                </div>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Anchor Navigation — jump links             -->
    <!-- ════════════════════════════════════════════ -->
    <nav class="pksh-anchor-nav" aria-label="Навигация по странице">
        <a href="#how-it-works" class="pksh-anchor-link">Как проходят занятия</a>
        <a href="#results" class="pksh-anchor-link">Результаты</a>
        <a href="#programs" class="pksh-anchor-link">Программы</a>
        <a href="#teachers" class="pksh-anchor-link">Преподаватели</a>
        <a href="#faq" class="pksh-anchor-link">Вопросы</a>
    </nav>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 1: How it works + Why us         -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section" id="how-it-works" aria-label="Как проходят занятия">
        <div class="bento__half bento-card bento-card--soft">
            <span class="bento-label">Как проходит занятие</span>
            <h2 class="bento-h2">30 минут игры = 1 шаг к школе</h2>
            <p class="bento-p">Никаких скучных прописей. Каждое занятие построено так, что ребёнок <strong>сам хочет</strong> вернуться.</p>
            <div class="steps-3">
                <div class="step">
                    <span class="step__num">1</span>
                    <div>
                        <strong>Вход в тему</strong>
                        <span>Короткая история или загадка — включаем интерес</span>
                    </div>
                </div>
                <div class="step">
                    <span class="step__num">2</span>
                    <div>
                        <strong>Игровое задание</strong>
                        <span>Чтение, счёт, логика — через механику игры</span>
                    </div>
                </div>
                <div class="step">
                    <span class="step__num">3</span>
                    <div>
                        <strong>Рефлексия</strong>
                        <span>Ребёнок сам рассказывает, чему научился</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bento__half bento-card bento-card--objections">
            <span class="bento-label">Почему родители выбирают нас</span>
            <h2 class="bento-h2">Три главных вопроса — честные ответы</h2>
            <div class="objection-list">
                <div class="objection-item">
                    <div class="objection-item__icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </div>
                    <div>
                        <strong>Не перегрузят ли ребёнка?</strong>
                        <p>Занятия по 30–40 минут. Каждые 7 минут — смена активности. Ребёнок не устаёт.</p>
                    </div>
                </div>
                <div class="objection-item">
                    <div class="objection-item__icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </div>
                    <div>
                        <strong>Успеем ли до сентября?</strong>
                        <p>Да. Наша программа рассчитана на 4–6 месяцев. Первые результаты — через 3 недели.</p>
                    </div>
                </div>
                <div class="objection-item">
                    <div class="objection-item__icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </div>
                    <div>
                        <strong>Дорого?</strong>
                        <p>От 600 ₽ за занятие. Первое — бесплатно. А если не понравится — вернём деньги.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 2: Results / Data                 -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section pksh-section--alt" id="results" aria-label="Результаты учеников">
        <div class="bento__full bento-card bento-card--highlight-results">
            <span class="bento-label bento-label--light">Результаты наших учеников</span>
            <h2 class="bento-h2 bento-h2--light">К чему мы приводим детей</h2>
            <div class="results-grid">
                <div class="result-item">
                    <span class="result-item__value">95%</span>
                    <span class="result-item__desc">поступают в школы и лицеи Щёлкова без стресса</span>
                </div>
                <div class="result-item">
                    <span class="result-item__value">3 нед.</span>
                    <span class="result-item__desc">— первый осмысленный слог у нечитавших детей</span>
                </div>
                <div class="result-item">
                    <span class="result-item__value">87%</span>
                    <span class="result-item__desc">родителей отмечают рост самостоятельности</span>
                </div>
                <div class="result-item">
                    <span class="result-item__value">2,5×</span>
                    <span class="result-item__desc">быстрее адаптируются в первом классе</span>
                </div>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 3: Programs / Курсы              -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section" id="programs" aria-label="Программы подготовки">
        <div class="bento__full">
            <span class="bento-label">Программы</span>
            <h2 class="bento-h2">Выберите формат подготовки</h2>
            <p class="bento-p">Все программы ведут действующие педагоги начальных классов. 
            Группы до 8 человек — каждому ребёнку уделяем внимание.</p>

            <div class="programs-grid">
                <?php
                $pksh_programs = carbon_get_post_meta($post_id, 'pksh_programs');
                if (is_array($pksh_programs) && !empty($pksh_programs)) :
                    foreach ($pksh_programs as $program) :
                        $icon           = $program['program_icon'] ?? '🎓';
                        $title          = $program['program_title'] ?? '';
                        $intensity      = $program['program_intensity'] ?? '';
                        $schedule_raw   = $program['program_schedule'] ?? '';
                        $duration       = $program['program_duration'] ?? '90 мин';
                        $structure_raw  = $program['program_lesson_structure'] ?? '';
                        $includes_raw   = $program['program_includes'] ?? '';
                        $price_sub      = $program['program_price_subscription'] ?? '';
                        $price_single   = $program['program_price_single'] ?? '';
                        $btn_text       = $program['program_button_text'] ?? 'Записаться';
                        $btn_url        = $program['program_button_url'] ?? '/zapis/';

                        $schedule_lines  = array_filter(explode("\n", $schedule_raw));
                        $structure_lines = array_filter(explode("\n", $structure_raw));
                        $includes_lines  = array_filter(explode("\n", $includes_raw));
                ?>
                <div class="program-card">
                    <div class="program-card__header">
                        <span class="program-card__icon"><?php echo esc_html($icon); ?></span>
                        <h3 class="program-card__title"><?php echo esc_html($title); ?></h3>
                    </div>

                    <div class="program-card__body">

                        <?php if ($intensity) : ?>
                        <div class="program-card__intensity">
                            <span class="program-card__label">Интенсивность:</span>
                            <?php echo esc_html($intensity); ?>
                        </div>
                        <?php endif; ?>

                        <?php if (!empty($schedule_lines)) : ?>
                        <div class="program-card__schedule">
                            <span class="program-card__label">📅 Расписание:</span>
                            <ul>
                                <?php foreach ($schedule_lines as $line) : ?>
                                    <li><?php echo esc_html(trim($line)); ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                        <?php endif; ?>

                        <?php if (!empty($structure_lines) || $duration) : ?>
                        <div class="program-card__structure">
                            <span class="program-card__label">⏱ Структура занятия (<?php echo esc_html($duration); ?>):</span>
                            <ul class="program-card__timeline">
                                <?php foreach ($structure_lines as $line) : ?>
                                    <?php
                                    $line = trim($line);
                                    // Parse "15 мин 🧠 Нейрогимнастика" into time and name
                                    $parts = explode(' ', $line, 2);
                                    $time_part = $parts[0] ?? '';
                                    $name_part = $parts[1] ?? $line;
                                    ?>
                                    <li class="program-card__timeline-item">
                                        <span class="program-card__timeline-badge"><?php echo esc_html($time_part); ?></span>
                                        <span class="program-card__timeline-name"><?php echo esc_html($name_part); ?></span>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                        <?php endif; ?>

                        <?php if (!empty($includes_lines)) : ?>
                        <div class="program-card__includes">
                            <span class="program-card__label">Программа включает:</span>
                            <ul>
                                <?php foreach ($includes_lines as $line) : ?>
                                    <li><?php echo esc_html(trim($line)); ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                        <?php endif; ?>

                        <?php if ($price_sub || $price_single) : ?>
                        <div class="program-card__pricing">
                            <?php if ($price_sub) : ?>
                            <div class="program-card__price-main">
                                <span class="program-card__price-value"><?php echo esc_html($price_sub); ?></span>
                                <span class="program-card__price-period">за 4 недели</span>
                            </div>
                            <?php endif; ?>
                            <?php if ($price_single) : ?>
                            <div class="program-card__price-single">
                                <?php echo esc_html($price_single); ?> за одно занятие (вне абонемента)
                            </div>
                            <?php endif; ?>
                        </div>
                        <?php endif; ?>

                        <a href="<?php echo esc_url($btn_url); ?>" class="program-card__btn">
                            <?php echo esc_html($btn_text); ?>
                        </a>

                    </div>
                </div>
                <?php
                    endforeach;
                else :
                    // Fallback, если программы не заполнены в админке
                ?>
                <div class="program-card">
                    <div class="program-card__header">
                        <span class="program-card__icon">📖</span>
                        <h3 class="program-card__title">Базовая программа</h3>
                    </div>
                    <div class="program-card__body">
                        <p style="color: #94a3b8; font-style: italic;">Заполните программы в админке → Настройки Подготовки к школе → Программы</p>
                    </div>
                </div>
                <?php endif; ?>
            </div>

            <div class="programs-note">
                <p>Первое пробное занятие — <strong>бесплатно</strong>. При покупке абонемента на месяц — скидка 10%. 
                <a href="#final-cta" class="programs-note__link">Записаться на бесплатное пробное</a></p>
            </div>
            <div class="pksh-fomo">
                <span class="pksh-fomo__dot"></span>
                <span class="pksh-fomo__text">🔥 4 из 8 мест в группе 5–6 лет <strong>уже заняты</strong>. Успейте записаться!</span>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 4: Schedule & Price               -->
    <!-- ════════════════════════════════════════════ -->
    <?php get_template_part('template-parts/block-price'); ?>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 4: Teachers (camp-style cards)  -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section pksh-section--teachers" id="teachers" aria-label="Преподаватели">
        <div class="bento__full">
            <h2 class="bento-h2">Наши преподаватели</h2>
            <div class="pksh-teachers__scroll-x">
                <div class="pksh-teachers__wrapper">
                    <?php
                    $pksh_teachers = carbon_get_post_meta(get_the_ID(), 'pksh_teachers');
                    if (is_array($pksh_teachers) && !empty($pksh_teachers)) :
                        foreach ($pksh_teachers as $item) :
                            $t_name  = $item['teacher_name'] ?? '';
                            $t_photo = $item['teacher_photo'] ?? 0;
                            $t_subj  = $item['teacher_subject'] ?? '';
                            $t_about = $item['teacher_about'] ?? '';
                    ?>
                        <div class="pksh-teachers__item">
                            <div class="pksh-teachers__card">
                                <div class="pksh-teachers__card-top">
                                    <?php if ($t_photo) : ?>
                                        <img class="pksh-teachers__photo" loading="lazy" width="130" height="130"
                                             src="<?php echo esc_url(wp_get_attachment_url($t_photo)); ?>"
                                             alt="<?php echo esc_attr($t_name); ?>">
                                    <?php else : ?>
                                        <img class="pksh-teachers__photo" loading="lazy" width="130" height="130"
                                             src="<?php echo get_template_directory_uri(); ?>/assets/images/no-photo.png"
                                             alt="<?php echo esc_attr($t_name); ?>">
                                    <?php endif; ?>
                                </div>
                                <div class="pksh-teachers__card-body">
                                    <h3 class="pksh-teachers__name"><?php echo esc_html($t_name); ?></h3>
                                    <?php if ($t_subj) : ?>
                                        <p class="pksh-teachers__subj"><?php echo esc_html($t_subj); ?></p>
                                    <?php endif; ?>
                                    <?php if ($t_about) : ?>
                                        <p class="pksh-teachers__about"><?php echo esc_html($t_about); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php
                        endforeach;
                    endif;
                    ?>
                </div>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 5: Guarantee (standalone)         -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section pksh-section--alt" id="guarantee" aria-label="Гарантия">
        <div class="bento__full">
            <div class="guarantee-block guarantee-block--centered">
                <h2 class="bento-h2">🛡️ Гарантия результата</h2>
                <p class="guarantee-block__text">
                    Если через 3 месяца ваш ребёнок не начнёт читать &mdash;
                    мы вернём деньги <strong>и продолжим обучение бесплатно</strong>,
                    пока не дойдём до результата.
                </p>
                <span class="guarantee-block__badge">Так работают только те, кто уверен в своём методе</span>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Bento Row 6: FAQ (как на странице лагеря)   -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section pksh-section--alt" id="faq" aria-label="Вопросы и ответы">
        <div class="bento__full pksh-faq">
            <h2 class="bento-h2">Часто задаваемые вопросы</h2>
            <?php
            $faq_items = carbon_get_post_meta($post_id, 'pksh_faq_items');
            if (!empty($faq_items) && is_array($faq_items)) :
                $col1 = '';
                $col2 = '';
                $count = 0;
                foreach ($faq_items as $item) :
                    $q = $item['faq_question'] ?? '';
                    $a = $item['faq_answer'] ?? '';
                    if (empty($q) && empty($a)) continue;
                    $accordion = '<div class="box__accordion">'
                        . '<div class="box__accordion_label" role="button" tabindex="0">'
                        . '<span>' . esc_html($q) . '</span>'
                        . '<svg role="presentation" focusable="false" width="24px" height="24px" viewBox="0 0 24 24">'
                        . '<g stroke="none" stroke-width="2px" fill="none" fill-rule="evenodd" stroke-linecap="square">'
                        . '<g transform="translate(1.000000, 1.000000)" stroke="currentColor">'
                        . '<path d="M0,11 L22,11"></path>'
                        . '<path d="M11,0 L11,22"></path>'
                        . '</g></g></svg></div>'
                        . '<div class="box__accordion_content">'
                        . '<div class="box__accordion_content-text">' . wp_kses_post($a) . '</div>'
                        . '</div></div>';
                    if ($count % 2 === 0) {
                        $col1 .= $accordion;
                    } else {
                        $col2 .= $accordion;
                    }
                    $count++;
                endforeach;
                if (!empty($col1) || !empty($col2)) :
            ?>
            <div class="pksh-faq__wrapper">
                <div class="pksh-faq__col"><?php echo $col1; ?></div>
                <div class="pksh-faq__col"><?php echo $col2; ?></div>
            </div>
            <?php endif; endif; ?>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Reviews (lw-card inline, camp-style)        -->
    <!-- ════════════════════════════════════════════ -->
    <section class="pksh-reviews" id="pksh-reviews" aria-label="Отзывы">
        <h2 class="bento-h2">Что говорят родители</h2>

        <?php
        $review_items = carbon_get_post_meta($post_id, 'pksh_reviews_list');
        $total_count  = is_array($review_items) ? count($review_items) : 0;
        if ($total_count > 0) :
            $items = array_values($review_items);
            $render_card = function($item) {
                $author     = $item['review_author'] ?? '';
                $text       = $item['review_text'] ?? '';
                $raw_rating = $item['review_rating'] ?? '';
                $avatar_id  = !empty($item['review_avatar']) ? (int)$item['review_avatar'] : 0;
                $stars      = max(1, min(5, (int)$raw_rating));
                $name       = $author ?: 'Анонимно';
                if (empty($text)) return '';
                ob_start();
                ?>
                <div class="lw-card">
                    <div class="lw-flex lw-flex--row lw-gap-12 lw-items-center">
                        <div class="lw-avatar lw-avatar--48">
                            <?php if ($avatar_id && wp_attachment_is_image($avatar_id)) : ?>
                                <?php echo wp_get_attachment_image($avatar_id, [48, 48], false, ['class' => 'lw-avatar__img', 'loading' => 'lazy', 'alt' => esc_attr($name)]); ?>
                            <?php else : ?>
                                <img class="lw-avatar__img" src="https://ui-avatars.com/api/?name=<?php echo urlencode($name); ?>&amp;background=random&amp;color=fff&amp;size=96" alt="<?php echo esc_attr($name); ?>" loading="lazy" width="48" height="48">
                            <?php endif; ?>
                        </div>
                        <div class="lw-flex lw-flex--col">
                            <div class="lw-text-dark lw-font-semibold"><?php echo esc_html($name); ?></div>
                        </div>
                        <div class="lw-badge lw-badge--verified">Проверенный отзыв</div>
                    </div>
                    <div class="lw-stars lw-mt-8">
                        <?php for ($i = 1; $i <= 5; $i++) : ?>
                            <svg class="lw-star <?php echo $i <= $stars ? 'lw-star--filled' : ''; ?>" width="16" height="16" viewBox="0 0 21 19" fill="none">
                                <path d="M9.58463 1.50884C9.89101 0.602477 11.1729 0.602476 11.4793 1.50884L13.1158 6.35007C13.2531 6.75637 13.6343 7.02985 14.0631 7.02985H19.2721C20.2504 7.02985 20.6467 8.28958 19.8447 8.84971L15.6995 11.7446C15.335 11.9991 15.1823 12.4636 15.3247 12.8847L16.9239 17.6158C17.233 18.5302 16.1954 19.3085 15.404 18.7559L11.1045 15.7533C10.7606 15.5131 10.3033 15.5131 9.95941 15.7533L5.65991 18.7559C4.86857 19.3085 3.83092 18.5302 4.14001 17.6158L5.73926 12.8847C5.8816 12.4636 5.72891 11.9991 5.36448 11.7446L1.21924 8.84971C0.417196 8.28958 0.813532 7.02985 1.79181 7.02985H7.00081C7.42969 7.02985 7.81081 6.75637 7.94815 6.35007L9.58463 1.50884Z" fill="currentColor"/>
                            </svg>
                        <?php endfor; ?>
                    </div>
                    <div class="lw-card__text lw-mt-8"><?php echo wp_kses_post($text); ?></div>
                </div>
                <?php
                return ob_get_clean();
            };
        ?>
        <div class="lw-scroll-x" data-pksh-reviews>
            <div class="lw-grid lw-grid--3 lw-gap-20" data-pksh-grid data-pksh-collapsed>
                <?php foreach ($items as $item) echo $render_card($item); ?>
            </div>
            <?php if ($total_count > 4) : ?>
            <div class="pksh-reviews__actions">
                <button class="pksh-reviews__toggle" data-pksh-toggle type="button">Показать ещё</button>
            </div>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <script>
        (function(){
            var grid = document.querySelector('[data-pksh-grid]');
            var toggle = document.querySelector('[data-pksh-toggle]');
            if (!grid || !toggle) return;
            toggle.addEventListener('click', function(){
                var expanded = grid.hasAttribute('data-pksh-expanded');
                if (expanded) {
                    grid.removeAttribute('data-pksh-expanded');
                    grid.setAttribute('data-pksh-collapsed', '');
                    toggle.textContent = 'Показать ещё';
                } else {
                    grid.removeAttribute('data-pksh-collapsed');
                    grid.setAttribute('data-pksh-expanded', '');
                    toggle.textContent = 'Скрыть';
                }
            });
        })();
        </script>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Final CTA — Low Friction                     -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section pksh-section--alt" id="final-cta" aria-label="Запись">
        <div class="bento__full">
            <div class="final-cta">
                <h2 class="bento-h2">Первое занятие — бесплатно</h2>
                <p class="final-cta__text">Ребёнок познакомится с педагогом, попробует задания. Вы увидите методику своими глазами. Никакой оплаты и договоров.</p>

                <!-- Форма открывается в модалке (footer.php) — скрипт из вкладки Битрикс24 в админке -->

                <button class="btn-primary btn-primary--large open-bitrix-form btn-write">Записаться на бесплатное пробное</button>
                <p class="final-cta__footnote">🔥 Осталось 2 места в группе 5–6 лет. Успейте!</p>
            </div>
        </div>
    </section>

    <!-- ════════════════════════════════════════════ -->
    <!-- Contacts — как на странице лагеря            -->
    <!-- ════════════════════════════════════════════ -->
    <section class="bento pksh-section" id="pksh-contact" aria-label="Контакты">
        <div class="bento__full pksh-contact">
            <h2 class="bento-h2">Наш адрес</h2>
            <div class="pksh-contact__wrapper">
                <div class="pksh-contact__info">
                    <?php if (!empty($opt_phone)) : ?>
                    <div class="pksh-contact__subtitle">Телефон:</div>
                    <a class="pksh-contact__value" href="tel:+<?php echo preg_replace('/[^0-9]/', '', $opt_phone); ?>"><?php echo esc_html($opt_phone); ?></a>
                    <?php endif; ?>

                    <?php if (!empty($opt_email)) : ?>
                    <div class="pksh-contact__subtitle">Почта:</div>
                    <a class="pksh-contact__value" href="mailto:<?php echo esc_attr($opt_email); ?>"><?php echo esc_html($opt_email); ?></a>
                    <?php endif; ?>

                    <?php if (!empty($opt_address)) : ?>
                    <div class="pksh-contact__subtitle">Адрес:</div>
                    <div class="pksh-contact__value"><?php echo esc_html($opt_address); ?></div>
                    <?php endif; ?>

                    <?php if (!empty($opt_social_raw) && is_array($opt_social_raw)) : ?>
                    <div class="pksh-contact__subtitle">Наши соцсети:</div>
                    <div class="pksh-contact__social">
                        <?php foreach ($opt_social_raw as $item) :
                            $link = $item['url'] ?? '';
                            $name = $item['name'] ?? '';
                            if ($link) : ?>
                            <a class="pksh-contact__social-link" href="<?php echo esc_url($link); ?>" target="_blank" rel="noopener noreferrer" title="<?php echo esc_attr($name); ?>">
                                <?php echo esc_html($name ?: $link); ?>
                            </a>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>
                <div class="pksh-contact__map">
                    <div id="ya-map" style="width: 100%; height: 100%; min-height: 400px;"></div>
                </div>
            </div>
        </div>
    </section>

    <script>
    (function() {
        var mapCoords  = [<?php echo esc_js($opt_coords ?: '55.7558,37.6173'); ?>];
        var mapLabel   = '<?php echo esc_js($opt_name); ?>';
        var mapLoaded  = false;
        var apiLoading = false;

        function initMap() {
            ymaps.ready(function() {
                var map = new ymaps.Map('ya-map', {
                    center: mapCoords,
                    zoom: 16
                }, {
                    searchControlProvider: 'yandex#search'
                });
                var placemark = new ymaps.Placemark(
                    mapCoords,
                    { iconContent: mapLabel },
                    { preset: 'islands#redStretchyIcon' }
                );
                map.geoObjects.add(placemark);
                mapLoaded = true;
            });
        }

        function loadYandexMaps() {
            if (mapLoaded || apiLoading) return;
            apiLoading = true;
            var script = document.createElement('script');
            script.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
            script.onload = initMap;
            document.head.appendChild(script);
        }

        function onScroll() {
            if ((window.pageYOffset || document.documentElement.scrollTop) > 100) {
                loadYandexMaps();
                window.removeEventListener('scroll', onScroll);
            }
        }
        window.addEventListener('load', function() {
            setTimeout(function() {
                if (!mapLoaded && !apiLoading) loadYandexMaps();
            }, 3000);
        });
        window.addEventListener('scroll', onScroll, { passive: true });
    })();
    </script>

</main>

<?php
get_footer();
