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

<div class="bz-container">
  {* ───── Hero ───── *}
  <section class="bz-hero" data-bz-hero>
    <div class="bz-hero-thumbs">
      [news limit="6" sort="published_at" order="desc"]
        <button type="button" class="bz-hero-thumb" data-bz-hero-thumb
          data-src="{cover|large}"
          data-title="{title}"
          data-url="{url}"
          data-tag="[if {category.title}]{category.title}[else]Featured[/if]"
          data-date="{date}"
          data-views="{views}">
          [if {cover}]<img src="{cover|thumb}" alt="{title}" loading="lazy">[/if]
        </button>
      [/news]
    </div>

    <div class="bz-hero-main">
      <img data-bz-hero-main-img src="" alt="">
      <div class="bz-hero-caption">
        <span class="bz-tag" data-bz-hero-tag>Featured</span>
        <h2 data-bz-hero-title></h2>
        <div class="bz-card-meta">
          {icon name="calendar" size="14"} <span data-bz-hero-date></span>
          <span>·</span>
          <span>{icon name="eye" size="14"} <span data-bz-hero-views></span></span>
        </div>
        <a href="#" class="bz-hero-read" data-bz-hero-link>Читать {icon name="arrow_right" size="14"}</a>
      </div>
    </div>

    <div class="bz-hero-side">
      [news limit="4" sort="published_at" order="desc" offset="6"]
        <a href="{url}" class="bz-hero-side-card">
          <span class="bz-tag">[if {category.title}]{category.title}[else]Featured[/if]</span>
          <span class="bz-by">By <b>admin</b></span>
          <h3 class="bz-card-title">{title}</h3>
          <div class="bz-card-meta">
            {icon name="calendar" size="14"} <span>{date}</span>
            <span>·</span>
            <span>{icon name="eye" size="14"} {views}</span>
          </div>
        </a>
      [/news]
    </div>
  </section>

  {* ───── Trending Article ───── *}
  <section class="bz-section">
    <div class="bz-section-head">
      <h2 class="bz-section-title">Trending Article</h2>
    </div>
    <div class="bz-trending-grid">
      [news limit="6" sort="views" order="desc"]
        {include file="_partials/article_card.tpl"}
      [/news]
    </div>
  </section>

  {* ───── From Following ───── *}
  <section class="bz-section">
    <div class="bz-section-head">
      <h2 class="bz-section-title">From Following</h2>
      <div class="bz-section-arrows" data-bz-carousel>
        <button type="button" data-bz-carousel-prev aria-label="Назад">{icon name="arrow_left" size="16"}</button>
        <button type="button" data-bz-carousel-next aria-label="Вперёд">{icon name="arrow_right" size="16"}</button>
      </div>
    </div>
    <div class="bz-following-layout">
      <div class="bz-following-grid">
        [news limit="4" sort="published_at" order="desc"]
          <article class="bz-following-card">
            <a href="{url}" class="bz-cover">
              [if {cover}]<img src="{cover|medium}" alt="{title}" loading="lazy">[/if]
            </a>
            <div class="bz-body">
              <span class="bz-tag">[if {category.title}]{category.title}[else]Article[/if]</span>
              <span class="bz-by">By <b>[if {author_name}]{author_name}[else]admin[/if]</b></span>
              <h3 class="bz-card-title"><a href="{url}">{title}</a></h3>
              <div class="bz-card-meta">
                {icon name="calendar" size="14"} <span>{date}</span>
                <span>·</span>
                <span>10 min read</span>
              </div>
            </div>
          </article>
        [/news]
      </div>

      <aside class="bz-sidebar-card bz-author-card">
        <div class="bz-author-avatar"></div>
        <h3 class="bz-author-name">Hasan</h3>
        <p class="bz-author-role">UI/UX · Designer</p>
        <p class="bz-author-bio">She is a lawyer, podcaster, speaker, and writer. As an educational content director, he helps develop premium training products.</p>
        <div class="bz-author-social">
          <a href="#" aria-label="Facebook">{icon name="facebook" size="14"}</a>
          <a href="#" aria-label="Skype">{icon name="skype" size="14"}</a>
          <a href="#" aria-label="Twitter">{icon name="twitter" size="14"}</a>
          <a href="#" aria-label="LinkedIn">{icon name="linkedin" size="14"}</a>
        </div>
        <a href="#" class="bz-btn-pill">View Profile {icon name="arrow_right" size="14"}</a>
      </aside>
    </div>
  </section>

  {* ───── Trending Topic (категории) ───── *}
  <section class="bz-section" data-bz-carousel>
    <div class="bz-section-head">
      <h2 class="bz-section-title">Trending Topic</h2>
      <div class="bz-section-arrows">
        <button type="button" data-bz-carousel-prev aria-label="Назад">{icon name="arrow_left" size="16"}</button>
        <button type="button" data-bz-carousel-next aria-label="Вперёд">{icon name="arrow_right" size="16"}</button>
      </div>
    </div>
    <div class="bz-topics-row" data-bz-carousel-track>
      [categories entity="news" limit="10" sort="news_count" order="desc"]
        <a href="{url}" class="bz-topic">
          [if {cover}]<img src="{cover|medium}" alt="{title}" loading="lazy">[/if]
          <span class="bz-topic-label">{title}</span>
        </a>
      [/categories]
    </div>
  </section>

  {* ───── Newsletter ───── *}
  {include file="_partials/newsletter.tpl"}

  {* ───── Featured Video (если есть категория video) ───── *}
  <section class="bz-section">
    <div class="bz-section-head">
      <h2 class="bz-section-title">Featured Video</h2>
    </div>
    <div class="bz-video-grid">
      [news category="video" limit="1" sort="published_at" order="desc"]
        <a class="bz-video-main" data-bz-video-open="{fields.video_url}" href="{url}">
          [if {cover}]<img src="{cover|large}" alt="{title}">[/if]
          <div class="bz-play"><span>{icon name="play" size="24"}</span></div>
        </a>
      [/news]

      <div class="bz-video-side">
        [news category="video" limit="2" sort="published_at" order="desc" offset="1"]
          <a class="bz-video-card" data-bz-video-open="{fields.video_url}" href="{url}">
            <div class="bz-cover">
              [if {cover}]<img src="{cover|medium}" alt="{title}" loading="lazy">[/if]
              <div class="bz-play"><span>{icon name="play" size="14"}</span></div>
            </div>
            <div class="bz-body">
              <span class="bz-tag">Video</span>
              <span class="bz-by">{date}</span>
              <h4 class="bz-card-title">{title}</h4>
            </div>
          </a>
        [/news]
      </div>

      <aside class="bz-sidebar-card">
        <h3 class="bz-section-title" style="font-size:17px;margin-bottom:18px">Latest Post</h3>
        {async block="latest_news" trigger="load"}
      </aside>
    </div>
  </section>

  {* ───── Trending Products (только если магазин активен) ───── *}
  [if {shop.enabled}="1"]
    <section class="bz-section">
      <div class="bz-section-head">
        <h2 class="bz-section-title">Trending Products</h2>
        <a href="/shop" class="bz-btn-pill">All Products {icon name="arrow_right" size="14"}</a>
      </div>
      <div class="bz-products-grid">
        [products limit="8" sort="id" order="desc"]
          <article class="bz-product-card">
            <a href="{url}" class="bz-product-cover">
              [if {cover}]<img src="{cover|medium}" alt="{title}" loading="lazy">[else]<div class="no-cover">{icon name="image" size="32"}</div>[/if]
            </a>
            <div class="bz-product-body">
              <h3 class="bz-product-title"><a href="{url}">{title}</a></h3>
              <div class="bz-product-price">
                {price amount="{price}"}
                [if {old_price_fmt}]<span class="old">{price amount="{old_price}"}</span>[/if]
              </div>
              <button type="button" class="bz-btn-primary"
                data-add-to-cart="1"
                data-pid="{id}"
                data-ptitle="{title}"
                data-pprice="{price}"
                data-pcover="{cover}">{icon name="cart" size="14"} В корзину</button>
            </div>
          </article>
        [/products]
      </div>
    </section>
  [/if]

  {* ───── Bottom promo (как в Bunzo «All Food Item 50% Off») ───── *}
  <div class="bz-bottom-promo">
    <div>
      <h3>Все товары</h3>
      <p>Скидки до 50% на популярные категории</p>
    </div>
    [if {shop.enabled}="1"]
      <a href="/shop" class="bz-btn-pill">К покупкам {icon name="arrow_right" size="14"}</a>
    [/if]
  </div>
</div>

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