<? 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);

?>

<div class="page-section page-section--p-t-header">
    <div class="hero hero--products-hub" data-animate="hero-block">
        <div class="container container--no-p">
            <div class="hero__inner">
                <div class="hero__bg">
                    <div class="hero__bg-gradient">
                        <?
                        $img1921 = CFile::GetPath($arResult['BANNER']["PROPERTIES"]['BG_1921']["VALUE"]);
                        $img768 = CFile::GetPath($arResult['BANNER']["PROPERTIES"]['BG_768']["VALUE"]);
                        $img767 = CFile::GetPath($arResult['BANNER']["PROPERTIES"]['BG_767']["VALUE"]);

                        ?>
                        <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['BANNER']["PREVIEW_PICTURE"]["SRC"] ?>"
                                 srcset="<?= $arResult['BANNER']["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="55">
                </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">
          <span class="breadcrumbs__link breadcrumbs__link--current">

            <span class="breadcrumbs__link-text">
                                <?=($arResult['BANNER']['PROPERTIES']['BREAD_NAME']['VALUE'])?$arResult['BANNER']['PROPERTIES']['BREAD_NAME']['VALUE']:'Продукты'?>

            </span>

</span>
                            </li>
                        </ol>
                    </div>
                    <div class="hero__img" data-animate="hero-image-d-index">
                        <picture>
                            <source srcset="<?= $arResult['BANNER']["DETAIL_PICTURE"]["SRC"] ?>"
                                    type="image/webp">
                            <img src="<?= $arResult['BANNER']["DETAIL_PICTURE"]["SRC"] ?>"
                                 srcset="<?= $arResult['BANNER']["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['BANNER']["PREVIEW_TEXT"] ?></h1>
                            <p class="hero__text"><?= $arResult['BANNER']["DETAIL_TEXT"] ?></p>

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

                <div class="hero__marquee-wrap">
                    <div class="marquee hero__marquee marquee--hero-main is-init">
                        <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 class="page-section">
        <div class="ecosystem">
            <div class="container">
                <div class="section-title ecosystem__header">
                    <div class="section-title__wrap">
                        <p class="section-title__badge"><?=$arResult['TAG']?></p>
                        <h2 data-animate="title"
                            class="title title--h2 section-title__title words lines splitting is-show">используем
                            комплексный подход<br> к защите от киберугроз</h2>
                    </div>

                </div>
                <div class="ecosystem__inner">
                    <?$k=1;
                    foreach ($arResult['SECTIONS'] as $section){
                        switch ($k) {
                            case 1:
                                $class="first";
                                $reverse="";
                                $cardsreverse="";
                                break;
                            case 2:
                                $class="second";
                                $reverse="ecosystem__item-header--reverse";
                                $cardsreverse="ecosystem__cards-wrap--reverse";
                                break;
                            case 3:
                                $class="third";
                                $cardsreverse="";
                                $reverse="";
                                break;
                        }
                        ?>
                    <div class="ecosystem__item ecosystem__item--<?=$class?>">
                        <div class="ecosystem__item-header <?=$reverse?>">
                            <div class="ecosystem__item-title-wrap">
                                <h3 class="title title--h3 ecosystem__item-title"><?=$section['UF_PRODUCT']?></h3>
                                <ul class="ecosystem__item-title-bullets" data-da-max=".ecosystem__item--<?=$class?> .ecosystem__item-progress-wrap, 767, first">
                                    <li class="ecosystem__item-title-bullet ecosystem__item-title-bullet--active"></li>
                                    <li class="ecosystem__item-title-bullet <?=($k>=2)?'ecosystem__item-title-bullet--active':''?>"></li>
                                    <li class="ecosystem__item-title-bullet <?=($k==3)?'ecosystem__item-title-bullet--active':''?>"></li>
                                </ul>
                            </div>
                            <?if ($k==1){?>
                                <div class="ecosystem__item-progress-wrap">
                                <div class="ecosystem__item-logo">
                                    <svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect x="44" y="44" width="132" height="132" rx="66" fill="white"></rect>
                                        <rect x="44.5" y="44.5" width="131" height="131" rx="65.5" stroke="#0B2027" stroke-opacity="0.1"></rect>
                                        <path d="M110.131 118.273C109.787 118.621 109.615 118.984 109.615 119.36C109.615 119.767 109.772 120.122 110.088 120.426C110.403 120.731 110.762 120.884 111.163 120.884C111.536 120.884 111.909 120.724 112.282 120.404L119.683 113.135C120.141 112.757 120.371 112.351 120.371 111.916C120.371 111.423 120.128 110.959 119.639 110.523L112.196 103.296C111.852 102.918 111.45 102.729 110.992 102.729C110.619 102.729 110.289 102.868 110.003 103.143C109.715 103.418 109.572 103.745 109.572 104.122C109.572 104.47 109.745 104.848 110.089 105.254L117.016 111.871L110.132 118.271L110.133 118.272L110.131 118.273Z" fill="#00D29D"></path>
                                        <path d="M109.872 114.656C110.216 115.004 110.387 115.366 110.387 115.744C110.387 116.15 110.23 116.505 109.914 116.81C109.599 117.115 109.24 117.268 108.838 117.268C108.466 117.268 108.092 117.108 107.72 116.788L100.319 109.518C99.8602 109.141 99.6309 108.734 99.6309 108.299C99.6309 107.805 99.8744 107.342 100.362 106.906L107.805 99.6795C108.149 99.3023 108.55 99.1133 109.009 99.1133C109.381 99.1133 109.712 99.2517 109.998 99.5269C110.285 99.8037 110.429 100.129 110.429 100.506C110.429 100.854 110.257 101.231 109.913 101.638L102.985 108.255L109.869 114.655L109.871 114.656H109.872Z" fill="#00D29D"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M86.8277 106.238L106.284 86.551C108.329 84.483 111.674 84.483 113.718 86.551L133.174 106.238C135.218 108.307 135.218 111.691 133.173 113.76L113.717 133.447C111.673 135.517 108.327 135.517 106.282 133.447L86.8261 113.761C84.7819 111.692 84.7819 108.307 86.8261 106.238H86.8269H86.8277ZM88.766 108.179L108.204 88.5114C109.192 87.511 110.812 87.511 111.8 88.5114L131.238 108.179C132.227 109.18 132.227 110.818 131.238 111.819L111.8 131.486C110.811 132.486 109.192 132.486 108.203 131.486L88.766 111.819C87.7767 110.818 87.7767 109.18 88.766 108.179Z" fill="#00D29D"></path>
                                        <circle cx="110" cy="110" r="87.5" stroke="#0B2027" stroke-opacity="0.1" stroke-dasharray="4 4"></circle>
                                        <circle opacity="0.4" cx="110" cy="110" r="109.5" stroke="#0B2027" stroke-opacity="0.1"></circle>
                                    </svg>
                                </div>
                                <div class="ecosystem__point-runner" style="opacity: 1; translate: none; rotate: none; scale: none; transform-origin: 50% 50%; transform: translate3d(198.226px, 1307.56px, 0px);">
                                    <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g filter="url(#filter0_b_4062_79865)">
                                            <rect y="0.524414" width="48" height="48" rx="24" fill="#00D29D" fill-opacity="0.06"></rect>
                                            <circle cx="24" cy="24.5244" r="8" fill="#00D29D"></circle>
                                        </g>
                                        <defs>
                                            <filter id="filter0_b_4062_79865" x="-21.3333" y="-20.8089" width="90.6667" height="90.6667" >
                                                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="10.6667"></feGaussianBlur>
                                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4062_79865"></feComposite>
                                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_4062_79865" result="shape"></feBlend>
                                            </filter>
                                        </defs>
                                    </svg>
                                </div>
                                <div class="ecosystem__item-progress ecosystem__item-progress--xl ecosystem__item-progress--xl-<?=$class?>">
                                    <svg width="1342" height="103" viewBox="0 0 1342 103" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1340.5 0.524107L1340.5 65.5242C1340.5 85.4064 1324.38 101.524 1304.5 101.524L0.500003 101.524" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2">
                                        </path>
                                        <path class="line-progress" d="M1340.5 0.524107L1340.5 65.5242C1340.5 85.4064 1324.38 101.524 1304.5 101.524L0.500003 101.524" stroke-opacity="1" stroke-width="2" stroke="url(#line-progress-xl-first)" stroke-dasharray="1425" stroke-dashoffset="1425" style="stroke-dashoffset: 0px;">
                                        </path>
                                        <defs>
                                            <linearGradient id="line-progress-xl-first" y1="1342" y2="1" gradientUnits="userSpaceOnUse">
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.172313" stop-color="#00D29D"></stop>
                                                <stop offset="0.981552" stop-color="#00D29D"></stop>
                                                <stop offset="1" stop-color="white"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                                <div class="ecosystem__item-progress ecosystem__item-progress--desktop ecosystem__item-progress--desktop-<?=$class?>">
                                    <svg width="564" height="102" viewBox="0 0 564 102" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M563 -0.00030695L563 64.9997C563 84.882 546.882 101 527 101L0.498821 100.999" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2">
                                        </path>
                                        <path class="line-progress" d="M563 -0.00030695L563 64.9997C563 84.882 546.882 101 527 101L0.498821 100.999" stroke-opacity="1" stroke-width="2" stroke="url(#line-progress-desktop-first)" stroke-dasharray="648" stroke-dashoffset="648" style="stroke-dashoffset: 648px;">
                                        </path>
                                        <defs>
                                            <linearGradient id="line-progress-desktop-first" y1="564" y2="1" gradientUnits="userSpaceOnUse">
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.132313" stop-color="#00D29D"></stop>
                                                <stop offset="0.951552" stop-color="#00D29D"></stop>
                                                <stop offset="1" stop-color="white"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                                <div class="ecosystem__item-progress ecosystem__item-progress--mobile ecosystem__item-progress--mobile-<?=$class?>">
                                    <svg width="208" height="82" viewBox="0 0 208 82" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M207.385 -7.52993e-05L207.386 45.4428C207.386 65.3252 191.268 81.4431 171.386 81.4431L0.000511339 81.4431" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2">
                                        </path>
                                        <path class="line-progress" d="M207.385 -7.52993e-05L207.386 45.4428C207.386 65.3252 191.268 81.4431 171.386 81.4431L0.000511339 81.4431" stroke-opacity="1" stroke-width="2" stroke="url(#line-progress-mobile-first)" stroke-dasharray="273" stroke-dashoffset="273">
                                        </path>
                                        <defs>
                                            <linearGradient id="line-progress-mobile-first" y1="564" y2="1" gradientUnits="userSpaceOnUse">
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.132313" stop-color="#00D29D"></stop>
                                                <stop offset="0.951552" stop-color="#00D29D"></stop>
                                                <stop offset="1" stop-color="white"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                            </div>
                            <?} elseif ($k==2){?>
                                <div class="ecosystem__item-progress-wrap">
                                <div class="ecosystem__item-progress ecosystem__item-progress--xl ecosystem__item-progress--xl-second">
                                    <svg width="833" height="213" viewBox="0 0 833 213" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.67238 -9.31389e-05L1.66927 176C1.66892 195.882 17.7868 212 37.6693 212L832.496 212" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2">
                                        </path>
                                        <path class="line-progress" d="M1.67238 -9.31389e-05L1.66927 176C1.66892 195.882 17.7868 212 37.6693 212L832.496 212" stroke="#00D29D" stroke-opacity="1" stroke-width="2" stroke-dasharray="1027" stroke-dashoffset="1027" style="stroke-dashoffset: 814px;">
                                        </path>
                                    </svg>
                                </div>
                                <div class="ecosystem__item-progress ecosystem__item-progress--desktop ecosystem__item-progress--desktop-second">
                                    <svg width="399" height="172" viewBox="0 0 399 172" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.82165 -0.00127648L1.82165 134.999C1.82165 154.881 17.9394 170.999 37.8217 170.999L398.822 170.999" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2">
                                        </path>
                                        <path class="line-progress" d="M1.82165 -0.00127648L1.82165 134.999C1.82165 154.881 17.9394 170.999 37.8217 170.999L398.822 170.999" stroke="#00D29D" stroke-opacity="1" stroke-width="2" stroke-dasharray="552" stroke-dashoffset="552" style="stroke-dashoffset: 552px;">
                                        </path>
                                    </svg>
                                </div>
                                <div class="ecosystem__item-progress ecosystem__item-progress--mobile ecosystem__item-progress--mobile-second">
                                    <svg width="208" height="157" viewBox="0 0 208 157" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M207.387 -7.71451e-05L207.387 120.443C207.387 140.325 191.27 156.443 171.387 156.443L0.00173203 156.443" stroke="#0B2027" stroke-opacity="0.1"></path>
                                        <path class="line-progress" d="M207.387 -7.71451e-05L207.387 120.443C207.387 140.325 191.27 156.443 171.387 156.443L0.00173203 156.443" stroke="#00D29D" stroke-width="2" stroke-opacity="1" stroke-dasharray="348" stroke-dashoffset="348"></path>
                                    </svg>
                                </div>
                            </div>
                            <?} elseif ($k==3){?>
                                <div class="ecosystem__item-progress-wrap">
                                    <div class="ecosystem__item-progress ecosystem__item-progress--xl ecosystem__item-progress--xl-third">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="1616" height="210" viewBox="0 0 1616 210" fill="none">
                                            <path d="M1614.5 -0.000824107L1614.5 172.998C1614.5 192.881 1598.38 208.999 1578.5 208.999L0.00133084 209" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                            <path class="line-progress" d="M1614.5 -0.000824107L1614.5 172.998C1614.5 192.881 1598.38 208.999 1578.5 208.999L0.00133084 209" stroke="#00D29D" stroke-width="2" stroke-opacity="1" stroke-dasharray="1808" stroke-dashoffset="1808" style="stroke-dashoffset: 1808px;">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="ecosystem__item-progress ecosystem__item-progress--desktop ecosystem__item-progress--desktop-third">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="818" height="168" viewBox="0 0 818 168" fill="none">
                                            <path d="M817.003 -0.000343667L817 131.001C817 150.883 800.882 167 781 167L-0.00166803 167" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                            <path class="line-progress" d="M817.003 -0.000343667L817 131.001C817 150.883 800.882 167 781 167L-0.00166803 167" stroke="#00D29D" stroke-width="2" stroke-opacity="1" stroke-dasharray="968" stroke-dashoffset="968"></path>
                                        </svg>
                                    </div>
                                    <div class="ecosystem__item-progress ecosystem__item-progress--mobile ecosystem__item-progress--mobile-third">
                                        <svg width="208" height="157" viewBox="0 0 208 157" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M207.383 -0.000550601L207.384 120.442C207.384 140.325 191.266 156.443 171.384 156.443L-0.00195866 156.443" stroke="#0B2027" stroke-opacity="0.1" stroke-width="2"></path>
                                            <path class="line-progress" d="M207.383 -0.000550601L207.384 120.442C207.384 140.325 191.266 156.443 171.384 156.443L-0.00195866 156.443" stroke="#00D29D" stroke-width="2" stroke-opacity="1" stroke-dasharray="348" stroke-dashoffset="348"></path>
                                        </svg>
                                    </div>
                                </div>
                            <?}?>

                        </div>
                        <div class="ecosystem__cards-wrap <?=$cardsreverse?>">
                            <ul class="ecosystem__cards-list">
                              <? if (!empty($section['ITEMS'])){
                                  foreach ($section['ITEMS'] as $item){
                                      $icon=CFile::GetPath($item['PROPERTY_ICON_VALUE']);
                                      ?>
                                      <li class="ecosystem__cards-item">
                                          <div class="solutions-hubs-scheme-item">
                                              <a class="solutions-hubs-scheme-item__link"
                                                 href="<?=$item['DETAIL_PAGE_URL']?>">
                                                  <div class="solutions-hubs-scheme-item__header">
                                                      <h4 class="title
                                                      solutions-hubs-scheme-item__title"><?=$item['NAME']?></h4>
                                                      <?if ($icon){?>
                                                          <div class="solutions-hubs-scheme-item__icon">
                                                              <img src="<?=$icon?>" alt="Картинка" width="32" height="32"
                                                                   loading="lazy">
                                                          </div>
                                                      <?}?>
                                                  </div>
                                                  <div class="solutions-hubs-scheme-item__descriptions">
                                                      <p class="solutions-hubs-scheme-item__text"><?=$item['PROPERTY_PP_PREVIEW_TEXT_VALUE']['TEXT']?></p>
                                                  </div>
                                                  <span class="solutions-hubs-scheme-item__shownore-wrap">
                                                      <span class="solutions-hubs-scheme-item__shownore-text">Подробнее</span>
                                                      <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>
                                      </li>
                                  <?
                                  }
                              }
                              ?>

                            </ul>
                            <div class="ecosystem__description-wrap">
                                <div class="tag-text ecosystem__description-tag tag-text--size-small tag-text--bordered">
                                    <p class="tag-text__text">ДЛЯ ЧЕГО ПОДОЙДЕТ</p>
                                </div>
                                <p class="ecosystem__description-title"><?=$section['UF_TITLE']?></p>
                                <p class="ecosystem__description-text">
                                    <?=$section['DESCRIPTION']?>
                                </p>
                            </div>
                        </div>
                    </div>
                    <?$k++;
                    }?>

                </div>

            </div>
        </div>

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


