<footer class="cm-footer">
  <div class="cm-container">
    <div class="cm-footer-info">
      <div class="cm-footer-info__col">
        <span class="cm-footer-info__ico">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 3H1v13h15V3z"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
        </span>
        <div>
          <h4 class="cm-footer-info__title">Доставка</h4>
          <p>Самовивіз із магазину «{site.name}», доставка до відділення або у відділення «Нова Пошта» і «Meest»</p>
        </div>
      </div>
      <div class="cm-footer-info__col">
        <span class="cm-footer-info__ico">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
        </span>
        <div>
          <h4 class="cm-footer-info__title">Гарантія</h4>
          <p>Сертифікована техніка з офіційною гарантією від виробника.</p>
        </div>
      </div>
      <div class="cm-footer-info__col">
        <span class="cm-footer-info__ico">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
        </span>
        <div>
          <h4 class="cm-footer-info__title">Оплата</h4>
          <p>Оплачуйте покупку можливістю готівкою, карткою чи безготівковим розрахунком.</p>
        </div>
      </div>
      <div class="cm-footer-info__col">
        <span class="cm-footer-info__ico">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><polyline points="21 3 21 8 16 8"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><polyline points="3 21 3 16 8 16"/></svg>
        </span>
        <div>
          <h4 class="cm-footer-info__title">Повернення</h4>
          <p>Повернення товару відбувається протягом 14 днів після покупки, у відповідності з діючим законом.</p>
        </div>
      </div>
    </div>

    <div class="cm-footer-cols">
      <div class="cm-footer-col cm-footer-col--newsletter">
        <h4>Підписуйся на знижки!</h4>
        <p>Не турбуйся, ми не спамимо <span aria-hidden="true">😉</span></p>
        {include file="_partials/newsletter.tpl"}
      </div>
      <div class="cm-footer-col">
        <h4>Магазин</h4>
        <ul>
          <li><a href="/about">Про нас</a></li>
          <li><a href="/contacts">Контакти</a></li>
          <li><a href="/blog">Блог і поради</a></li>
          <li><a href="/business">Для бізнесу</a></li>
          <li><a href="/career">Вакансії</a></li>
        </ul>
      </div>
      <div class="cm-footer-col">
        <h4>Сервіси</h4>
        <ul>
          <li><a href="/loyalty">Бонусна програма</a></li>
          <li><a href="/installments">Оплата частинами</a></li>
          <li><a href="/gift-cards">Подарункові сертифікати</a></li>
          <li><a href="/affiliate">Партнерська програма</a></li>
        </ul>
      </div>
      <div class="cm-footer-col">
        <h4>Покупцям</h4>
        <ul>
          <li><a href="/account/orders">Мої замовлення</a></li>
          <li><a href="/delivery">Доставка та оплата</a></li>
          <li><a href="/returns">Обмін і повернення</a></li>
          <li><a href="/warranty">Гарантійні умови</a></li>
          <li><a href="/help">Питання та відповіді</a></li>
        </ul>
      </div>
      <div class="cm-footer-col cm-footer-col--contacts">
        <h4>Консультація</h4>
        <a class="cm-footer-phone" href="tel:0800303505">0-800-303-505</a>
        <a class="cm-footer-phone" href="tel:0800600506">0-800-600-506</a>
        <p class="cm-footer-phone-note">Безкоштовно по Україні<br>08:00–21:00 Пн-Нд</p>
        <ul class="cm-footer-contacts">
          <li><a href="mailto:info@{site.url}">{icon name="mail" size="14"} info@{site.url}</a></li>
          <li><a href="/p/help-center">{icon name="message_circle" size="14"} Центр допомоги</a></li>
          <li><a href="/p/chat">{icon name="message_circle" size="14"} Чат на сайті</a></li>
          <li><a href="https://t.me" rel="noopener">{icon name="message_circle" size="14"} Telegram</a></li>
          <li><a href="viber://chat" rel="noopener">{icon name="phone" size="14"} Viber</a></li>
          <li><a href="/p/messenger">{icon name="message_circle" size="14"} Messenger</a></li>
        </ul>
      </div>
    </div>

    <div class="cm-footer-bottom">
      <div class="cm-footer-bottom__left">
        <span class="cm-footer-copy">© Усі права захищені ТОВ «{site.name}», 2010–2026</span>
        <div class="cm-footer-payments" aria-label="Способи оплати">
          <span class="cm-payment-badge">VISA</span>
          <span class="cm-payment-badge">MasterCard</span>
        </div>
      </div>
      <div class="cm-footer-social">
        <a href="https://facebook.com" rel="noopener" aria-label="Facebook">{icon name="facebook" size="16"}</a>
        <a href="https://instagram.com" rel="noopener" aria-label="Instagram">{icon name="instagram" size="16"}</a>
        <a href="https://t.me" rel="noopener" aria-label="Telegram">{icon name="message_circle" size="16"}</a>
        <a href="https://tiktok.com" rel="noopener" aria-label="TikTok">{icon name="play" size="16"}</a>
        <a href="https://youtube.com" rel="noopener" aria-label="YouTube">{icon name="youtube" size="16"}</a>
      </div>
    </div>

    <ul class="cm-footer-tags" aria-label="Популярні категорії">
      <li><span class="cm-tag-label">Популярні розділи:</span></li>
      [categories entity="shop_product" limit="20" sort="news_count" order="desc" as="cat"]
        <li><a href="/category/{cat.slug}" class="cm-tag-pill">{cat.title}</a></li>
      [/categories]
    </ul>
  </div>
</footer>
