<?php
/* Frame "Категория".
 * Bitrix CMS map:
 * - breadcrumbs: bitrix:breadcrumb or $APPLICATION->GetNavChain().
 * - hero: current catalog.section metadata, min price, stock status and quick order include area.
 * - tabs: separate include areas/components can be mounted into the empty panels below.
 */
$categoryTabs = [
    'stock' => 'Наличие',
    'description' => 'Описание',
    'analogs' => 'Аналоги',
    'delivery' => 'Доставка и оплата',
    'qa' => 'Вопрос-ответ',
];

$availabilitySections = [
    ['image' => '/images/availability-sections/1.png', 'title' => 'Кабели гибкие и шнуры для горных работ'],
    ['image' => '/images/availability-sections/2.png', 'title' => 'Кабели силовые с изоляцией из полимерной композиции до 6 кВ'],
    ['image' => '/images/availability-sections/3.png', 'title' => 'Провода и кабели связи полевые'],
    ['image' => '/images/availability-sections/4.png', 'title' => 'Кабели для нестационарной прокладки'],
    ['image' => '/images/availability-sections/5.png', 'title' => 'Кабели силовые с изоляцией из сшитого полиэтилена 6...35 кВ'],
    ['image' => '/images/availability-sections/6.png', 'title' => 'Провода и кабели термопарные, термоэлектродные и термокомпенсационные'],
];
$availabilityVisibleSectionCount = count($availabilitySections);
$availabilitySections = array_merge($availabilitySections, $availabilitySections);

$availabilityPriceRanges = [
    ['value' => 'to_400', 'label' => 'до 400 (11)', 'checked' => true],
    ['value' => '400_500', 'label' => '400 - 500 (6)', 'checked' => false],
    ['value' => '500_600', 'label' => '500 - 600 (15)', 'checked' => false],
    ['value' => 'from_600', 'label' => '600 и дороже (6)', 'checked' => false],
    ['value' => 'any', 'label' => 'Неважно (21)', 'checked' => false],
];

$availabilityFilters = [
    'Количество жил' => ['1 (11)', '2 (6)', '3 (15)', '3+1 (6)', '4 (6)', '5 (7)'],
    'Сечение' => ['25 (2)', '35 (1)', '50 (1)', '70 (7)', '95 (7)', '120 (8)', '150 (7)', '185 (7)', '240 (7)', '300 (1)', '400 (1)', '500 (1)', '625 (1)'],
    'Тип' => ['Силовые (51)'],
    'Тип жилы' => ['Медные (51)'],
];

$availabilityProductTemplate = [
    'image' => '/images/product-card.png',
    'name' => 'КГЭ 3х16+1х6,0+1х6,0 - 6кВ',
    'cores' => '5',
    'voltage' => '1',
    'price' => '246,58',
    'quantity' => 0,
];

$availabilityProducts = array_map(static function ($index) use ($availabilityProductTemplate) {
    $product = $availabilityProductTemplate;
    $product['quantity'] = $index === 0 ? 1 : 0;

    return $product;
}, range(0, 11));

$categoryAnalogItems = [
    [
        'brand' => 'ПВГ',
        'description' => 'Изоляция токопроводящих жил выполнена из полиэтилена высокого давления. Замена осуществляется после согласования с проектной организацией.',
        'url' => '#',
    ],
    [
        'brand' => 'ПВГ',
        'description' => 'Изоляция токопроводящих жил выполнена из полиэтилена высокого давления. Замена осуществляется после согласования с проектной организацией.',
        'url' => '#',
    ],
];

$categoryDescriptionConstruction = [
    'Три секторные многопроволочные токопроводящие жилы из меди с площадью номинального поперечного сечения 240 мм2, соответствующие 2 классу по <a href="http://docs.cntd.ru/document/1200100953" target="_blank" rel="noopener">ГОСТ 22483-2012</a>.',
    'Изоляция жилы исполнена из поливинилхлоридного пластиката номинально установленной толщиной 3,4 мм.',
    'Поясной изолирующий слой из поливинилхлоридного пластиката толщиной более 0,9 мм.',
    'Электропроводящий экран:<br>&nbsp;&nbsp;&nbsp;&mdash; в виде обмотки из ленты электропроводящей прорезиненной ткани<br>&nbsp;&nbsp;&nbsp;номинально установленной толщиной 0,3 мм с перекрытием;<br>&nbsp;&nbsp;&nbsp;&mdash; или в виде обмотки из двух лент электропроводящей кабельной бумаги<br>&nbsp;&nbsp;&nbsp;номинально установленной толщиной 0,12 мм с зазором.',
    'Металлический экран в виде обмотки из двух медных лент с зазором или медной фольги толщиной более 0,06 мм.',
    'Разделяющий слой в виде обмотки из двух поливинилхлоридных или полиэтилентерефталатных лент с перекрытием.',
    'Оболочка изготовлена из поливинилхлоридного пластиката, которая соответствует категории Обп-2 по <a href="http://docs.cntd.ru/document/1200011997" target="_blank" rel="noopener">ГОСТ 23286-78</a>, номинально установленной толщиной 2,5 мм.',
];

$categoryDescriptionDecode = [
    ['code' => 'В', 'label' => 'изоляция жил из поливинилхлоридного пластиката'],
    ['code' => 'В', 'label' => 'оболочка из поливинилхлоридного пластиката пониженной горючести'],
    ['code' => 'Г', 'label' => 'отсутствие защитных покровов'],
    ['code' => '3', 'label' => 'Количество жил'],
    ['code' => '240', 'label' => 'Сечение жил'],
    ['code' => '6кВ', 'label' => 'Номинальное напряжение'],
];

$categoryDescriptionGost = [
    [
        'title' => 'ГОСТ 22483-2012 Жилы токопроводящие для кабелей, проводов и шнуров',
        'url' => '#',
    ],
    [
        'title' => 'ГОСТ 31996-2012 Кабели силовые с пластмассовой изоляцией на номинальное напряжение 0,66; 1 и 3 кВ. Общие технические условия',
        'url' => '#',
    ],
];

$paymentDeliveryItems = [
    [
        'modifier' => 'legal',
        'type' => 'Оплата',
        'title' => 'Для Юридических лиц',
        'subtitle' => 'через расчетный счет',
        'icon' => '/images/Pay-Delivery/suitcase.svg',
        'bullets' => [
            'Оплатите счет в течение 3 дней. На это время товар зарезервирован за Вами.',
            'Мы отгружаем товар сразу после получения платежа на расчетный счет ООО “ТПК “Парма”. При необходимости наш менеджер передаст Вам все необходимые документы: договор поставки, счет-фактуры, акты и др.',
            'Если Вы — экспортер, то до поставки товара, мы вышлем Вам все документы для оформления экспорта.',
        ],
        'textAfter' => [
            'Для постоянных клиентов возможна как частичная, так и полная отсрочка платежа. Данную информацию уточняйте у своих менеджеров.',
        ],
    ],
    [
        'modifier' => 'person',
        'type' => 'Оплата',
        'title' => 'Для ИП и физических лиц',
        'subtitle' => 'любым удобным способом',
        'icon' => '/images/Pay-Delivery/man.svg',
        'bullets' => [
            'в любом отделении банка (при себе необходимо иметь паспорт);',
            'в мобильном приложении, например, СбербанкОнлайн, используя QR-код (в приложениях некоторых банков потребуется ввести реквизиты вручную);',
            'в платежном терминале (например, Сбербанк), используя QR-код.',
        ],
    ],
    [
        'modifier' => 'own',
        'type' => 'Доставка',
        'title' => 'Доставим своими силами',
        'icon' => '/images/Pay-Delivery/gift.svg',
        'text' => [
            'Стоимость доставки по регионам может различаться. В отдаленные регионы доставка осуществляется согласно погодным и иным условиям, наши логисты рассчитают наиболее выгодный маршрут.',
        ],
        'note' => 'В зависимости от объема заказа, оплатим от 50 % до 100 % стоимости доставки в г. Москва — узнайте у нашего менеджера точную стоимость',
    ],
    [
        'modifier' => 'transport',
        'type' => 'Доставка',
        'title' => 'Отправим транспортными компаниями',
        'icon' => '/images/Pay-Delivery/truck.svg',
        'text' => [
            'Если Вам удобно — доставим через транспортную компанию:',
        ],
        'bullets' => [
            'ПЭК',
            'Деловые Линии',
            'Ратэк',
            'ЖелДорЭкспедиция',
            'Любой транспортный партнер по вашему выбору',
        ],
        'logos' => [
            '/images/Pay-Delivery/ПЭК.png',
            '/images/Pay-Delivery/Деловые Линии.png',
            '/images/Pay-Delivery/Ратэк.png',
            '/images/Pay-Delivery/ЖелДор.png',
        ],
        'note' => 'ВАЖНО: Чтобы забрать заказ, предоставьте доверенность, оформленную на выбранную транспортную компанию.',
    ],
    [
        'modifier' => 'pickup',
        'type' => 'Доставка',
        'title' => 'Самовывоз',
        'icon' => '/images/Pay-Delivery/forklift.svg',
        'text' => [
            'Вы можете сами забрать продукцию со склада. Для этого нужно иметь при себе доверенность и паспорт.',
        ],
        'note' => 'ВАЖНО: Чтобы вовремя получить свой заказ, заранее отправьте логисту или менеджеру компании доверенность — для подготовки документов на отгрузку.',
    ],
];

$categoryFaqItems = [
    [
        'question' => 'По какому номеру с Вами можно связаться? Куда можно отправить заявку?',
        'answer' => [
            'Связаться с менеджерами можно по телефону, указанному в шапке сайта. Заявку с реквизитами и перечнем позиций можно отправить на электронную почту, после чего специалист уточнит наличие, цену и сроки поставки.',
        ],
    ],
    [
        'question' => 'Где находится ваша компания?',
        'answer' => [
            'Электрокабель марки КГ обладает повышенными характеристиками на изгиб благодаря многопроволочным медным жилам и внешней резиновой оболочке. Изоляция КГ выполнена из эластичной резины марки РТИ -1. Для заземления в конструкции КГ предусмотрена голубая нулевая жила, либо используется желто-зеленая.Внешняя оболочка электрокабеля выполнена из резин марок РШТ - 2 или РШТМ - 2, обеспечивающие устойчивость КГ к солнечному свету. КГ производится в нескольких климатических исполнениях согласно ГОСТ (Т, ХЛ, У).',
            'Кабель КГ широко используются в качестве кабеля для сварки, для подключения кран-балок, подвесных и конвейерных систем, а также электропитания других подвижных механизмов.',
        ],
    ],
    [
        'question' => 'По какому номеру с Вами можно связаться? Куда можно отправить заявку?',
        'answer' => [
            'Связаться с менеджерами можно по телефону, указанному в шапке сайта. Заявку с реквизитами и перечнем позиций можно отправить на электронную почту, после чего специалист уточнит наличие, цену и сроки поставки.',
        ],
    ],
    [
        'question' => 'Где находится ваша компания?',
        'answer' => [
            'Электрокабель марки КГ обладает повышенными характеристиками на изгиб благодаря многопроволочным медным жилам и внешней резиновой оболочке. Изоляция КГ выполнена из эластичной резины марки РТИ -1.',
        ],
    ],
    [
        'question' => 'По какому номеру с Вами можно связаться? Куда можно отправить заявку?',
        'answer' => [
            'Связаться с менеджерами можно по телефону, указанному в шапке сайта. Заявку с реквизитами и перечнем позиций можно отправить на электронную почту.',
        ],
    ],
    [
        'question' => 'Где находится ваша компания?',
        'answer' => [
            'Электрокабель марки КГ обладает повышенными характеристиками на изгиб благодаря многопроволочным медным жилам и внешней резиновой оболочке.',
        ],
    ],
    [
        'question' => 'По какому номеру с Вами можно связаться? Куда можно отправить заявку?',
        'answer' => [
            'Связаться с менеджерами можно по телефону, указанному в шапке сайта. Заявку с реквизитами и перечнем позиций можно отправить на электронную почту.',
        ],
    ],
    [
        'question' => 'Где находится ваша компания?',
        'answer' => [
            'Электрокабель марки КГ обладает повышенными характеристиками на изгиб благодаря многопроволочным медным жилам и внешней резиновой оболочке. Изоляция КГ выполнена из эластичной резины марки РТИ -1. Для заземления в конструкции КГ предусмотрена голубая нулевая жила, либо используется желто-зеленая.Внешняя оболочка электрокабеля выполнена из резин марок РШТ - 2 или РШТМ - 2, обеспечивающие устойчивость КГ к солнечному свету. КГ производится в нескольких климатических исполнениях согласно ГОСТ (Т, ХЛ, У).',
            'Кабель КГ широко используются в качестве кабеля для сварки, для подключения кран-балок, подвесных и конвейерных систем, а также электропитания других подвижных механизмов.',
        ],
        'open' => true,
    ],
];
?>

<main class="category-page" data-category-tabs>
    <section class="category-hero line">
        <div class="cnt category-container">
            <nav class="category-breadcrumbs" aria-label="Хлебные крошки">
                <a href="#">Главная</a>
                <span>/</span>
                <a href="#">Каталог</a>
                <span>/</span>
                <span>Кабельно-проводниковая продукция</span>
            </nav>

            <h1 class="category-hero__title">Кабели ВВГ в Москве</h1>

            <div class="category-hero__grid">
                <article class="category-hero__visual" aria-label="Кабели ВВГ">
                    <img class="category-cable-preview" src="/images/hero.png" alt="" aria-hidden="true">

                    <div class="category-hero__order">
                        <div class="category-hero__price-label">Цена кабеля ВВГ:</div>
                        <div class="category-hero__price">
                            от 37 руб.
                            <span>(с НДС)</span>
                        </div>
                        <div class="category-stock">
                            <img class="category-check" src="/images/Check.svg" alt="" aria-hidden="true">
                            В наличии
                        </div>
                        <div class="category-hero__actions">
                            <button class="button category-button category-button--primary" href="#quick-order"
                                role="button">Быстрый заказ</button>
                        </div>
                        <p>Вы можете отправить заявку с реквизитами на почту <a
                                href="mailto:zakaz@parrish.ru">zakaz@parrish.ru</a></p>
                    </div>
                </article>

                <aside class="category-hero__info">
                    <div class="category-rating">
                        <img class="category-rating__logo" src="/images/Yandex_icon.svg" alt="" aria-hidden="true">
                        <strong>5.0</strong>
                        <span class="category-rating__stars" aria-label="5 из 5">
                            <img src="/images/star-yellow.svg" alt="" aria-hidden="true">
                            <img src="/images/star-yellow.svg" alt="" aria-hidden="true">
                            <img src="/images/star-yellow.svg" alt="" aria-hidden="true">
                            <img src="/images/star-yellow.svg" alt="" aria-hidden="true">
                            <img src="/images/star-yellow.svg" alt="" aria-hidden="true">
                        </span>
                        <a href="#">Отзывы о компании</a>
                    </div>

                    <p class="category-hero__lead">
                        Подбираем кабельно-проводниковую и электротехническую продукцию под задачу,
                        а не просто продаем позиции из каталога. Работаем напрямую с заводами,
                        поэтому предлагаем выгодные цены и реальные сроки поставки. Доставляем по всей России,
                        контролируя каждый этап.
                    </p>

                    <ul class="category-benefits">
                        <li>
                            <img class="category-benefit-icon" src="/images/Strahovanie_icon.svg" alt=""
                                aria-hidden="true">
                            <span class="category-benefit-text">
                                <span class="category-benefit-title">Гарантия</span>
                                <span class="category-benefit-description">Качество по ГОСТу или ТУ</span>
                            </span>
                        </li>
                        <li>
                            <img class="category-benefit-icon" src="/images/choose_icon.svg" alt="" aria-hidden="true">
                            <span class="category-benefit-text">
                                <span class="category-benefit-title">Огромный выбор вариантов</span>
                                <span class="category-benefit-description">170 товаров</span>
                            </span>
                        </li>
                        <li>
                            <img class="category-benefit-icon" src="/images/q_a_icon.svg" alt="" aria-hidden="true">
                            <span class="category-benefit-text">
                                <span class="category-benefit-title">Доставим в Москву</span>
                                <span class="category-benefit-description">Транспортной компанией или курьером</span>
                            </span>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
    </section>

    <nav class="category-tabs line" aria-label="Разделы категории">
        <div class="cnt category-container">
            <?php foreach ($categoryTabs as $tabCode => $tabTitle): ?>
                <a class="category-tabs__button<?= $tabCode === 'stock' ? ' is-active' : '' ?>"
                    href="#category-panel-<?= $tabCode ?>" data-tab-target="<?= $tabCode ?>"
                    aria-controls="category-panel-<?= $tabCode ?>"
                    aria-selected="<?= $tabCode === 'stock' ? 'true' : 'false' ?>" role="tab">
                    <?= $tabTitle ?>
                </a>
            <?php endforeach; ?>
        </div>
    </nav>

    <?php foreach ($categoryTabs as $tabCode => $tabTitle): ?>
        <section class="category-panel line<?= $tabCode === 'stock' ? ' is-active' : '' ?>"
            id="category-panel-<?= $tabCode ?>" data-tab-panel="<?= $tabCode ?>" role="tabpanel" <?= $tabCode === 'stock' ? '' : 'hidden' ?>>
            <div class="cnt category-container">
                <?php if ($tabCode === 'stock'): ?>
                    <div class="category-availability">
                        <section class="category-availability__categories" aria-labelledby="category-stock-title">
                            <h2 class="category-section-title" id="category-stock-title">Наличие</h2>

                            <div class="category-section-list">
                                <?php foreach ($availabilitySections as $sectionIndex => $sectionItem): ?>
                                    <a class="category-section-card" href="#" <?= $sectionIndex >= $availabilityVisibleSectionCount ? 'data-category-section-extra hidden' : '' ?>>
                                        <img src="<?= $sectionItem['image'] ?>" alt="" loading="lazy">
                                        <span><?= $sectionItem['title'] ?></span>
                                    </a>
                                <?php endforeach; ?>
                            </div>

                            <a class="category-reveal" href="#availability-sections-more" role="button" aria-expanded="false"
                                data-category-section-reveal>Раскрыть список</a>
                        </section>

                        <div class="category-compact-toolbar" aria-label="Сортировка и фильтр товаров">
                            <button class="category-compact-toolbar__sort" type="button">
                                Популярности
                            </button>
                            <button class="category-compact-toolbar__filter" type="button" data-filter-open>
                                Фильтр
                            </button>
                        </div>

                        <div class="category-found-count">Найдено 51 товар</div>

                        <div class="category-sort-actions" aria-label="Сортировка товаров">
                            <span class="category-sort-actions__found">Найдено 51 товар</span>
                            <span class="category-sort-actions__label">Сортировать по:</span>
                            <a class="is-active" href="#">Популярности</a>
                            <a href="#">Цене</a>
                            <span class="category-sort-actions__limit">Выводить по: <button type="button">21</button></span>
                            <span class="category-sort-actions__view" aria-label="Вид списка товаров">
                                <button type="button" aria-label="Показать списком">
                                    <img src="/images/view-list.svg" alt="" aria-hidden="true">
                                </button>
                                <button class="is-active" type="button" aria-label="Показать плиткой">
                                    <img src="/images/view-grid.svg" alt="" aria-hidden="true">
                                </button>
                            </span>
                        </div>

                        <div class="category-availability__body">
                            <button class="category-filter-backdrop" type="button" data-filter-close
                                aria-label="Закрыть фильтр"></button>

                            <aside class="category-filter smart-filter" id="container-arrCatalogFilter" aria-label="Фильтр товаров" data-filter-panel>
                                <div class="smart-filter-section">
                                    <form class="category-filter__form smart-filter-form" name="arrCatalogFilter_form" action="#" method="get">
                                        <div class="category-filter__title">
                                            Фильтры
                                            <button class="category-filter__close" type="button" data-filter-close
                                                aria-label="Закрыть фильтр">×</button>
                                        </div>

                                        <div class="smart-filter-items">

                                    <details class="category-filter__group category-filter__group--price smart-filter-parameters-box bx-active" open>
                                        <summary class="smart-filter-parameters-box-title">
                                            <span class="smart-filter-parameters-box-title-text">Розничная цена</span>
                                            <img class="category-filter__summary-arrow" src="/images/arrow-down.svg" alt="" aria-hidden="true">
                                        </summary>
                                        <span class="smart-filter-container-modef"></span>
                                        <div class="category-price-filter smart-filter-block" data-role="bx_filter_block">
                                            <div class="category-price-filter__fields">
                                                <label>
                                                    <span class="visually-hidden">Цена от</span>
                                                    <input class="no-focus-style" type="number" name="arrFilter_P1_MIN"
                                                        value="341" min="0">
                                                </label>
                                                <label>
                                                    <span class="visually-hidden">Цена до</span>
                                                    <input class="no-focus-style" type="number" name="arrFilter_P1_MAX"
                                                        value="799" min="0">
                                                </label>
                                            </div>
                                            <div class="category-price-filter__slider" aria-hidden="true">
                                                <span class="category-price-filter__track"></span>
                                                <span class="category-price-filter__range"></span>
                                                <span
                                                    class="category-price-filter__handle category-price-filter__handle--min"></span>
                                                <span
                                                    class="category-price-filter__handle category-price-filter__handle--max"></span>
                                            </div>
                                        </div>
                                        <div class="category-filter__items category-filter__items--radio">
                                            <?php foreach ($availabilityPriceRanges as $rangeItem): ?>
                                                <label class="category-filter__item category-filter__item--radio">
                                                    <input class="no-focus-style" type="radio" name="arrFilter_P1_RANGE"
                                                        value="<?= htmlspecialchars($rangeItem['value']) ?>"
                                                        <?= $rangeItem['checked'] ? 'checked' : '' ?>>
                                                    <span><?= $rangeItem['label'] ?></span>
                                                </label>
                                            <?php endforeach; ?>
                                        </div>
                                    </details>

                                    <?php foreach ($availabilityFilters as $filterTitle => $filterItems): ?>
                                        <details class="category-filter__group smart-filter-parameters-box bx-active" open>
                                            <summary class="smart-filter-parameters-box-title">
                                                <span class="smart-filter-parameters-box-title-text"><?= $filterTitle ?></span>
                                                <img class="category-filter__summary-arrow" src="/images/arrow-down.svg" alt="" aria-hidden="true">
                                            </summary>
                                            <span class="smart-filter-container-modef"></span>
                                            <div class="category-filter__items smart-filter-block" data-role="bx_filter_block">
                                                <?php foreach ($filterItems as $filterItem): ?>
                                                    <label class="category-filter__item">
                                                        <input class="no-focus-style" type="checkbox" name="filter[]"
                                                            value="<?= htmlspecialchars($filterItem) ?>">
                                                        <span><?= $filterItem ?></span>
                                                    </label>
                                                <?php endforeach; ?>
                                            </div>
                                        </details>
                                    <?php endforeach; ?>
                                        </div>

                                        <div class="smart-filter-button-box">
                                            <button class="button category-button category-button--primary category-filter__submit" id="set_filter" name="set_filter" type="submit">Показать</button>
                                            <button class="category-filter__reset" id="del_filter" name="del_filter" type="reset">
                                                <img class="category-filter__reset-icon" src="/images/category-filter__reset.svg" alt="" aria-hidden="true">
                                                <span>Сбросить фильтр</span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </aside>

                            <section class="category-products" aria-label="Товары в наличии">
                                <div class="category-products__grid">
                                    <?php foreach ($availabilityProducts as $product): ?>
                                        <article class="category-product-card<?= $product['quantity'] > 0 ? ' is-in-cart' : '' ?>">
                                            <a class="category-product-card__image" href="#">
                                                <img src="<?= $product['image'] ?>" alt="<?= htmlspecialchars($product['name']) ?>"
                                                    loading="lazy">
                                            </a>
                                            <a class="category-product-card__title" href="#"><?= $product['name'] ?></a>
                                            <div class="category-product-card__props">
                                                <div class="category-product-card__prop">
                                                    <span>Количество жил:</span>
                                                    <span><?= $product['cores'] ?></span>
                                                </div>
                                                <div class="category-product-card__prop">
                                                    <span>Номинальное напряжение, кВ:</span>
                                                    <span><?= $product['voltage'] ?></span>
                                                </div>
                                            </div>
                                            <div class="category-stock category-stock--card">
                                                <img class="category-check category-check--small" src="/images/Check15x15.svg" alt=""
                                                    aria-hidden="true">
                                                В наличии
                                            </div>
                                            <div class="category-product-card__price">от <strong><?= $product['price'] ?></strong> руб/м
                                            </div>
                                            <div class="category-product-card__actions">
                                                <a class="category-button category-button--details" href="#">Подробнее</a>
                                                <?php if ($product['quantity'] > 0): ?>
                                                    <div class="category-product-card__basket" data-product-basket>
                                                        <div class="category-quantity" aria-label="Количество товара">
                                                            <button type="button" aria-label="Уменьшить количество">-</button>
                                                            <input type="number" name="QUANTITY" value="<?= (int) $product['quantity'] ?>"
                                                                min="1">
                                                            <button type="button" aria-label="Увеличить количество">+</button>
                                                        </div>
                                                        <a class="category-button category-button--cart-icon" href="#basket"
                                                            aria-label="Товар в корзине">
                                                            <img src="/images/cart-orange.svg" alt="" aria-hidden="true">
                                                        </a>
                                                    </div>
                                                <?php else: ?>
                                                    <a class="category-button category-button--cart" href="#add-to-cart" role="button">
                                                        <img src="/images/cart-white.svg" alt="" aria-hidden="true">
                                                        В корзину
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        </article>
                                    <?php endforeach; ?>
                                </div>

                                <a class="category-load-more" href="#show-more-products" role="button">Показать еще 21</a>
                                <nav class="category-pagination" aria-label="Пагинация товаров">
                                    <a class="is-active" href="#">1</a>
                                    <a href="#">2</a>
                                    <a href="#">3</a>
                                    <a href="#">4</a>
                                </nav>
                            </section>
                        </div>
                    </div>
                <?php elseif ($tabCode === 'description'): ?>
                    <section class="category-description" aria-labelledby="category-description-title">
                        <h2 class="category-section-title category-description__title" id="category-description-title">Описание</h2>

                        <div class="category-description__layout">
                            <section class="category-description-block" aria-labelledby="category-description-construction-title">
                                <h3 id="category-description-construction-title">Конструкция кабеля</h3>
                                <ol class="category-description-construction">
                                    <?php foreach ($categoryDescriptionConstruction as $item): ?>
                                        <li><?= $item ?></li>
                                    <?php endforeach; ?>
                                </ol>
                            </section>

                            <aside class="category-description-decode" aria-labelledby="category-description-decode-title">
                                <h3 id="category-description-decode-title">Расшифровка кабеля ВВГ 3х240 - 6кВ</h3>

                                <div class="category-description-decode__formula hover-letters" aria-label="ВВГ 3х240 - 6кВ" data-decode-formula>
                                    <span class="hover-letter" data-index="0">В</span>
                                    <span class="hover-letter" data-index="1">В</span>
                                    <span class="hover-letter" data-index="2">Г</span>
                                    <span>&nbsp;</span>
                                    <span class="hover-letter" data-index="3">3</span>
                                    <span>x</span>
                                    <span class="hover-letter" data-index="4">240</span>
                                    <span>&nbsp;</span>
                                    <span class="hover-letter" data-index="5">6кВ</span>
                                </div>

                                <div class="category-description-decode__list decoding-items" data-decode-list>
                                    <?php foreach ($categoryDescriptionDecode as $itemIndex => $item): ?>
                                        <div class="letter-block" data-index="<?= (int) $itemIndex ?>">
                                            <div class="letter"><?= htmlspecialchars($item['code']) ?></div>
                                            <div class="letter_value"><?= htmlspecialchars($item['label']) ?></div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </aside>

                            <section class="category-description-gost" aria-labelledby="category-description-gost-title">
                                <h3 id="category-description-gost-title">ГОСТ</h3>
                                <div class="category-description-gost__list">
                                    <?php foreach ($categoryDescriptionGost as $item): ?>
                                        <a class="category-description-gost__link" href="<?= htmlspecialchars($item['url']) ?>" target="_blank" rel="noopener">
                                            <img src="/images/description/paper.svg" alt="" aria-hidden="true">
                                            <span><?= htmlspecialchars($item['title']) ?></span>
                                        </a>
                                    <?php endforeach; ?>
                                </div>
                            </section>

                            <a class="category-description__group-link" href="#category-panel-stock">Показать все товары группы</a>
                        </div>

                        <section class="category-description-callback" aria-labelledby="category-description-callback-title">
                            <div class="category-description-callback__image" aria-hidden="true">
                                <img src="/images/description/form-bg.png" alt="">
                            </div>

                            <div class="category-description-callback__content">
                                <h3 id="category-description-callback-title">Нужна дополнительная информация для оформления заказа?</h3>
                                <p>
                                    Отправьте заявку на почту <a href="mailto:zakaz@parrish.ru">zakaz@parrish.ru</a> и наши менеджеры ответят вам в течении <strong>15 минут</strong> или закажите обратный звонок и мы перезвоним к вам в течение <strong>20 секунд</strong>
                                </p>

                                <form class="category-description-form" action="#" method="post">
                                    <label class="category-description-form__phone">
                                        <span class="visually-hidden">Ваш телефон</span>
                                        <input type="tel" name="description_phone" placeholder="Ваш телефон">
                                    </label>
                                    <button class="category-description-form__submit" type="submit">Перезвоните мне</button>

                                    <label class="category-description-form__agree checkbox_wr">
                                        <input type="checkbox" name="description_agree" checked required>
                                        <span class="checkbox"></span>
                                        <span class="category-description-form__agree-text">Даю согласие на обработку <a href="/privacy/" target="_blank" rel="noopener">персональных данных</a></span>
                                    </label>
                                </form>
                            </div>
                        </section>
                    </section>
                <?php elseif ($tabCode === 'analogs'): ?>
                    <section class="category-analogs" aria-labelledby="category-analogs-title">
                        <h2 class="category-section-title category-analogs__title" id="category-analogs-title">Аналоги</h2>

                        <div class="category-analogs__table">
                            <div class="category-analogs__head" role="row">
                                <span>Марка</span>
                                <span>Описание</span>
                                <span aria-hidden="true"></span>
                            </div>

                            <?php foreach ($categoryAnalogItems as $analog): ?>
                                <article class="category-analogs__row">
                                    <div class="category-analogs__brand"><?= htmlspecialchars($analog['brand']) ?></div>
                                    <div class="category-analogs__description"><?= htmlspecialchars($analog['description']) ?></div>
                                    <a class="category-analogs__button" href="<?= htmlspecialchars($analog['url']) ?>">Смотреть все товары</a>
                                </article>
                            <?php endforeach; ?>
                        </div>
                    </section>
                <?php elseif ($tabCode === 'delivery'): ?>
                    <section class="category-payment" aria-labelledby="category-payment-title">
                        <h2 class="category-section-title category-payment__title" id="category-payment-title">Оплата и доставка</h2>

                        <div class="category-payment__grid">
                            <?php foreach ($paymentDeliveryItems as $item): ?>
                                <article class="category-payment-card category-payment-card--<?= htmlspecialchars($item['modifier']) ?>">
                                    <header class="category-payment-card__header">
                                        <span class="category-payment-card__icon" aria-hidden="true">
                                            <img src="<?= htmlspecialchars($item['icon']) ?>" alt="">
                                        </span>
                                        <span class="category-payment-card__heading">
                                            <span class="category-payment-card__type"><?= htmlspecialchars($item['type']) ?></span>
                                            <strong><?= htmlspecialchars($item['title']) ?></strong>
                                            <?php if (!empty($item['subtitle'])): ?>
                                                <span class="category-payment-card__subtitle"><?= htmlspecialchars($item['subtitle']) ?></span>
                                            <?php endif; ?>
                                        </span>
                                    </header>

                                    <?php if (!empty($item['text'])): ?>
                                        <div class="category-payment-card__text">
                                            <?php foreach ($item['text'] as $paragraph): ?>
                                                <p><?= htmlspecialchars($paragraph) ?></p>
                                            <?php endforeach; ?>
                                        </div>
                                    <?php endif; ?>

                                    <?php if (!empty($item['bullets']) || !empty($item['logos'])): ?>
                                        <div class="category-payment-card__details">
                                            <?php if (!empty($item['bullets'])): ?>
                                                <ul class="category-payment-card__list">
                                                    <?php foreach ($item['bullets'] as $bullet): ?>
                                                        <li><?= htmlspecialchars($bullet) ?></li>
                                                    <?php endforeach; ?>
                                                </ul>
                                            <?php endif; ?>

                                            <?php if (!empty($item['logos'])): ?>
                                                <div class="category-payment-card__logos" aria-label="Транспортные компании">
                                                    <?php foreach ($item['logos'] as $logo): ?>
                                                        <span><img src="<?= htmlspecialchars($logo) ?>" alt=""></span>
                                                    <?php endforeach; ?>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>

                                    <?php if (!empty($item['textAfter'])): ?>
                                        <div class="category-payment-card__text category-payment-card__text--after">
                                            <?php foreach ($item['textAfter'] as $paragraph): ?>
                                                <p><?= htmlspecialchars($paragraph) ?></p>
                                            <?php endforeach; ?>
                                        </div>
                                    <?php endif; ?>

                                    <?php if (!empty($item['note'])): ?>
                                        <div class="category-payment-card__note">
                                            <span class="category-payment-card__note-icon" aria-hidden="true">
                                                <img src="/images/Pay-Delivery/warning.svg" alt="">
                                            </span>
                                            <?php if (strpos($item['note'], 'ВАЖНО:') === 0): ?>
                                                <p><strong>ВАЖНО:</strong><?= htmlspecialchars(substr($item['note'], strlen('ВАЖНО:'))) ?></p>
                                            <?php else: ?>
                                                <p><?= htmlspecialchars($item['note']) ?></p>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </article>
                            <?php endforeach; ?>
                        </div>
                    </section>
                <?php elseif ($tabCode === 'qa'): ?>
                    <section class="category-faq" aria-labelledby="category-faq-title">
                        <h2 class="category-section-title category-faq__title" id="category-faq-title">Вопрос - ответ</h2>

                        <div class="category-faq__layout">
                            <div class="category-faq__list" data-faq-accordion>
                                <?php foreach ($categoryFaqItems as $faqItem): ?>
                                    <details class="category-faq__item" <?= !empty($faqItem['open']) ? 'open' : '' ?>>
                                        <summary class="category-faq__question">
                                            <span><?= htmlspecialchars($faqItem['question']) ?></span>
                                            <span class="category-faq__icon" aria-hidden="true"></span>
                                        </summary>
                                        <div class="category-faq__answer">
                                            <?php foreach ($faqItem['answer'] as $answerParagraph): ?>
                                                <p><?= htmlspecialchars($answerParagraph) ?></p>
                                            <?php endforeach; ?>
                                        </div>
                                    </details>
                                <?php endforeach; ?>
                            </div>

                            <aside class="category-faq-form" aria-labelledby="category-faq-form-title">
                                <div class="category-faq-form__intro">
                                    <h3 id="category-faq-form-title">Не нашли ответа на&nbsp;свой вопрос?</h3>
                                    <p>Задайте их нам, мы будем рады вам помочь</p>
                                </div>

                                <form class="category-faq-form__form" action="#" method="post">
                                    <label class="category-faq-form__field">
                                        <span>ФИО*</span>
                                        <input type="text" name="faq_name" placeholder="например Иванов Иван Иванович" required>
                                    </label>
                                    <label class="category-faq-form__field">
                                        <span>Ваш e-mail*</span>
                                        <input type="email" name="faq_email" placeholder="например ivanov@mail.ru" required>
                                    </label>
                                    <label class="category-faq-form__field">
                                        <span>Ваш телефон*</span>
                                        <input type="tel" name="faq_phone" placeholder="+7 (_ _ _) - _ _ _ - _ _ - _ _" required>
                                    </label>
                                    <label class="category-faq-form__field">
                                        <span>Сообщение*</span>
                                        <textarea name="faq_message" placeholder="Задайте вопрос" required></textarea>
                                    </label>

                                    <label class="category-faq-form__agree checkbox_wr">
                                        <input type="checkbox" name="faq_agree" checked required>
                                        <span class="checkbox"></span>
                                        <span class="category-faq-form__agree-text">Даю согласие на обработку <a href="/privacy/" target="_blank" rel="noopener">персональных данных</a></span>
                                    </label>

                                    <button class="category-faq-form__submit" type="submit">Задать вопрос</button>
                                </form>
                            </aside>
                        </div>
                    </section>
                <?php else: ?>
                <?php endif; ?>
            </div>
        </section>
    <?php endforeach; ?>
</main>
