<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);

$img1921 = CFile::GetPath($arResult["PROPERTIES"]['BG_1921']["VALUE"]);

if ($img1921=="") {
    $img1921 = SITE_TEMPLATE_PATH . "/images/bg/bg-hero-product-page-template-xl.webp";
}
$img768 = CFile::GetPath($arResult["PROPERTIES"]['BG_768']["VALUE"]);
if ($img768=="") {
    $img768 = SITE_TEMPLATE_PATH . "/images/bg/bg-hero-product-page-template-d.webp";
}
$img767 = CFile::GetPath($arResult["PROPERTIES"]['BG_767']["VALUE"]);
if ($img767=="") {
    $img767 = SITE_TEMPLATE_PATH . "/images/bg/bg-hero-product-page-template.webp";
}

$imgtask = CFile::GetPath($arResult["PROPERTIES"]['TASKS_IMG']["VALUE"]);
if (!$imgtask) {
    $imgtask = SITE_TEMPLATE_PATH . "/images/description/description-1.png";
}

$imgtaskbg = CFile::GetPath($arResult["PROPERTIES"]['BG_TASKS']["VALUE"]);
if (!$imgtaskbg) {
    $imgtaskbg = SITE_TEMPLATE_PATH . "/images/bg/bg-description-xl.webp";
}

$imgtask1921 = CFile::GetPath($arResult["PROPERTIES"]['BG_TASKS_1921']["VALUE"]);
if (!$imgtask1921) {
    $imgtask1921 = SITE_TEMPLATE_PATH . "/images/bg/bg-description-xl.webp";
}

$imgtask768 = CFile::GetPath($arResult["PROPERTIES"]['BG_TASKS_768']["VALUE"]);
if (!$imgtask768) {
    $imgtask768 = SITE_TEMPLATE_PATH . "/images/bg/bg-description-d.webp";
}
$imgtask767 = CFile::GetPath($arResult["PROPERTIES"]['BG_TASKS_767']["VALUE"]);
if ($imgtask767=="") {
    $imgtask767 = SITE_TEMPLATE_PATH . "/images/bg/bg-description.webp";
}

$adv = CFile::GetPath($arResult["PROPERTIES"]['BG_ADVANTAGES']["VALUE"]);
if (!$adv) {
    $adv = SITE_TEMPLATE_PATH . "/images/bg/bg-advantages.png";
}

$adv1921 = CFile::GetPath($arResult["PROPERTIES"]['BG_ADVANTAGES_1921']["VALUE"]);
if (!$adv1921) {
    $adv1921 = SITE_TEMPLATE_PATH . "/images/bg/bg-advantages-xl.webp";
}

$adv768 = CFile::GetPath($arResult["PROPERTIES"]['BG_ADVANTAGES_768']["VALUE"]);
if (!$adv768) {
    $adv768 = SITE_TEMPLATE_PATH . "/images/bg/bg-advantages-d.webp";
}

$adv767 = CFile::GetPath($arResult["PROPERTIES"]['BG_ADVANTAGES_767']["VALUE"]);
if ($adv767=="") {
    $adv767 = SITE_TEMPLATE_PATH . "/images/bg/bg-advantages.webp";
}


$faqimg = CFile::GetPath($arResult["PROPERTIES"]['BG_FAQ']["VALUE"]);

$navIcon=CFile::GetPath($arResult['PROPERTIES']['NAV_ICON']['VALUE']);

if ($faqimg=="") {
    $faqimg = SITE_TEMPLATE_PATH . "/images/bg/bg-faq-cta.png";
}

$faqimg1921 = CFile::GetPath($arResult["PROPERTIES"]['BG_FAQ_1921']["VALUE"]);
if ($faqimg1921=="") {
    $faqimg1921 = SITE_TEMPLATE_PATH . "/images/bg/bg-faq-cta-xl.webp";
}

$faqimg768 = CFile::GetPath($arResult["PROPERTIES"]['BG_FAQ_768']["VALUE"]);
if ($faqimg768=="") {
    $faqimg768 = SITE_TEMPLATE_PATH . "/images/bg/bg-faq-cta-d.webp";
}
$faqimg767 = CFile::GetPath($arResult["PROPERTIES"]['BG_FAQ_767']["VALUE"]);
if ($faqimg767=="") {
    $faqimg768 = SITE_TEMPLATE_PATH . "/images/bg/bg-faq-cta.webp";
}

if ($arResult["DETAIL_PICTURE"]["SRC"]==""){
    $arResult["DETAIL_PICTURE"]["SRC"]= SITE_TEMPLATE_PATH . "/images/hero/hero-products-template.webp";
}


if (is_array($arResult["PROPERTIES"]['TASKS_TITLE']["~VALUE"])){
    $taskTitle=$arResult["PROPERTIES"]['TASKS_TITLE']["~VALUE"]['TEXT'];
} else  $taskTitle="решаемые задачи";
if ($arResult["PROPERTIES"]['TAG_DESCRIPTION']["VALUE"]){
    $taskTag=$arResult["PROPERTIES"]['TAG_DESCRIPTION']["VALUE"];
} else  $taskTag="описание";


if (is_array($arResult["PROPERTIES"]['POSSIBILITIES_TITLE']["~VALUE"])){
    $possibilitesTitle=$arResult["PROPERTIES"]['POSSIBILITIES_TITLE']["~VALUE"]['TEXT'];
} else  $possibilitesTitle="Возможности";

if ($arResult["PROPERTIES"]['POSSIBILITIES_TAG']["VALUE"]){
    $possibilitesTag=$arResult["PROPERTIES"]['POSSIBILITIES_TAG']["VALUE"];
} else  $possibilitesTag="Возможности";


if (is_array($arResult["PROPERTIES"]['ADVANTAGES_TITLE']["~VALUE"])){
    $advantagesTitle=$arResult["PROPERTIES"]['ADVANTAGES_TITLE']["~VALUE"]['TEXT'];
} else  $advantagesTitle="Почему ".$arResult['NAME'];

if ($arResult["PROPERTIES"]['ADVANTAGES_TAG']["VALUE"]){
    $advantagesTag=$arResult["PROPERTIES"]['ADVANTAGES_TAG']["VALUE"];
} else  $advantagesTag="Преимущества";

if (is_array($arResult["PROPERTIES"]['FAQ_TITLE']["~VALUE"])){
    $faqTitle=$arResult["PROPERTIES"]['FAQ_TITLE']["~VALUE"]['TEXT'];
} else  $faqTitle="часто<br>задаваемые<br>вопросы";

if ($arResult["PROPERTIES"]['FAQ_TAG']["VALUE"]){
    $faqTag=$arResult["PROPERTIES"]['FAQ_TAG']["VALUE"];
} else  $faqTag="вопросы и ответы";

if (is_array($arResult["PROPERTIES"]['MATERIALS_TITLE']["~VALUE"])){
    $materialsTitle=$arResult["PROPERTIES"]['MATERIALS_TITLE']["~VALUE"]['TEXT'];
} else  $materialsTitle="полезное о продукте";

if ($arResult["PROPERTIES"]['MATERIALS_TAG']["VALUE"]){
    $materialsTag=$arResult["PROPERTIES"]['MATERIALS_TAG']["VALUE"];
} else  $materialsTag="материалы";

if (is_array($arResult["PROPERTIES"]['DOCUMENTS_TITLE']["~VALUE"])){
    $documentsTitle=$arResult["PROPERTIES"]['DOCUMENTS_TITLE']["~VALUE"]['TEXT'];
} else  $documentsTitle="документы и презетации";

if ($arResult['PROPERTIES']['NAME']['VALUE']){
    $name=$arResult['PROPERTIES']['NAME']['VALUE'];
} else    $name=$arResult['NAME'];

?>
<section class="page-section page-section--p-t-header">
    <div class="hero hero--products-template" data-animate="hero-block">
        <div class="container container--no-p">
                <div class="hero__inner">
                    <div class="hero__bg">
                        <div class="hero__bg-gradient">
                            <picture>
                                <source media="(min-width: 1921px)"
                                        srcset="<?= $img1921 ?>"
                                        type="image/webp">
                                <source media="(min-width: 768px)"
                                        srcset="<?= $img768 ?>"
                                        type="image/webp">
                                <source media="(max-width: 767px)"
                                        srcset="<?= $img767 ?>"
                                        type="image/webp">
                                <img src="<?= $arResult["PREVIEW_PICTURE"]["SRC"] ?>"
                                     srcset="<?= $arResult["PREVIEW_PICTURE"]["SRC"] ?>"
                                     alt="Изображение" width="1512" height="744" loading="lazy">
                            </picture>

                        </div>
                    </div>
                    <div class="hero__bg-pixels hero__bg-pixels--t-l" data-pixels="hero-solutions-t-l"
                         data-pixels-qty="88">
                    </div>
                    <div class="hero__bg-pixels hero__bg-pixels--b-r" data-pixels="hero-solutions-b-r"
                         data-pixels-qty="36">

                    </div>
                    <div class="hero__container">
                        <div class="breadcrumbs hero__breadcrumbs">
                            <ol class="breadcrumbs__list">
                                <li class="breadcrumbs__item">
                                    <a href="/" class="breadcrumbs__link">

                                        <span class="breadcrumbs__link-text">Главная</span>

                                    </a>
                                </li><li class="breadcrumbs__item">
                                    <a class="breadcrumbs__link" href="/products/">

                                        <span class="breadcrumbs__link-text">Продукты</span>

                                    </a>
                                </li>
                                <li class="breadcrumbs__item">
                          <span class="breadcrumbs__link breadcrumbs__link--current">

                            <span class="breadcrumbs__link-text"><?=$name?></span>

                </span>
                                </li>
                            </ol>
                        </div>
                            <div class="hero__img" data-animate="hero-image-d-index">
                                <picture>
                                    <source srcset="<?= $arResult["DETAIL_PICTURE"]["SRC"] ?>"
                                            type="image/webp">
                                    <img src="<?= $arResult["DETAIL_PICTURE"]["SRC"] ?>"
                                         srcset="<?= $arResult["DETAIL_PICTURE"]["SRC"] ?>"
                                         alt="Изображение" width="825" height="740" loading="lazy">
                                </picture>
                            </div>
                        <div class="hero__text-wrap">
                            <div class="hero__title-description-wrap">
                                <h1 class="title title--h1 hero__title"><?= $arResult['PROPERTIES']['PP_TITLE']['~VALUE'] ?></h1>
                                <p class="hero__text"><?= $arResult['DETAIL_TEXT'] ?></p>

                            </div>
                        </div>
                    </div>
                    <div class="hero__marquee-wrap">
                        <div class="marquee hero__marquee marquee--hero-main">
                            <ul class="marquee__list">
                                <?php foreach ($arResult['SPECIALS'] as $item) : ?>
                                    <li class="marquee__item">
                                        <a target="_blank"
                                           href="<?= $item['PROPERTY_LINK_VALUE'] ?>"><?= $item['NAME'] ?></a>
                                    </li>
                                <? endforeach; ?>
                            </ul>
                            <ul class="marquee__list">
                                <?php foreach ($arResult['SPECIALS'] as $item) : ?>
                                    <li class="marquee__item">
                                        <a target="_blank"
                                           href="<?= $item['PROPERTY_LINK_VALUE'] ?>"><?= $item['NAME'] ?></a>
                                    </li>
                                <? endforeach; ?>
                            </ul>
                        </div>
                    </div>
                </div>

        </div>
    </div>
</section>
<div class="product-header" data-product-header="header">
    <div class="product-header__wrap">
        <div class="container">

            <div class="product-header__line"></div>
            <div class="product-header__inner" data-product-header="inner">
                <div class="product-header__icon product-header__icon--data">
                    <?if ($navIcon){?>
                        <img src="<?=$navIcon?>" alt="Картинка" width="32" height="32" loading="lazy">
                       <?} else {?>
                        <svg width="1em" height="1em" viewBox="0 0 32 32" data-icon="icon-data-pk">
                           <symbol id="ai:local:icon-data-pk"><g fill="none" stroke-width="1.5"><path stroke="#0B2027" stroke-linecap="round" stroke-linejoin="round" d="M16.102 29.334a2.424 2.424 0 0 1-2.424-2.425V26.8a1.999 1.999 0 0 0-1.31-1.83 2 2 0 0 0-2.205.4l-.073.073a2.427 2.427 0 1 1-3.43-3.43l.072-.073a2 2 0 0 0 .4-2.206 2 2 0 0 0-1.83-1.213h-.206a2.424 2.424 0 1 1 0-4.848h.11a2 2 0 0 0 1.83-1.309 2 2 0 0 0-.4-2.206l-.073-.073a2.425 2.425 0 1 1 3.43-3.43l.073.073a2 2 0 0 0 2.206.4h.097a2 2 0 0 0 1.212-1.83V5.09a2.424 2.424 0 0 1 2.424-2.424"></path><path stroke="#00D29D" d="M19.146 16a3.546 3.546 0 1 1-7.093 0 3.546 3.546 0 0 1 7.092 0Z"></path><circle cx="27.416" cy="16.001" r="2.472" stroke="#00D29D"></circle><circle cx="25.259" cy="6.334" r="2.472" stroke="#00D29D"></circle><circle cx="25.259" cy="25.668" r="2.472" stroke="#00D29D"></circle><path stroke="#00D29D" stroke-linecap="round" d="m18.818 12.778 4.297-4.297m-4.297 10.741 4.297 4.297M18.818 16h6.445"></path></g></symbol><use xlink:href="#ai:local:icon-data-pk"></use>
                        </svg>
                    <?}?>
                </div>
                <button class="product-header__active-btn" data-product-header="active-btn" type="button">
                    описание
                </button>
                <div class="product-header__icon product-header__icon--dropdown">
                    <svg width="1em" height="1em" viewBox="0 0 18 18" data-icon="icon-chevron-down">

                        <use xlink:href="#ai:local:icon-chevron-down"></use>

                    </svg>
                </div>

                <div class="product-header__list-wrap swiper swiper-backface-hidden swiper-initialized swiper-horizontal swiper-free-mode swiper-ios" data-product-header-slider="container">
                    <ul class="product-header__list swiper-wrapper">
                        <li class="product-header__item swiper-slide swiper-slide-active" style="margin-right: 16px;">
                            <a class="product-header__link is-active" href="#description" data-navigation-link="">
                                описание
                            </a>
                        </li><li class="product-header__item swiper-slide swiper-slide-next" style="margin-right: 16px;">
                            <a class="product-header__link" href="#possibilities" data-navigation-link="">
                                возможности
                            </a>
                        </li><li class="product-header__item swiper-slide" style="margin-right: 16px;">
                            <a class="product-header__link" href="#advantages" data-navigation-link="">
                                преимущества
                            </a>
                        </li><li class="product-header__item swiper-slide" style="margin-right: 16px;">
                            <a class="product-header__link" href="#faq" data-navigation-link="">
                                вопросы и ответы
                            </a>
                        </li><li class="product-header__item swiper-slide" style="margin-right: 16px;">
                            <a class="product-header__link" href="#materials" data-navigation-link="">
                                материалы
                            </a>
                        </li><li class="product-header__item swiper-slide" style="margin-right: 16px;">
                            <a class="product-header__link product-header__link--green" href="#demo" data-navigation-link="">
                                демо
                            </a>
                        </li>
                    </ul>
                </div>
                <button class="button product-header__btn"><span class="button__text">запросить демо</span><span class="button__icon">
        <svg width="1em" height="1em" viewBox="0 0 20 20" data-icon="icon-arrow-up-right">

  <use xlink:href="#ai:local:icon-arrow-up-right"></use>

</svg>
      </span></button>
            </div>

        </div>
    </div>
</div>
<section class="page-section page-section--no-pt" id="description">

    <div class="description-section">
        <div class="description-section__wrap">
            <div class="description-section__bg">
                <div class="description-section__pixels" data-pixels="description" data-pixels-qty="33">
                </div>
                <div class="description-section__bg-img">
                    <picture>
                        <source media="(min-width: 1921px)"
                                srcset="<?= $imgtask1921 ?>"
                                type="image/webp">
                        <source media="(min-width: 768px)"
                                srcset="<?= $imgtask768 ?>"
                                type="image/webp">
                        <source media="(max-width: 767px)"
                                srcset="<?= $imgtask767 ?>"
                                type="image/webp">
                        <img src="<?= $imgtaskbg ?>"
                             srcset="<?= $imgtaskbg ?>"
                             alt="Изображение" width="1045" height="438" loading="lazy">
                    </picture>

                </div>
                <div class="description-section__img">

                    <picture>
                        <source srcset="<?= $imgtask ?>"
                                type="image/webp">
                        <img src="<?= $imgtask ?>"
                             srcset="<?= $imgtask ?>"
                             alt="Картинка" width="827" height="880" loading="lazy">
                    </picture>
                </div>
            </div>
            <div class="container description-section__container container--wide">

                <div class="description-section__inner">
                    <div class="description-section__aside">
                        <div class="section-title description-section__section-title">
                            <div class="section-title__wrap">
                                <p class="section-title__badge"><?=$taskTag?></p>
                                <h2 data-animate="title"
                                    class="title title--h2 section-title__title words lines splitting"><?=$taskTitle?></h2>
                            </div>

                        </div>
                    </div>
                    <div class="description-section__main">
                        <div class="description-section__line-wrap">
                            <div class="description-section__line description-section__line--xl">
                                <svg xmlns="http://www.w3.org/2000/svg" width="981" height="669"
                                     viewBox="0 0 981 669" fill="none">
                                    <path d="M0.394253 1.71399L943.288 1.71379C963.171 1.71378 979.288 17.8315 979.288 37.7138L979.288 322.383C979.288 342.265 963.171 358.383 943.288 358.383L212.253 358.383C192.371 358.383 176.253 374.501 176.253 394.383L176.253 753.191"
                                          stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                    <path class="line-progress"
                                          d="M0.394253 1.71399L943.288 1.71379C963.171 1.71378 979.288 17.8315 979.288 37.7138L979.288 322.383C979.288 342.265 963.171 358.383 943.288 358.383L212.253 358.383C192.371 358.383 176.253 374.501 176.253 394.383L176.253 753.191"
                                          stroke="#00D29D" stroke-width="2"></path>
                                </svg>
                            </div>
                            <div class="description-section__line description-section__line--desktop">
                                <svg xmlns="http://www.w3.org/2000/svg" width="694" height="489"
                                     viewBox="0 0 694 489" fill="none">
                                    <path d="M0.00264904 1.00063L657 1.00049C676.883 1.00048 693 17.1182 693 37.0005L693 217.5C693 237.383 676.883 253.5 657 253.5L160.5 253.5C140.618 253.5 124.5 269.618 124.5 289.5L124.5 533"
                                          stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                    <path d="M0.00264904 1.00063L657 1.00049C676.883 1.00048 693 17.1182 693 37.0005L693 217.5C693 237.383 676.883 253.5 657 253.5L160.5 253.5C140.618 253.5 124.5 269.618 124.5 289.5L124.5 533"
                                          stroke="#00D29D" stroke-width="2"></path>
                                </svg>
                            </div>
                            <div class="description-section__line description-section__line--mobile">
                                <svg xmlns="http://www.w3.org/2000/svg" width="2" height="393" viewBox="0 0 2 393"
                                     fill="none">
                                    <path d="M1 0.148804L0.999935 393.001" stroke="#0B2027"
                                          stroke-opacity="0.1"></path>
                                    <path d="M1 0.148804L0.999935 393.001" stroke="#00D29D"></path>
                                </svg>
                            </div>
                        </div>
                        <ol class="description-section__list">
                            <? foreach ($arResult['TASKS'] as $k => $item) {
                                $icon = CFile::GetPath($item['PROPERTIES']['ICON']['VALUE']);

                                ?>
                                <li class="description-section__item">
                                    <div class="solution-card">
                                        <div class="solution-card__inner">
                                            <div class="solution-card__top-wrap">
                                                <div class="solution-card__icon">
                                                    <img src="<?= $icon ?>" alt="Картинка"
                                                         width="36" height="36" loading="lazy">

                                                </div>
                                                <span class="solution-card__badge">0<?= $k + 1 ?></span>
                                            </div>
                                            <div class="solution-card__texts">
                                                <p class="solution-card__text"><?= $item['PREVIEW_TEXT'] ?></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            <? } ?>

                        </ol>
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>
<?if (!empty($arResult['POSSIBILITIES'])){?>
<section class="page-section" id="possibilities">

    <div class="possibilities no-tr" data-tabs="parent" data-delay="0">
        <div class="container">

            <div class="possibilities__inner">
                <div class="section-title possibilities__title">
                    <div class="section-title__wrap">
                        <p class="section-title__badge"><?=$possibilitesTag?></p>
                        <h2 data-animate="title"
                            class="title title--h2 section-title__title words lines splitting"><?=$possibilitesTitle?>  </h2>
                    </div>

                </div>
                <div class="tab-controls swiper possibilities__tabs-control tab-controls--horizontal swiper-initialized swiper-horizontal swiper-free-mode swiper-backface-hidden"
                     data-tabs="controls" data-tabs-controls-slider="container">
                    <ul class="tab-controls__list swiper-wrapper" data-tabs-controls-slider="wrapper">
                        <? foreach ($arResult['POSSIBILITIES'] as $k => $item) { ?>
                            <li class="tab-controls__item swiper-slide <?= ($k == 0) ? 'swiper-slide-active' : '' ?>"
                                data-tabs-controls-slider="slide" style="margin-right: 24px;">
                                <button class="tab-controls__btn <?= ($k == 0) ? 'is-active' : '' ?>"
                                        data-tabs="control" data-index="0">
                                <span class="tab-controls__icon">
                                    <svg width="0.93em" height="1em" viewBox="0 0 12 13" data-icon="icon-right">
                                      <symbol id="ai:local:icon-right"><path fill="none" stroke="currentColor"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"
                                                                             stroke-miterlimit="10"
                                                                             d="M7.215 3.465 10.25 6.5 7.215 9.535M1.75 6.5h8.415"></path></symbol><use
                                                xlink:href="#ai:local:icon-right"></use>
                                    </svg>
                                </span>
                                    <span class="tab-controls__text"><?= $item['NAME'] ?></span>
                                </button>
                            </li>
                        <? } ?>
                    </ul>
                </div>
                <div class="possibilities__main" data-tabs="content" style="height: 905px;">
                    <? foreach ($arResult['POSSIBILITIES'] as $k => $item) { ?>
                        <div class="possibilities__element <?= ($k == 0) ? 'is-active' : '' ?>" data-tabs="element">
                            <div class="possibilities__element-aside">
                                <h3 class="title possibilities__element-title"><?= $item['NAME'] ?></h3>
                                <div class="possibilities__element-texts">
                                    <p class="possibilities__element-text"><?= $item['PREVIEW_TEXT'] ?></p>
                                </div>
                                <a href="#demo"
                                   class="button button--size-xl-m possibilities__element-btn"><span
                                            class="button__text">запросить демо</span><span class="button__icon">
        <svg width="1em" height="1em" viewBox="0 0 20 20" data-icon="icon-arrow-up-right">

  <use xlink:href="#ai:local:icon-arrow-up-right"></use>

</svg>
      </span></a>
                            </div>
                            <div class="possibilities__element-cards">
                                <ul class="possibilities__element-cards-list">
                                    <? foreach ($item['PROPERTIES']['POSSIBILITIES']['VALUE'] as $i => $arItem) {
                                        switch ($i) {
                                            case 0:
                                                $class = "green";
                                                $bg = "green";
                                                break;
                                            case 1:
                                                $class = "purple";
                                                $bg = "violet";
                                                break;
                                            case 2:
                                                $class = "yellow";
                                                $bg = "yellow";
                                                break;
                                            case 3:
                                                $class = "grey";
                                                $bg = "grey";
                                                break;
                                        }
                                        ?>
                                        <li class="possibilities__element-cards-item">
                                            <div class="possibilities-card possibilities-card--<?= $class ?>"
                                                 data-animate-pixels="parent">
                                                <div class="possibilities-card__bg-wrap">
                                                    <div class="possibilities-card__bg-image">
                                                        <picture>
                                                            <source media="(min-width: 1921px)"
                                                                    srcset="<?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>-xl
                                                            .webp, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>-xl@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>-xl@3x.webp 3x"
                                                                    type="image/webp">
                                                            <source media="(min-width: 768px)"
                                                                    srcset="<?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>-d.webp, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>-d@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>-d@3x.webp 3x"
                                                                    type="image/webp">
                                                            <source media="(max-width: 767px)"
                                                                    srcset="<?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>.webp, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>@3x.webp 3x"
                                                                    type="image/webp">
                                                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>.png"
                                                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>@2x.png 2x,  <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-possibilities-card-<?= $bg ?>@3x.png 3x"
                                                                 alt="Изображение" width="473" height="246"
                                                                 loading="lazy">
                                                        </picture>

                                                    </div>
                                                    <div class="possibilities-card__bg-pixels"
                                                         data-pixels="possibilities"
                                                         data-pixels-qty="21" data-animate-pixels="grid">
                                                    </div>
                                                </div>
                                                <div class="possibilities-card__inner">
    <span class="possibilities-card__icon">
      <svg width="1em" height="1em" viewBox="0 0 18 18" data-icon="card-indicator">

  <symbol id="ai:local:card-indicator"><g fill="none"><rect width="17" height="17" x=".5" y=".5" stroke="currentColor"
                                                            rx="4.5"></rect><rect width="12" height="12" x="3" y="3"
                                                                                  fill="currentColor" rx="2"></rect></g></symbol><use
                  xlink:href="#ai:local:card-indicator"></use>

</svg>
    </span>
                                                    <p class="possibilities-card__text"><?= $arItem ?></p>
                                                </div>
                                            </div>
                                        </li>
                                    <? } ?>

                                </ul>
                            </div>
                        </div>
                    <? } ?>
                </div>
            </div>

        </div>
    </div>

</section>
<?}?>
<section class="page-section" id="advantages">

    <div class="advantages">
        <div class="advantages__wrap" style="">
            <div class="advantages__bg">
                <div class="advantages__bg-img">

                    <picture>
                        <source media="(min-width: 1921px)"
                                srcset="<?= $adv1921 ?>"
                                type="image/webp">
                        <source media="(min-width: 768px)"
                                srcset="<?= $adv768 ?>"
                                type="image/webp">
                        <source media="(max-width: 767px)"
                                srcset="<?= $adv767 ?>"
                                type="image/webp">
                        <img src="<?= $adv ?>"
                             srcset="<?= $adv ?>"
                             alt="Изображение" width="1090" height="855" loading="lazy">
                    </picture>

                </div>
                <div class="advantages__bg-pixels" data-pixels="advantages" data-pixels-qty="120">

                </div>
            </div>
            <div class="container advantages__container">

                <div class="advantages__inner">
                    <div class="advantages__line-wrap">
                        <div class="advantages__line advantages__line--xl">
                            <svg width="1370" height="1107" viewBox="0 0 1370 1107" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                                <path d="M1368.33 -6.17745L1368.33 524.913C1368.33 544.795 1352.21 560.913 1332.33 560.913L37.8268 560.913C17.9445 560.913 1.82677 577.031 1.8268 596.913L1.82745 1132.09" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                <path class="line-progress" d="M1368.33 -6.17745L1368.33 524.913C1368.33 544.795 1352.21 560.913 1332.33 560.913L37.8268 560.913C17.9445 560.913 1.82677 577.031 1.8268 596.913L1.82745 1132.09" stroke="url(#paint0_linear_6259_17352)" stroke-width="2" stroke-dasharray="2473" stroke-dashoffset="2473"></path>
                                <defs>
                                    <linearGradient id="paint0_linear_6259_17352" x1="1335.83" y1="196.087" x2="768.736" y2="954.316" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#00D29D" stop-opacity="0"></stop>
                                        <stop offset="1" stop-color="#00D29D"></stop>
                                    </linearGradient>
                                </defs>
                            </svg>
                        </div>
                        <div class="advantages__line advantages__line--desktop">
                            <svg width="1369" height="800" viewBox="0 0 1369 800" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                                <path d="M1367.5 -181.265L1367.5 349.825C1367.5 369.707 1351.38 385.825 1331.5 385.825L36.9986 385.825C17.1164 385.825 0.998649 401.943 0.998673 421.825L0.99932 957" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                <path class="line-progress" d="M1367.5 -181.265L1367.5 349.825C1367.5 369.707 1351.38 385.825 1331.5 385.825L36.9986 385.825C17.1164 385.825 0.998649 401.943 0.998673 421.825L0.99932 957" stroke="url(#paint0_linear_3823_49981)" stroke-width="2" stroke-dasharray="2473" stroke-dashoffset="2473"></path>
                                <defs>
                                    <linearGradient id="paint0_linear_3823_49981" x1="1335" y1="21" x2="767.908" y2="779.229" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#00D29D" stop-opacity="0"></stop>
                                        <stop offset="1" stop-color="#00D29D"></stop>
                                    </linearGradient>
                                </defs>
                            </svg>
                        </div>
                        <div class="advantages__line advantages__line--mobile">
                            <svg width="2" height="269" viewBox="0 0 2 269" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.605469 -72L0.605475 268.5" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                <path class="line-progress-top" d="M0.605469 -72L0.605475 268.5" stroke-dasharray="340" stroke-dashoffset="340" stroke-width="2" stroke="url(#paint0_linear_3823_51311)"></path>
                                <defs>
                                    <linearGradient id="paint0_linear_3823_51311" x1="-858.394" y1="240.499" x2="-477.292" y2="767.738" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#00D29D" stop-opacity="0"></stop>
                                        <stop offset="1" stop-color="#00D29D"></stop>
                                    </linearGradient>
                                </defs>
                            </svg>
                            <svg width="2" height="826" viewBox="0 0 2 826" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.875 0L0.874996 904.5" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                <path class="line-progress-bottom" d="M0.875 0L0.874996 904.5" stroke="#00D29D" stroke-dasharray="904" stroke-dashoffset="904" stroke-opacity="1" stroke-width="2"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="advantages__header">
                        <div class="section-title">
                            <div class="section-title__wrap">
                                <p class="section-title__badge"><?=$advantagesTag?></p>
                                <h2 data-animate="title"
                                    class="title title--h2 section-title__title words lines
                                    splitting"><?=$advantagesTitle?></h2>
                            </div>

                        </div>
                    </div>
                    <div class="advantages__content">
                        <ul class="advantages__list">
                            <? foreach ($arResult['ADVANTAGES'] as $k => $item) {
                                $icon = CFile::GetPath($item['PROPERTIES']['ICON']['VALUE']);
                                if ($k > 3) break;
                                ?>
                                <li class="advantages__item">
                                    <div class="benefit-card">
                                        <div class="benefit-card__inner">
                                            <div class="benefit-card__icon">
                                                <img src="<?= $icon ?>" alt="Картинка" width="48"
                                                     height="48" loading="lazy">
                                            </div>
                                            <div class="benefit-card__texts">
                                                <p class="benefit-card__text"><?= $item['PREVIEW_TEXT'] ?></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            <? } ?>

                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>

<section class="page-section" id="faq">

    <div class="faq">
        <div class="container">

            <div class="faq__inner">
                <div class="faq__aside">
                    <div class="section-title faq__title">
                        <div class="section-title__wrap">
                            <p class="section-title__badge"><?=$faqTag?></p>
                            <h2 data-animate="title"
                                class="title title--h2 section-title__title words lines splitting"><?=$faqTitle?></h2>
                        </div>

                    </div>
                    <a class="faq__cta" href="#demo" data-da-max=".faq__inner, 767, last">
                        <div class="faq__cta-bg">
                            <div class="faq__cta-bg-img">
                                <picture>
                                    <source media="(min-width: 1921px)"
                                            srcset="<?= $faqimg1921 ?>"
                                            type="image/webp">
                                    <source media="(min-width: 768px)"
                                            srcset="<?= $faqimg768 ?>"
                                            type="image/webp">
                                    <source media="(max-width: 767px)"
                                            srcset="<?= $faqimg767 ?>"
                                            type="image/webp">
                                    <img src="<?= $faqimg ?>"
                                         srcset="<?= $faqimg ?>"
                                         alt="Изображение" width="1090" height="855" loading="lazy">
                                </picture>

                            </div>
                            <div class="faq__cta-pixels" data-pixels="faq" data-pixels-qty="25">
                            </div>
                        </div>
                        <span class="faq__cta-icon">
            <svg width="1em" height="1em" viewBox="0 0 26 26" data-icon="icon-chat">

  <symbol id="ai:local:icon-chat"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                     stroke-width="1.4"><path
                  d="M12.423 13.546v-.224c0-.735.454-1.132.909-1.438.444-.299.889-.689.889-1.408a1.797 1.797 0 0 0-3.596-.001m1.796 5.605a.16.16 0 0 0-.161.162.162.162 0 1 0 .161-.162"></path><path
                  d="M17.185 20.926a9.702 9.702 0 0 1-4.762 1.247 9.75 9.75 0 0 1-9.75-9.75 9.75 9.75 0 0 1 9.75-9.75 9.75 9.75 0 0 1 9.75 9.75 9.696 9.696 0 0 1-1.247 4.762l1.247 4.988-4.988-1.247Z"
                  clip-rule="evenodd"></path></g></symbol><use xlink:href="#ai:local:icon-chat"></use>

</svg>
          </span>
                        <p class="faq__cta-title">Не нашли ответа на свой вопрос?</p>
                        <span class="faq__cta-btn">
            <span class="faq__cta-btn-text">Напишите нам</span>
            <span class="faq__cta-btn-icon"><svg width="1em" height="1em" viewBox="0 0 20 20"
                                                 data-icon="icon-arrow-up-right">

  <use xlink:href="#ai:local:icon-arrow-up-right"></use>

</svg></span>
          </span>
                    </a>
                </div>
                <div class="faq__accordion">
                    <div class="accordion">
                        <ul class="accordion__list" data-accordion="parent">
                            <? foreach ($arResult['FAQ'] as $k => $item) { ?>
                                <li class="accordion__item accordion <?= ($k == 0) ? 'is-active' : '' ?>"
                                    data-accordion="element">
                                    <button class="accordion__button" type="button" data-accordion="button">
                                        <span class="accordion__button-text"><?= $item['NAME'] ?></span>
                                        <span class="accordion__button-icon">
                <svg width="1em" height="1em" viewBox="0 0 24 24" data-icon="icon-minus">

  <symbol id="ai:local:icon-minus"><path fill="none" stroke="currentColor" stroke-linecap="round"
                                         stroke-linejoin="round" stroke-width="1.5"
                                         d="M5.438 12h13.125"></path></symbol><use
                            xlink:href="#ai:local:icon-minus"></use>

</svg>
                <svg width="1em" height="1em" viewBox="0 0 24 24" data-icon="icon-minus">

  <use xlink:href="#ai:local:icon-minus"></use>

</svg>
              </span>
                                    </button>
                                    <div class="accordion__wrapper" data-accordion="content" style="max-height: 277px;">
                                        <div class="accordion__content"><?= $item['PREVIEW_TEXT'] ?></div>
                                    </div>
                                </li>
                            <? } ?>


                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>
<section class="page-section page-section--no-pt" id="materials">
    <div class="materials">
        <div class="materials__wrap">
            <div class="materials__bg-wrap">
                <div class="container materials__container">

                    <div class="materials__inner">
                        <div class="section-title materials__title">
                            <div class="section-title__wrap">
                                <p class="section-title__badge"><?=$materialsTag?></p>
                                <h2 data-animate="title"
                                    class="title title--h2 section-title__title words lines splitting">
                                    <?=$materialsTitle?></h2>
                            </div>

                        </div>
                        <div class="materials__main">
                            <div class="materials__media-wrap" data-video="parent">
                                <div class="materials__video-wrap" data-video="wrap">
                                    <? if (is_array($arResult["PROPERTIES"]["VIDEO_KOD"]['~VALUE']))
                                        echo $arResult["PROPERTIES"]["VIDEO_KOD"]['~VALUE']['TEXT'];
                                    ?>
                                </div>
                                <div class="materials__media-bg">
                                    <div class="materials__media-bg-img">
                                        <picture>
                                            <source media="(min-width: 1921px)"
                                                    srcset="<?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media-xl
                                                    .webp,
                                                    <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media-xl@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media-xl@3x.webp 3x"
                                                    type="image/webp">
                                            <source media="(min-width: 768px)"
                                                    srcset=" <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media-d.webp,  <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media-d@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media-d@3x.webp 3x"
                                                    type="image/webp">
                                            <source media="(max-width: 767px)"
                                                    srcset=" <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media.webp,  <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media@2x.webp 2x,  <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media@3x.webp 3x"
                                                    type="image/webp">
                                            <img src=" <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media.png"
                                                 srcset=" <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media@2x.png 2x,  <?= SITE_TEMPLATE_PATH ?>/images/bg/bg-materials-media@3x.png 3x"
                                                 alt="Картинка" width="1397" height="777" loading="lazy">
                                        </picture>

                                    </div>
                                    <div class="materials__media-bg-pixels" data-pixels="materials"
                                         data-pixels-qty="105">
                                    </div>
                                </div>
                                <div class="materials__media-preview">
                                    <div class="materials__media-logo">
                                        <svg width="5.04em" height="1em" viewBox="0 0 151 30" data-icon="logo-udv">
                                            <use xlink:href="#ai:local:logo-udv"></use>

                                        </svg>
                                    </div>
                                    <button type="button" class="materials__media-btn" data-video="btn">
                                        <svg width="1em" height="1em" viewBox="0 0 48 48" data-icon="icon-play">

                                            <symbol id="ai:local:icon-play">
                                                <path fill="#0B2027" stroke="currentColor" stroke-linecap="round"
                                                      stroke-linejoin="round" stroke-width="1.5"
                                                      d="M13.73 4.83a1.541 1.541 0 0 0-2.328 1.325v35.69c0 1.194 1.3 1.935 2.327 1.326l30.114-17.845a1.542 1.542 0 0 0 0-2.652L13.729 4.829Z"></path>
                                            </symbol>
                                            <use xlink:href="#ai:local:icon-play"></use>

                                        </svg>
                                    </button>
                                    <div class="materials__media-text-wrap">
                                        <h3 class="title materials__media-title"><?=$arResult['PROPERTIES']['PREZENT_H3_VIDEO']['VALUE']?></h3>
                                        <?if (is_array($arResult['PROPERTIES']['PREZENT_TEXT_VIDEO']['~VALUE'])){?>
                                            <p
                                                    class="materials__media-text"><?=$arResult['PROPERTIES']['PREZENT_TEXT_VIDEO']['~VALUE']['TEXT']?></p>
                                        <?}?>
                                    </div>
                                </div>
                            </div>
                            <div class="materials__description-wrap">
                                <div class="materials__texts-container">
                                    <?if (is_array($arResult['PROPERTIES']['PREZENT_NAME']['~VALUE'])){?>
                                        <h3 class="title materials__texts-title"><?=$arResult['PROPERTIES']['PREZENT_NAME']['~VALUE']['TEXT']?>
                                        </h3>
                                    <?}?>
                                    <div class="materials__texts">
                                        <?if (is_array($arResult['PROPERTIES']['PREZENT_TEXT']['~VALUE'])){?>
                                            <p class="materials__text"><?=$arResult['PROPERTIES']['PREZENT_TEXT']['~VALUE']['TEXT']?></p>
                                        <?}?>
                                    </div>
                                    <div class="materials__info">
                                        <p class="materials__category"><?=$arResult['PROPERTIES']['PREZENT_HASHTAG']['VALUE']?></p>
                                        <time class="materials__date"
                                              datetime="<?=$arResult["PREZENT_DATE"]?>">
                                            <?=str_replace(' ',' / ',$arResult["PREZENT_DATE"])?> МСК
                                        </time>
                                    </div>

                                </div>
                                <a target="_blank" href="<?=$arResult['PROPERTIES']['PREZENT_LINK']['VALUE']?>" class="button button--size-xl-m button--solid-white
                                materials__btn"><span
                                            class="button__text">подробнее о событии</span><span class="button__icon">
        <svg width="1em" height="1em" viewBox="0 0 20 20" data-icon="icon-arrow-up-right">

  <use xlink:href="#ai:local:icon-arrow-up-right"></use>

</svg>
      </span></a>
                            </div>
                        </div>
                        <div class="materials__documents">
                            <h3 class="title materials__documents-title"><?=$documentsTitle?></h3>
                            <div class="materials__documents-wrap">
                                <div class="materials__documents-column materials__documents-column--left">
                                    <ul class="materials__documents-list">
                                       <? foreach ($arResult['DOCUMENTS'] as $k=>$item) {
                                            if ($k==2) break;
                                           if ($item['PROPERTIES']['DOCUMENT']['VALUE']) {
                                               $file = CFile::GetFileArray($item['PROPERTIES']['DOCUMENT']['VALUE']);
                                               $type = explode("/", $file['CONTENT_TYPE']);
                                               $size = round($file['FILE_SIZE'] / 1000);
                                               $svg="file.svg";
                                           } elseif ($item['PROPERTIES']['LINK']['VALUE']) {
                                               $svg="link.svg";
                                               $file['SRC']=$item['PROPERTIES']['LINK']['VALUE'];
                                           }
                                           ?>
                                                <li class="materials__documents-item">
                                                    <div class="document-link materials__document-link">
                                                        <a  target="_blank" class="document-link__inner" type="download"
                                                           href="<?=$file['SRC']?>">
                                                            <div class="document-link__icon">
                                                                <img src="<?=SITE_TEMPLATE_PATH?>/images/svg/<?=$svg?>"
                                                                     alt="Картинка" width="24"
                                                                     height="24" loading="lazy">
                                                            </div>
                                                            <div class="document-link__data-wrap">
                                                                <p class="document-link__title"><?=$item['NAME']?></p>
                                                                <?if ($item['PROPERTIES']['DOCUMENT']['VALUE']){?>
                                                                    <span class="document-link__file-data">
                                                                    <?=mb_strtoupper($type[1])?>,
                                                                    <?=$size?>
                                                                    KB</span>
                                                                <?}?>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </li>
                                        <?}?>

                                    </ul>
                                </div>
                                <div class="materials__documents-column materials__documents-column--right">
                                    <ul class="materials__documents-list">
                                        <? foreach ($arResult['DOCUMENTS'] as $k=>$item) {
                                            if ($k<2) continue;
                                            if ($item['PROPERTIES']['DOCUMENT']['VALUE']) {
                                                $file = CFile::GetFileArray($item['PROPERTIES']['DOCUMENT']['VALUE']);
                                                $type = explode("/", $file['CONTENT_TYPE']);
                                                $size = round($file['FILE_SIZE'] / 1000);
                                                $svg="file.svg";
                                            } elseif ($item['PROPERTIES']['LINK']['VALUE']) {
                                                $svg="link.svg";
                                                $file['SRC']=$item['PROPERTIES']['LINK']['VALUE'];
                                            }
                                            ?>
                                            <li class="materials__documents-item">
                                                <div class="document-link materials__document-link">
                                                    <a target="_blank" class="document-link__inner" type="download"
                                                       href="<?=$file['SRC']?>">
                                                        <div class="document-link__icon">
                                                            <img src="<?=SITE_TEMPLATE_PATH?>/images/svg/<?=$svg?>"
                                                                 alt="Картинка" width="24"
                                                                 height="24" loading="lazy">
                                                        </div>
                                                        <div class="document-link__data-wrap">
                                                            <p class="document-link__title"><?=$item['NAME']?></p>
                                                            <?if ($item['PROPERTIES']['DOCUMENT']['VALUE']){?>
                                                                <span class="document-link__file-data">
                                                                    <?=mb_strtoupper($type[1])?>,
                                                                    <?=$size?>
                                                                    KB</span>
                                                            <?}?>
                                                        </div>
                                                    </a>
                                                </div>
                                            </li>
                                        <?}?>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<? $APPLICATION->IncludeComponent("bitrix:main.include", "", array(
    "AREA_FILE_SHOW" => "file",    // Показывать включаемую область
    "PATH" => SITE_DIR . "include/form/product_form.php",    // Путь к файлу области
),
    false
); ?>



