{{> header}}
<style>
  .product-section { padding: 3rem 0; }
  .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .product-gallery { position: sticky; top: 100px; }
  .product-main-image { border-radius: var(--border-radius); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); aspect-ratio: 1; }
  .product-main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
  .product-main-image:hover img { transform: scale(1.05); }
  .product-thumbnails { display: flex; gap: 0.75rem; margin-top: 1rem; }
  .product-thumb { width: 80px; height: 80px; border-radius: var(--border-radius-sm); overflow: hidden; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; }
  .product-thumb:hover, .product-thumb.active { border-color: var(--color-primary); }
  .product-thumb img { width: 100%; height: 100%; object-fit: cover; }

  .product-info h1 { font-size: 2rem; margin-bottom: 1rem; line-height: 1.3; }
  .product-price { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
  .product-price .current { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .product-price .original { color: var(--color-text-muted); text-decoration: line-through; font-size: 1.25rem; font-weight: 400; }
  .product-price .discount { background: var(--color-error); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; }

  .product-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
  .meta-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 25px; font-size: 0.9rem; }
  .meta-item .icon { color: var(--color-primary); }

  .product-description { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 2rem; }
  .product-description h2, .product-description h3 { color: var(--color-heading); margin-top: 1.5rem; margin-bottom: 0.75rem; }

  .quantity-selector { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
  .quantity-selector label { font-weight: 500; }
  .qty-controls { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); overflow: hidden; }
  .qty-btn { width: 44px; height: 44px; background: var(--color-surface); border: none; cursor: pointer; font-size: 1.25rem; color: var(--color-text); transition: all 0.2s; }
  .qty-btn:hover { background: var(--color-background); color: var(--color-primary); }
  .qty-input { width: 60px; height: 44px; border: none; background: var(--color-background); text-align: center; font-size: 1rem; color: var(--color-text); }

  .add-to-cart-btn { padding: 1rem 2rem; font-size: 1.1rem; }
  .product-features { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
  .product-features h3 { margin-bottom: 1rem; font-size: 1rem; }
  .features-list { display: grid; gap: 0.75rem; }
  .feature-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: var(--color-text-muted); }
  .feature-item .check { color: var(--color-success); }

  @media (max-width: 1024px) {
    .product-layout { grid-template-columns: 1fr; }
    .product-gallery { position: static; }
  }
</style>

<section class="product-section">
  <div class="container">
    <div class="product-layout">
      <div class="product-gallery">
        <div class="product-main-image" id="mainImage">
          {{#if product.images.[0]}}
          <img src="{{product.images.[0]}}" alt="{{product.name}}" id="mainProductImage" onerror="this.src='https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=600&fit=crop'">
          {{else}}
          <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=600&fit=crop" alt="{{product.name}}" id="mainProductImage">
          {{/if}}
        </div>
        {{#if product.images.[1]}}
        <div class="product-thumbnails">
          {{#each product.images}}
          <div class="product-thumb {{#if @first}}active{{/if}}" data-image="{{this}}">
            <img src="{{this}}" alt="Product image {{@index}}">
          </div>
          {{/each}}
        </div>
        {{/if}}
      </div>

      <div class="product-info">
        <h1>{{product.name}}</h1>

        <div class="product-price">
          {{#if product.salePrice}}
          <span class="current">${{product.salePrice}}</span>
          <span class="original">${{product.price}}</span>
          <span class="discount">SALE</span>
          {{else}}
          <span class="current">${{product.price}}</span>
          {{/if}}
        </div>

        <div class="product-meta">
          {{#if product.sku}}<span class="meta-item"><span class="icon">🏷️</span> SKU: {{product.sku}}</span>{{/if}}
          <span class="meta-item"><span class="icon">📦</span> {{#if (eq product.type 'DIGITAL')}}Digital Product{{else}}Physical Product{{/if}}</span>
          {{#if product.stock}}<span class="meta-item"><span class="icon">✓</span> In Stock ({{product.stock}})</span>{{/if}}
        </div>

        <div class="product-description">
          {{{product.description}}}
        </div>

        <div class="quantity-selector">
          <label>Quantity:</label>
          <div class="qty-controls">
            <button class="qty-btn" id="qtyMinus">−</button>
            <input type="number" class="qty-input" id="qtyInput" value="1" min="1" max="99">
            <button class="qty-btn" id="qtyPlus">+</button>
          </div>
        </div>

        <button class="btn btn-primary add-to-cart-btn" id="addToCartBtn" data-product-id="{{product.id}}">
          🛒 Add to Cart
        </button>

        <div class="product-features">
          <h3>Why buy from us?</h3>
          <div class="features-list">
            <div class="feature-item"><span class="check">✓</span> Secure checkout</div>
            <div class="feature-item"><span class="check">✓</span> Fast delivery</div>
            <div class="feature-item"><span class="check">✓</span> 30-day money back guarantee</div>
            <div class="feature-item"><span class="check">✓</span> 24/7 customer support</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
(function() {
  // Thumbnail gallery
  document.querySelectorAll('.product-thumb').forEach(function(thumb) {
    thumb.addEventListener('click', function() {
      document.querySelectorAll('.product-thumb').forEach(function(t) { t.classList.remove('active'); });
      this.classList.add('active');
      document.getElementById('mainProductImage').src = this.dataset.image;
    });
  });

  // Quantity controls
  var qtyInput = document.getElementById('qtyInput');
  document.getElementById('qtyMinus').addEventListener('click', function() {
    var val = parseInt(qtyInput.value) || 1;
    if (val > 1) qtyInput.value = val - 1;
  });
  document.getElementById('qtyPlus').addEventListener('click', function() {
    var val = parseInt(qtyInput.value) || 1;
    if (val < 99) qtyInput.value = val + 1;
  });

  // Add to cart
  document.getElementById('addToCartBtn').addEventListener('click', async function() {
    var productId = this.dataset.productId;
    var quantity = parseInt(qtyInput.value) || 1;
    var btn = this;
    var originalText = btn.innerHTML;

    btn.innerHTML = '⏳ Adding...';
    btn.disabled = true;

    try {
      var success = await window.addToCart('product', productId, quantity);
      if (success) {
        btn.innerHTML = '✓ Added to Cart!';
        setTimeout(function() { btn.innerHTML = originalText; btn.disabled = false; }, 2000);
      } else {
        btn.innerHTML = originalText;
        btn.disabled = false;
      }
    } catch (e) {
      btn.innerHTML = originalText;
      btn.disabled = false;
    }
  });
})();
</script>
{{> footer}}
