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

<div class="cm-container cm-pp" data-cm-product
  data-id="{product.id}"
  data-product-options="{product.options_json}"
  data-product-variations="{product.variations_json}"
  data-cover="{product.cover}"
  data-price="{product.price}"
  data-old-price="{product.old_price}"
  data-stock="{product.stock}"
  data-url="{product.url}">

  {* ───────── Хлебные крошки ───────── *}
  <nav class="cm-breadcrumbs" aria-label="Хлібні крихти">
    <a href="/">{icon name="dashboard" size="14"}</a>
    <span class="cm-breadcrumbs__sep">›</span>
    <a href="/shop">Магазин</a>
    [if {category}]
      <span class="cm-breadcrumbs__sep">›</span>
      <a href="/shop/category/{category.slug}">{category.title}</a>
    [/if]
    <span class="cm-breadcrumbs__sep">›</span>
    <span class="cm-breadcrumbs__current">{product.title}</span>
  </nav>

  {* ───────── Заголовок + рейтинг (над hero) ───────── *}
  <header class="cm-pp-head">
    <h1 class="cm-pp-head__title">{product.title}</h1>
    <div class="cm-pp-head__meta">
      [if {product.stock}]
        <span class="cm-pp-head__stock"><span class="cm-dot"></span>В наявності</span>
      [else]
        <span class="cm-pp-head__stock cm-pp-head__stock--out"><span class="cm-dot"></span>Немає в наявності</span>
      [/if]
      <span class="cm-product-rating">
        <span class="cm-stars">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          <span data-cm-rating-value data-id="{product.id}">4.7</span>
        </span>
        <a class="cm-product-reviews" href="#cm-pp-reviews">{icon name="message_circle" size="14"} <span data-cm-reviews-value data-id="{product.id}">68</span></a>
      </span>
      [if {product.sku}]<span class="cm-pp-head__sku">Код: <b>{product.id}</b> · Артикул: <b data-cm-sku>{product.sku}</b></span>[else]<span class="cm-pp-head__sku">Код: <b>{product.id}</b></span>[/if]
    </div>
  </header>

  {* ───────── Hero: 3 колонки. Левая (галерея) и правая (buy-box) — sticky. ───────── *}
  <section class="cm-pp-hero">

    {* Колонка 1: галерея (sticky) *}
    <aside class="cm-pp-gallery" data-cm-gallery>
      <div class="cm-pp-gallery__inner">
        <div class="cm-pp-gallery__thumbs" data-cm-gallery-thumbs>
          [foreach var="product.gallery" as="img"]
            <button type="button"
              class="cm-pp-gallery__thumb [if {_first}="1"]is-active[/if]"
              data-cm-gallery-thumb
              data-src="{img}"
              aria-label="Фото {_index}">
              <img src="{img|thumb}" alt="" loading="lazy">
            </button>
          [/foreach]
        </div>

        <button type="button" class="cm-pp-gallery__main" data-cm-gallery-open aria-label="Збільшити фото">
          [if {product.cover}]
            <img class="cm-pp-gallery__main-img" data-cm-gallery-main-img src="{product.cover|large}" alt="{product.title}">
          [else]
            <div class="cm-pp-gallery__noimg">{icon name="image" size="80"}</div>
          [/if]
          <span class="cm-pp-gallery__zoom" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35M11 8v6M8 11h6"/></svg>
          </span>
          <div class="cm-pp-gallery__actions" onclick="event.stopPropagation()">
            <span class="cm-product-act" data-cm-fav="{product.id}" role="button" aria-label="В обране">{icon name="heart" size="20"}</span>
            <span class="cm-product-act" data-cm-compare="{product.id}" role="button" aria-label="До порівняння">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
            </span>
          </div>
        </button>
      </div>
    </aside>

    {* Lightbox-overlay для увеличенного фото *}
    <div class="cm-lightbox" data-cm-lightbox hidden>
      <div class="cm-lightbox__backdrop" data-cm-lightbox-close></div>
      <button type="button" class="cm-lightbox__close" data-cm-lightbox-close aria-label="Закрити">{icon name="close" size="24"}</button>
      <button type="button" class="cm-lightbox__nav cm-lightbox__nav--prev" data-cm-lightbox-prev aria-label="Назад">{icon name="chevron_left" size="28"}</button>
      <button type="button" class="cm-lightbox__nav cm-lightbox__nav--next" data-cm-lightbox-next aria-label="Вперед">{icon name="chevron_right" size="28"}</button>
      <img class="cm-lightbox__img" data-cm-lightbox-img src="" alt="">
      <div class="cm-lightbox__counter" data-cm-lightbox-counter></div>
    </div>

    {* Колонка 2: характеристики, аксессуары, сервисы *}
    <div class="cm-pp-info">
      [if {category}]
        <div class="cm-pp-info__brand">
          <span class="cm-pp-info__brand-label">{category.title}</span>
          <a href="/shop/category/{category.slug}" class="cm-pp-info__brand-link">Всі товари бренду {icon name="chevron_right" size="14"}</a>
        </div>
      [/if]

      [if {product.has_variations}]
        <section class="cm-pp-block">
          <header class="cm-pp-block__head">
            <h3 class="cm-pp-block__title">Оберіть варіант</h3>
          </header>
          <div class="cm-variation-options" data-cm-variation-options></div>
        </section>
      [/if]

      [if {product.specs}]
        <section class="cm-pp-block">
          <header class="cm-pp-block__head">
            <h3 class="cm-pp-block__title">Характеристики</h3>
            <a href="#cm-pp-specs" class="cm-pp-block__more">Всі характеристики {icon name="chevron_right" size="14"}</a>
          </header>
          <ul class="cm-pp-specs">
            [foreach var="product.specs" as="s"]
              <li>
                <span class="cm-pp-specs__label">{s.label}</span>
                <span class="cm-pp-specs__dots"></span>
                <span class="cm-pp-specs__value">
                  [if {s.images}]
                    [foreach var="s.images" as="im"]
                      <a href="{im.full}" class="cm-spec-img" target="_blank" rel="noopener"><img src="{im.thumb}" alt="" loading="lazy"></a>
                    [/foreach]
                  [else]{s.value}[/if]
                </span>
              </li>
            [/foreach]
          </ul>
        </section>
      [/if]

      <section class="cm-pp-block">
        <header class="cm-pp-block__head">
          <h3 class="cm-pp-block__title">Сервіси</h3>
        </header>
        <ul class="cm-pp-services">
          <li class="cm-pp-service">
            <span class="cm-pp-service__ico">{icon name="sparkles" size="20"}</span>
            <div class="cm-pp-service__body">
              <div class="cm-pp-service__title">Послуга «Розширена гарантія» на 24 місяці</div>
              <div class="cm-pp-service__desc">Ремонт або компенсація 50% вартості при поломці.</div>
            </div>
            <div class="cm-pp-service__price">660 ₴</div>
          </li>
          <li class="cm-pp-service">
            <span class="cm-pp-service__ico">{icon name="lightning" size="20"}</span>
            <div class="cm-pp-service__body">
              <div class="cm-pp-service__title">Послуга «Налаштування»</div>
              <div class="cm-pp-service__desc">Налаштуємо і покажемо як працює.</div>
            </div>
            <div class="cm-pp-service__price">399 ₴</div>
          </li>
        </ul>
      </section>

      <section class="cm-pp-payments">
        <div class="cm-pp-payments__title">Оплачуйте покупку готівкою, карткою чи переказуванням на банківський рахунок</div>
        <div class="cm-pp-payments__icons">
          <span class="cm-payment-badge">VISA</span>
          <span class="cm-payment-badge">MasterCard</span>
          <span class="cm-payment-badge">Apple Pay</span>
          <span class="cm-payment-badge">Google Pay</span>
        </div>
        <p class="cm-pp-payments__note">Вся техніка має сертифікати та гарантію від виробника. Повернути її можна протягом 14 днів після покупки.</p>
      </section>
    </div>

    {* Колонка 3: цена + кнопка купить + доставка (sticky) *}
    <aside class="cm-pp-buy">
      <div class="cm-pp-buy__inner">
        <div class="cm-pp-buy__signup">
          <span class="cm-pp-buy__signup-ico">{icon name="bell" size="14"}</span>
          <span><b>Авторизуйтесь</b>, щоб дізнатись свою персональну ціну</span>
        </div>

        <div class="cm-pp-buy__prices">
          [if {product.old_price_fmt}]
            <div class="cm-pp-buy__old">
              <span class="cm-price-old" data-cm-price-old>{product.old_price_fmt} ₴</span>
              <span class="cm-price-discount" data-cm-discount-text>—</span>
            </div>
          [/if]
          <div class="cm-pp-buy__now" data-cm-price-now-big>{product.price_fmt} ₴</div>
          <div class="cm-pp-buy__bonus" data-cm-bonus-row>
            +<span data-cm-bonus-value>0</span> ₴ на бонусний рахунок
          </div>
        </div>

        <button type="button" class="cm-btn cm-btn--primary cm-btn--lg cm-btn--block cm-pp-buy__cart"
          data-add-to-cart="1"
          data-cm-cart-btn
          data-pid="{product.id}"
          data-ptitle="{product.title}"
          data-pprice="{product.price}"
          data-pcover="{product.cover}"
          data-psku="{product.sku}">
          {icon name="cart" size="18"}
          <span data-cm-cart-label>Купити</span>
        </button>

        <button type="button" class="cm-btn cm-btn--ghost cm-btn--block cm-pp-buy__credit">
          Купити частинами або в кредит
        </button>

        <p class="cm-product-out" data-cm-out hidden>Комбінація недоступна</p>

        <div class="cm-pp-buy__pay-icons">
          <span class="cm-pay-badge cm-pay-badge--visa" title="Visa">VISA</span>
          <span class="cm-pay-badge cm-pay-badge--mc" title="MasterCard">
            <svg width="22" height="14" viewBox="0 0 36 22" aria-hidden="true"><circle cx="13" cy="11" r="9" fill="#eb001b"/><circle cx="23" cy="11" r="9" fill="#f79e1b" opacity=".85"/></svg>
          </span>
          <span class="cm-pay-badge cm-pay-badge--apple" title="Apple Pay">
            <svg width="28" height="14" viewBox="0 0 50 22" aria-hidden="true"><path d="M9.7 6.3c.6-.7.9-1.7.8-2.7-.8.1-1.7.6-2.3 1.2-.5.6-1 1.6-.8 2.5.9.1 1.7-.4 2.3-1zm.8.8c-1.3 0-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7-1.3 0-2.6.8-3.3 2-1.4 2.4-.4 6 1 8 .6 1 1.4 2 2.4 2s1.4-.6 2.6-.6c1.2 0 1.5.6 2.6.6 1.1 0 1.8-1 2.4-2 .7-1.1 1-2.2 1-2.3 0 0-1.9-.7-1.9-2.9 0-1.8 1.5-2.6 1.5-2.7-.8-1.2-2.1-1.4-2.6-1.4-1.3-.1-2.5.7-3.1.7zM22 4.3v15h2.5v-5.1h3.5c3.2 0 5.4-2.2 5.4-5s-2.2-4.9-5.3-4.9H22zm2.5 2.1h2.9c2.2 0 3.4 1.2 3.4 2.9 0 1.7-1.2 2.9-3.4 2.9h-2.9V6.4z" fill="#000"/></svg>
          </span>
          <span class="cm-pay-badge cm-pay-badge--gpay" title="Google Pay">G Pay</span>
        </div>

        <div class="cm-pp-buy__bonus-note">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>
          від <b data-cm-installment>—</b> ₴/міс.
        </div>

        <div class="cm-pp-delivery">
          <h4 class="cm-pp-delivery__title">Доставка</h4>
          <button type="button" class="cm-pp-delivery__city">
            {icon name="search" size="14"} <span>Київ</span> {icon name="chevron_down" size="12"}
          </button>
          <ul class="cm-pp-delivery__list">
            <li class="cm-pp-delivery__item">
              <span class="cm-pp-delivery__row">
                <span class="cm-pp-delivery__name">Самовивіз з магазину</span>
                <span class="cm-pp-delivery__price">безкоштовно</span>
              </span>
              <span class="cm-pp-delivery__date">сьогодні</span>
            </li>
            <li class="cm-pp-delivery__item">
              <span class="cm-pp-delivery__row">
                <span class="cm-pp-delivery__name">Кур'єром по місту</span>
                <span class="cm-pp-delivery__price">від 99 ₴</span>
              </span>
              <span class="cm-pp-delivery__date">завтра</span>
            </li>
            <li class="cm-pp-delivery__item">
              <span class="cm-pp-delivery__row">
                <span class="cm-pp-delivery__name">Нова Пошта</span>
                <span class="cm-pp-delivery__price">від 65 ₴</span>
              </span>
              <span class="cm-pp-delivery__date">1–2 дні</span>
            </li>
            <li class="cm-pp-delivery__item">
              <span class="cm-pp-delivery__row">
                <span class="cm-pp-delivery__name">Meest Express</span>
                <span class="cm-pp-delivery__price">від 55 ₴</span>
              </span>
              <span class="cm-pp-delivery__date">2–3 дні</span>
            </li>
          </ul>
        </div>
      </div>
    </aside>
  </section>

  {* ───────── Tabs-секции под hero (full-width) ───────── *}
  <nav class="cm-pp-tabs" data-cm-pp-tabs>
    <a class="cm-pp-tab is-active" href="#cm-pp-description">Опис</a>
    <a class="cm-pp-tab" href="#cm-pp-reviews">Відгуки</a>
    [if {related}]<a class="cm-pp-tab" href="#cm-pp-related">Схожі товари</a>[/if]
  </nav>

  <section class="cm-pp-section" id="cm-pp-description">
    <h2 class="cm-pp-section__title">Опис {product.title}</h2>
    [if {product.body}]
      <div class="cm-pp-description">{product.body|raw}</div>
    [else]
      [if {product.short}]
        <div class="cm-pp-description">{product.short}</div>
      [else]
        <p class="cm-pp-section__empty">Детальний опис ще не доданий.</p>
      [/if]
    [/if]
  </section>

  <section class="cm-pp-section" id="cm-pp-reviews">
    <h2 class="cm-pp-section__title">Відгуки</h2>

    <div class="cm-reviews">
      <header class="cm-reviews__head">
        <div class="cm-reviews__summary">
          <div class="cm-reviews__avg">
            <span class="cm-reviews__avg-num">[if {reviews.count}]{reviews.avg}[else]—[/if]</span>
            <span class="cm-reviews__avg-stars" data-cm-stars-fill="{reviews.avg}">
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </span>
            <span class="cm-reviews__avg-count">{reviews.count} відгук(ів)</span>
          </div>
          [if {reviews.count}]
            <ul class="cm-reviews__bars">
              [foreach var="reviews.bars" as="b"]
                <li>
                  <span class="cm-reviews__bar-stars">{b.stars}★</span>
                  <span class="cm-reviews__bar-track"><span class="cm-reviews__bar-fill" style="width:{b.percent}%"></span></span>
                  <span class="cm-reviews__bar-count">{b.count}</span>
                </li>
              [/foreach]
            </ul>
          [/if]
        </div>
        <button type="button" class="cm-btn cm-btn--primary cm-reviews__write" data-cm-review-toggle>
          {icon name="edit" size="16"} Написати відгук
        </button>
      </header>

      {* Форма добавления отзыва (изначально скрыта) *}
      <form class="cm-review-form" method="post" action="/shop/reviews/add" data-cm-review-form hidden>
        {csrf}
        <input type="hidden" name="product_id" value="{product.id}">

        <div class="cm-review-form__row">
          <label class="cm-review-form__field">
            <span>Ваше ім'я <em>*</em></span>
            <input type="text" name="author_name" required maxlength="100" placeholder="Як вас звати">
          </label>
          <label class="cm-review-form__field">
            <span>Email (не публікується)</span>
            <input type="email" name="author_email" maxlength="200" placeholder="email@example.com">
          </label>
        </div>

        <div class="cm-review-form__rating">
          <span>Ваша оцінка <em>*</em></span>
          <div class="cm-review-rate" data-cm-review-rate>
            <input type="hidden" name="rating" value="5" data-cm-review-rate-value>
            <button type="button" class="cm-review-rate__star is-active" data-cm-review-star="1" aria-label="1 з 5">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </button>
            <button type="button" class="cm-review-rate__star is-active" data-cm-review-star="2" aria-label="2 з 5">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </button>
            <button type="button" class="cm-review-rate__star is-active" data-cm-review-star="3" aria-label="3 з 5">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </button>
            <button type="button" class="cm-review-rate__star is-active" data-cm-review-star="4" aria-label="4 з 5">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </button>
            <button type="button" class="cm-review-rate__star is-active" data-cm-review-star="5" aria-label="5 з 5">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </button>
          </div>
        </div>

        <label class="cm-review-form__field cm-review-form__field--full">
          <span>Ваш відгук <em>*</em></span>
          <textarea name="content" rows="5" required minlength="5" maxlength="5000" placeholder="Поділіться думкою про товар: що сподобалось, які є нюанси..."></textarea>
        </label>

        <div class="cm-review-form__actions">
          <button type="submit" class="cm-btn cm-btn--primary">Надіслати</button>
          <button type="button" class="cm-btn cm-btn--ghost" data-cm-review-toggle>Скасувати</button>
        </div>
      </form>

      {* Список отзывов *}
      [if {reviews.list}]
        <ul class="cm-review-list">
          [foreach var="reviews.list" as="rv"]
            <li class="cm-review">
              <div class="cm-review__avatar" aria-hidden="true">{rv.author_initial}</div>
              <div class="cm-review__body">
                <div class="cm-review__head">
                  <span class="cm-review__name">{rv.author_name}</span>
                  <span class="cm-review__date">{rv.date}</span>
                </div>
                <div class="cm-review__rating" data-cm-stars-fill="{rv.rating}">
                  <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                  <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                  <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                  <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                  <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                </div>
                <p class="cm-review__content">{rv.content}</p>
              </div>
            </li>
          [/foreach]
        </ul>
      [else]
        <p class="cm-pp-section__empty">Поки що немає відгуків. Будьте першим, хто залишить.</p>
      [/if]
    </div>
  </section>

  [if {related}]
    <section class="cm-pp-section" id="cm-pp-related">
      <h2 class="cm-pp-section__title">Схожі товари</h2>
      <div class="cm-grid">
        [foreach var="related" as="p"]
          {include file="_partials/product_card_inner.tpl"}
        [/foreach]
      </div>
    </section>
  [/if]

</div>

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