{include file="_partials/head.tpl"}

<div class="cm-container">

  {* ───────── 1. Плитка категорий ───────── *}
  <section class="cm-cats" aria-label="Каталог категорій" data-cm-cats-root>
    <button type="button" class="cm-cats__arrow cm-cats__arrow--prev" data-cm-cats-prev hidden aria-label="Попередні категорії">{icon name="chevron_left" size="20"}</button>
    <button type="button" class="cm-cats__arrow cm-cats__arrow--next" data-cm-cats-next aria-label="Наступні категорії">{icon name="chevron_right" size="20"}</button>
    <div class="cm-cats-row" data-cm-cats-track>
      <a href="/category/smartfony" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="18" y="6" width="28" height="52" rx="4"/><line x1="18" y1="14" x2="46" y2="14"/><line x1="18" y1="50" x2="46" y2="50"/><circle cx="32" cy="54" r="1.5" fill="currentColor"/></svg>
        </span>
        <span class="cm-cat-tile__title">Смартфони та телефони</span>
      </a>
      <a href="/category/tehnika-dlya-kuhni" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="10" y="10" width="44" height="44" rx="4"/><line x1="10" y1="22" x2="54" y2="22"/><circle cx="20" cy="38" r="6"/><line x1="34" y1="32" x2="46" y2="32"/><line x1="34" y1="42" x2="46" y2="42"/></svg>
        </span>
        <span class="cm-cat-tile__title">Техніка для кухні</span>
      </a>
      <a href="/category/televizory" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="14" width="52" height="32" rx="3"/><line x1="22" y1="54" x2="42" y2="54"/><line x1="32" y1="46" x2="32" y2="54"/></svg>
        </span>
        <span class="cm-cat-tile__title">Телевізори та мультимедіа</span>
      </a>
      <a href="/category/audio" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 36v-4a18 18 0 0 1 36 0v4"/><rect x="10" y="36" width="10" height="14" rx="2"/><rect x="44" y="36" width="10" height="14" rx="2"/></svg>
        </span>
        <span class="cm-cat-tile__title">Аудіо, фото та відео</span>
      </a>
      <a href="/category/krasa-zdorovya" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M32 56s-18-12-18-26a10 10 0 0 1 18-6 10 10 0 0 1 18 6c0 14-18 26-18 26z"/></svg>
        </span>
        <span class="cm-cat-tile__title">Краса і здоров'я</span>
      </a>
      <a href="/category/noutbuky" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="10" y="14" width="44" height="28" rx="2"/><line x1="6" y1="48" x2="58" y2="48"/></svg>
        </span>
        <span class="cm-cat-tile__title">Ноутбуки, планшети та комп'ютерна техніка</span>
      </a>
      <a href="/category/tehnika-dlya-domu" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="14" y="10" width="36" height="44" rx="3"/><circle cx="32" cy="34" r="9"/><line x1="14" y1="22" x2="50" y2="22"/></svg>
        </span>
        <span class="cm-cat-tile__title">Техніка для дому</span>
      </a>
      <a href="/category/smart-godynnyky" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="18" y="18" width="28" height="28" rx="6"/><line x1="22" y1="10" x2="42" y2="10"/><line x1="22" y1="54" x2="42" y2="54"/><polyline points="32 26 32 32 36 36"/></svg>
        </span>
        <span class="cm-cat-tile__title">Смарт-годинники та гаджети</span>
      </a>
      <a href="/category/igrovi-konsoli" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 24h36a8 8 0 0 1 8 8v8a8 8 0 0 1-14 5l-2-3H22l-2 3a8 8 0 0 1-14-5v-8a8 8 0 0 1 8-8z"/><line x1="20" y1="34" x2="26" y2="34"/><line x1="23" y1="31" x2="23" y2="37"/><circle cx="42" cy="32" r="1.6" fill="currentColor"/><circle cx="48" cy="36" r="1.6" fill="currentColor"/></svg>
        </span>
        <span class="cm-cat-tile__title">Ігрові консолі та гейминг</span>
      </a>
      <a href="/category/posud" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 26h44l-4 24a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4z"/><path d="M22 26v-6a10 10 0 0 1 20 0v6"/></svg>
        </span>
        <span class="cm-cat-tile__title">Посуд</span>
      </a>
      <a href="/category/dim-vidpochynok" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 30 32 8l24 22"/><path d="M14 28v26h36V28"/><rect x="26" y="36" width="12" height="18"/></svg>
        </span>
        <span class="cm-cat-tile__title">Дім, відпочинок та зоотовари</span>
      </a>
      <a href="/category/instrumenty" class="cm-cat-tile">
        <span class="cm-cat-tile__ico">
          <svg width="56" height="56" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M44 8 56 20 38 38l-12-12z"/><path d="m26 26-18 18 4 4 18-18"/></svg>
        </span>
        <span class="cm-cat-tile__title">Інструменти та автотовари</span>
      </a>
    </div>
  </section>

  {* ───────── 2. Hero-слайдер + правый виджет «Товар вихідних» ───────── *}
  <section class="cm-hero-row">
    <div class="cm-hero" data-cm-hero>
      <div class="cm-hero__viewport">
        <button type="button" class="cm-hero__arrow cm-hero__arrow--prev" data-cm-hero-prev aria-label="Попередній слайд">{icon name="chevron_left" size="22"}</button>

        <div class="cm-hero__track" data-cm-hero-track>
          [if {hero_slides}]
            [foreach var="hero_slides" as="h"]
              <article class="cm-hero__slide cm-hero__slide--{h.theme} [if {h.is_first}="1"]is-active[/if]" data-cm-hero-slide>
                <div class="cm-hero__text">
                  <span class="cm-hero__kicker">Новинка</span>
                  <h2 class="cm-hero__title">{h.title}</h2>
                  <a class="cm-hero__cta" href="{h.url}">Перейти {icon name="arrow_right" size="14"}</a>
                </div>
                <div class="cm-hero__pricecard">
                  [if {h.old_price_fmt}]<div class="cm-hero__pricecard-old">{h.old_price_fmt} ₴</div>[/if]
                  <div class="cm-hero__pricecard-new">{h.price_fmt} ₴</div>
                </div>
                <div class="cm-hero__shape cm-hero__shape--photo" aria-hidden="true">
                  [if {h.cover}]<img src="{h.cover|large}" alt="{h.title}">[/if]
                </div>
              </article>
            [/foreach]
          [else]
            {* Fallback: пока в магазине нет товаров — статичный демо-слайд. *}
            <article class="cm-hero__slide cm-hero__slide--lime is-active" data-cm-hero-slide>
              <div class="cm-hero__text">
                <span class="cm-hero__kicker">Магазин Celena</span>
                <h2 class="cm-hero__title">Додайте перший товар</h2>
                <a class="cm-hero__cta" href="/admin/shop/products/create">В адмінку {icon name="arrow_right" size="14"}</a>
              </div>
            </article>
          [/if]
        </div>

        <button type="button" class="cm-hero__arrow cm-hero__arrow--next" data-cm-hero-next aria-label="Наступний слайд">{icon name="chevron_right" size="22"}</button>
      </div>
      <div class="cm-hero__dots" data-cm-hero-dots role="tablist" aria-label="Слайди">
        [foreach var="hero_slides" as="h"]
          <button type="button" class="cm-hero__dot [if {h.is_first}="1"]is-active[/if]" data-cm-hero-dot="{_index}" aria-label="Слайд"></button>
        [/foreach]
      </div>
    </div>

    <aside class="cm-weekend">
      <header class="cm-weekend__head">
        <span class="cm-badge cm-badge--purple">{icon name="sparkles" size="12"} Товар вихідних</span>
      </header>
      <a class="cm-weekend__product" href="#">
        <div class="cm-weekend__discount">-5%</div>
        <div class="cm-weekend__img" aria-hidden="true">
          <svg width="120" height="120" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="32" cy="32" r="20"/><circle cx="32" cy="32" r="10"/></svg>
        </div>
        <div class="cm-weekend__title">Очищувач повітря Electrolux EP053051SW</div>
        <div class="cm-weekend__rating">{icon name="message_circle" size="12"} Залишити відгук</div>
        <div class="cm-product-prices">
          <span class="cm-price-old">6 799 ₴</span>
          <span class="cm-price-now cm-price-now--lg">5 999 ₴</span>
        </div>
        <button type="button" class="cm-btn-cart cm-btn-cart--mini" data-add-to-cart="1" data-pid="0" data-pprice="5999" aria-label="Купити">
          {icon name="cart" size="18"}
        </button>
      </a>
    </aside>
  </section>

  {* ───────── 3. Промо-полосы 4 баннера ───────── *}
  <section class="cm-promo-row" aria-label="Спецпропозиції">
    <a class="cm-promo-pill" href="/new">
      <span class="cm-promo-pill__ico cm-promo-pill__ico--blue">{icon name="sparkles" size="20"}</span>
      <span class="cm-promo-pill__text">Новинки тижня</span>
    </a>
    <a class="cm-promo-pill" href="/installments">
      <span class="cm-promo-pill__ico cm-promo-pill__ico--orange">{icon name="lightning" size="20"}</span>
      <span class="cm-promo-pill__text"><b>Оплата частинами</b> — без переплат</span>
    </a>
    <a class="cm-promo-pill" href="/sale">
      <span class="cm-promo-pill__ico cm-promo-pill__ico--red">{icon name="lightning" size="20"}</span>
      <span class="cm-promo-pill__text">Розпродаж і знижки</span>
    </a>
    <a class="cm-promo-pill" href="/loyalty">
      <span class="cm-promo-pill__ico cm-promo-pill__ico--violet">{icon name="sparkles" size="20"}</span>
      <span class="cm-promo-pill__text">Бонуси та кешбек</span>
    </a>
  </section>

  [if {shop.enabled}="1"]
    {* ───────── 4. Переглянуті товари ───────── *}
    <section class="cm-section" data-cm-viewed-section hidden>
      <header class="cm-section__head">
        <h2 class="cm-section__title">Переглянуті товари</h2>
      </header>
      <div class="cm-grid cm-grid--viewed" data-cm-viewed-grid>
        {* Заполняется JS из localStorage celena_shop_viewed *}
      </div>
    </section>

    {* ───────── 5. «Кращі товари» — горизонтальный слайдер ───────── *}
    <section class="cm-section cm-section--best">
      <header class="cm-section__head">
        <span class="cm-section__crown" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 64 64" fill="currentColor" aria-hidden="true"><path d="M8 18l10 10 14-18 14 18 10-10v26H8z"/></svg>
          КРАЩ
        </span>
        <h2 class="cm-section__title">Кращі товари</h2>
        <a href="/category/best" class="cm-section__more">Дивитися всі {icon name="chevron_right" size="14"}</a>
      </header>
      <div class="cm-carousel" data-cm-carousel>
        <button type="button" class="cm-carousel__arrow cm-carousel__arrow--prev" data-cm-carousel-prev aria-label="Попередні">{icon name="chevron_left" size="22"}</button>
        <div class="cm-carousel__track cm-carousel__track--mini" data-cm-carousel-track>
          [products limit="7" sort="id" order="desc"]
            {include file="_partials/product_card_mini.tpl"}
          [/products]
        </div>
        <button type="button" class="cm-carousel__arrow cm-carousel__arrow--next" data-cm-carousel-next aria-label="Наступні">{icon name="chevron_right" size="22"}</button>
      </div>
    </section>

    {* ───────── 6. Знижки до -50% ───────── *}
    <section class="cm-section">
      <header class="cm-section__head">
        <h2 class="cm-section__title">Знижки до -50%</h2>
        <a href="/category/sale" class="cm-section__more">Дивитися всі {icon name="chevron_right" size="14"}</a>
      </header>
      <div class="cm-grid cm-grid--7" data-cm-discount-grid>
        [products limit="14" sort="id" order="desc"]
          {include file="_partials/product_card.tpl"}
        [/products]
      </div>
      <div class="cm-section__more-row">
        <button type="button" class="cm-btn cm-btn--ghost cm-btn--lg" data-cm-show-more>Показати більше</button>
      </div>
    </section>
  [/if]

  {* ───────── 7. Останні акції ───────── *}
  <section class="cm-section">
    <header class="cm-section__head">
      <span class="cm-section__crown" aria-hidden="true">{icon name="lightning" size="22"}</span>
      <h2 class="cm-section__title">Останні акції</h2>
      <a href="/category/promotions" class="cm-section__more">Дивитися всі {icon name="chevron_right" size="14"}</a>
    </header>
    <p class="cm-section__lead">Хітові товари за зниженими цінами. Переглянь топ пропозицій, поки вони не зникли.</p>
    <div class="cm-promo-row cm-promo-row--big">
      <a class="cm-promo cm-promo--peach" href="/p/canyon-sale">
        <div class="cm-promo__text">
          <span class="cm-promo__kicker">Залишилось 23 дні</span>
          <span class="cm-promo__title">Знижки до -50% на обрані гаджети CANYON</span>
        </div>
        <span class="cm-promo__shape cm-promo__shape--gadgets" aria-hidden="true"></span>
      </a>
      <a class="cm-promo cm-promo--coral" href="/p/toshiba-tv">
        <div class="cm-promo__text">
          <span class="cm-promo__kicker">Залишилось 22 дні</span>
          <span class="cm-promo__title">Вигода до -16% на TV Toshiba QLED</span>
        </div>
        <span class="cm-promo__shape cm-promo__shape--tv" aria-hidden="true"></span>
      </a>
      <a class="cm-promo cm-promo--graphite" href="/p/a4tech">
        <div class="cm-promo__text">
          <span class="cm-promo__kicker">Залишилось 15 днів</span>
          <span class="cm-promo__title">Знижки до -33% на улюблені товари Bloody і A4tech</span>
        </div>
        <span class="cm-promo__shape cm-promo__shape--gaming" aria-hidden="true"></span>
      </a>
    </div>
  </section>

  {* ───────── 8. Текст про магазин ───────── *}
  <section class="cm-about">
    <h2 class="cm-about__title">Інтернет-магазин побутової техніки та електроніки {site.name}</h2>
    <div class="cm-about__lead">
      Компанія {site.name} існує на українському ринку вже більше 10 років і за цей час встигла отримати звання одного з найкращих магазинів сучасної техніки. Все починалося з невеликих точок продажів, доки фірма не вирішила підкорити свій інтернет-торгівлі. З тих пір будь-який житель України може замовити оригінальну техніку від світових виробників зі швидкою доставкою у своє місто.
    </div>
    <details class="cm-about__more">
      <summary>Що стало причиною успіху {site.name} серед українців?</summary>
      <div class="cm-about__more-body">
        <p>Великий асортимент, чесні ціни, якісний сервіс, програма лояльності, кредитування на місці. Всі ці фактори разом створюють для клієнтів той самий зручний досвід покупки, до якого ми звикли.</p>
      </div>
    </details>
    <a href="#" class="cm-about__readmore" data-cm-about-toggle>Читати повністю</a>
  </section>

</div>

{* ───────── 9. QR-блок встановлення додатку (на всю ширину) ───────── *}
<section class="cm-app-bar" aria-label="Мобільний додаток">
  <div class="cm-container cm-app-bar__inner">
    <div class="cm-app-bar__phone" aria-hidden="true">
      <svg width="120" height="200" viewBox="0 0 120 200" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="10" width="92" height="180" rx="12"/><line x1="14" y1="32" x2="106" y2="32"/><line x1="14" y1="172" x2="106" y2="172"/><circle cx="60" cy="182" r="2"/></svg>
    </div>
    <div class="cm-app-bar__text">
      <h2>Скануй QR code та встановлюй додаток</h2>
      <p>Доступно для завантаження на платформах:</p>
      <div class="cm-app-bar__stores">
        <a href="#" class="cm-store-badge">
          <span class="cm-store-badge__sub">Download on the</span>
          <span class="cm-store-badge__main">App Store</span>
        </a>
        <a href="#" class="cm-store-badge">
          <span class="cm-store-badge__sub">GET IT ON</span>
          <span class="cm-store-badge__main">Google Play</span>
        </a>
      </div>
    </div>
    <div class="cm-app-bar__qr" aria-hidden="true">
      <div class="cm-qr-placeholder"></div>
    </div>
  </div>
</section>

{include file="_partials/foot.tpl"}
