<turbo-stream action="append" target="modals"><template><div id="modal_92f5e797-d0e6-4e27-883e-02e5e3e89144">
  <!-- Модалка продукта -->
  <div class="fixed inset-0 flex items-end justify-center md:items-center md:p-4 animate-fade-in"
       style="z-index: 50;"
       data-testid="product-modal"
    id="product-modal-frame-0"
    data-frame-stack-level="0"
    data-stack-level="0">
    <!-- overlay -->
    <a href="/units/509da9f3-4449-4e69-a3e4-6bcbbdd71465/products/92f5e797-d0e6-4e27-883e-02e5e3e89144/modal/close" class="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300" data-turbo-stream="true" data-testid="modal-overlay"></a>
    <!-- Контейнер модалки - выезжает снизу на мобильных, центр на десктопе -->
    <div class="bg-white rounded-t-2xl md:rounded-lg w-full md:max-w-4xl max-h-[90vh] overflow-hidden transform transition-transform duration-300 ease-out animate-slide-up"
         data-testid="product-modal-container"
         data-action="click->product-modal#stopPropagation">
      <!-- Заголовок с кнопкой закрытия -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-900" data-testid="product-modal-title">
          Виноградное яблоко
        </h2>
        <a href="/units/509da9f3-4449-4e69-a3e4-6bcbbdd71465/products/92f5e797-d0e6-4e27-883e-02e5e3e89144/modal/close" class="text-gray-400 hover:text-gray-600 transition-colors" data-turbo-stream="true" data-turbo-frame="modals" data-testid="modal-close-button">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </a>
      </div>
      <!-- Контент модалки -->
      <div class="overflow-y-auto max-h-[calc(90vh-8rem)]">
        <div class="p-4 space-y-6 max-w-4xl mx-auto">
          <!-- Галерея -->
          <div class="space-y-4" data-controller="gallery" data-testid="product-modal-gallery">
  <!-- Основное изображение с миниатюрами поверх -->
  <div class="relative aspect-square rounded-lg h-[300px] w-full overflow-hidden bg-gray-100">
      <img src="https://neuropine.com/attachments/04f7cd7f-cc84-4ac5-96c8-bdaf6a8ba831?quality=75&amp;width=800"
           alt="Виноградное яблоко"
           class="w-full h-full object-cover"
           data-gallery-target="mainImage"
           data-testid="product-gallery-main-image">
    <!-- Индикатор остроты -->
    <!-- Маленькие миниатюры поверх основного изображения -->
  </div>
</div>


          <!-- Выбор размера (если несколько) -->

          <!-- Основная информация -->
          <div class="flex items-center justify-between mb-4" id="product-price-info">
            <div class="flex items-center gap-3">
              <div class="text-2xl font-bold text-primary" data-testid="product-modal-total-price"
                   data-controller="product-price"
                   data-product-price-base-value="390">
                390 ₽
              </div>
            </div>
              <div class="text-gray-500">
                700.0 мл
              </div>
          </div>


          

            <div>
              <h2 class="text-lg font-semibold text-gray-900 mb-3">Описание</h2>
              <p class="text-gray-700 leading-relaxed"><p>Насыщенный цитрусовый вкус</p></p>
            </div>
            <div>
              <h2 class="text-lg font-semibold text-gray-900 mb-3">Состав</h2>
              <p class="text-gray-700 leading-relaxed"><p>сок винограда, чай зеленый, джус-боллы яблоко</p></p>
            </div>
          <div>
  <h2 class="text-lg font-semibold text-gray-900 mb-4">Отзывы</h2>
  <!-- Список отзывов -->
    <div class="text-center py-8 text-gray-500">
      <p>Пока нет отзывов об этом товаре</p>
    </div>
  <!-- Форма отзыва или приглашение войти -->
    <div class="border-t pt-6">
      <p class="text-gray-500 text-center">
        <a class="text-blue-600 hover:text-blue-800 font-medium" href="/session/new">Войдите в аккаунт</a>
        , чтобы оставить отзыв
      </p>
    </div>
</div>

        </div>
      </div>
    </div>
    <style>
      @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
      }

      .animate-fade-in {
        animation: fade-in 300ms ease-out;
      }

      .animate-slide-up {
        animation: slide-up 300ms ease-out;
      }

      @media (min-width: 768px) {
        @keyframes slide-up-md {
          from { transform: translateY(20px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }

        .animate-slide-up {
          animation: slide-up-md 300ms ease-out;
        }
      }

      /* Стили для стекинговых модалок */
      .stacked-modal-container {
        position: relative;
      }

      #stacked-modals-container .stacked-modal-container:nth-child(n+2) {
        position: relative;
      }

      #stacked-modals-container .stacked-modal-container:nth-child(n+2) [data-testid="product-modal-content"] {
        background-color: rgba(0, 0, 0, 0.7);
      }
    </style>
  </div>
</div>
</template></turbo-stream>