<%- include('partials/head') %>
<%- include('partials/header') %>

<main>
  <section class="section-sm">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / <% if (product.category_slug) { %><a href="/<%= product.category_slug %>"><%= product.category_name %></a> / <% } %><%= product.name %></div>

      <div class="pd-grid">
        <div class="pd-media">
          <div class="pd-main-img">
            <img id="mainImg" src="/public/images/products/<%= product.image %>" alt="<%= product.name %>">
          </div>
          <div class="pd-thumbs">
            <div class="pd-thumb active" data-src="/public/images/products/<%= product.image %>"><img src="/public/images/products/<%= product.image %>" alt=""></div>
            <% gallery.forEach(function(g){ if (g.image !== product.image) { %>
              <div class="pd-thumb" data-src="/public/images/products/<%= g.image %>"><img src="/public/images/products/<%= g.image %>" alt=""></div>
            <% } }); %>
          </div>
        </div>

        <div>
          <div class="pd-cat"><span class="section-kicker"><%= product.category_name || 'New Drop' %></span></div>
          <h1 class="pd-title"><%= product.name %></h1>

          <div class="pd-price">
            <% if (priceRequest) { %>
              <span class="price-request" style="font-size:16px;">Price on request</span>
            <% } else { %>
              <span class="price"><%= money(product.price) %></span>
              <% if (product.compare_at_price && product.compare_at_price > product.price) { %>
                <span class="price-compare" style="font-size:17px;"><%= money(product.compare_at_price) %></span>
              <% } %>
            <% } %>
          </div>

          <div class="pd-status">
            <% if (priceRequest) { %>
              <span class="dot blue"></span> Confirm price before ordering
            <% } else if (product.stock > 0) { %>
              <span class="dot"></span> In stock — <%= product.stock %> available
            <% } else { %>
              <span class="dot red"></span> Out of stock
            <% } %>
          </div>

          <% if (priceRequest) { %>
            <div class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
              <b>Price not set yet</b> — this item is being finalised. Message us on WhatsApp for the price and we'll confirm it within minutes.
              <div style="margin-top:14px;">
                <a class="btn btn-gold" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20what%27s%20the%20price%20for%20%22<%= encodeURIComponent(product.name) %>%22%3F" target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Ask on WhatsApp</a>
              </div>
            </div>
          <% } else { %>
            <% if (productSizes.length && sizeType !== 'none') { %>
            <div class="pd-sizes">
              <div class="pd-size-head">
                <div class="pd-size-label">Select size (<%= sizeType === 'shoes' ? 'UK' : 'S – XXL' %>) <span id="sizeErr" style="color:var(--red); font-weight:700; margin-left:6px;" hidden>— choose a size</span></div>
                <% if (sizeType === 'shoes') { %>
                <button type="button" class="pd-size-guide" id="sizeGuideBtn">Size guide <i class="ic" data-ic="arrow"></i></button>
                <% } %>
              </div>
              <div class="pd-size-grid" id="sizeGrid">
                <% productSizes.forEach(function(s){ %><button type="button" class="pd-size" data-size="<%= s %>"><%= s %></button><% }); %>
              </div>
              <% if (sizeType === 'shoes') { %>
              <div class="pd-size-guide-table" id="sizeGuide" hidden>
                <table class="table">
                  <thead><tr><th>UK</th><th>EU</th><th>US</th><th>Foot length (cm)</th></tr></thead>
                  <tbody>
                    <tr><td>6</td><td>39</td><td>7</td><td>24.5</td></tr>
                    <tr><td>6.5</td><td>39.5</td><td>7.5</td><td>25.0</td></tr>
                    <tr><td>7</td><td>40</td><td>8</td><td>25.4</td></tr>
                    <tr><td>7.5</td><td>41</td><td>8.5</td><td>25.8</td></tr>
                    <tr><td>8</td><td>42</td><td>9</td><td>26.2</td></tr>
                    <tr><td>8.5</td><td>42.5</td><td>9.5</td><td>26.7</td></tr>
                    <tr><td>9</td><td>43</td><td>10</td><td>27.1</td></tr>
                    <tr><td>9.5</td><td>44</td><td>10.5</td><td>27.6</td></tr>
                    <tr><td>10</td><td>44.5</td><td>11</td><td>28.0</td></tr>
                    <tr><td>10.5</td><td>45</td><td>11.5</td><td>28.4</td></tr>
                    <tr><td>11</td><td>45.5</td><td>12</td><td>28.9</td></tr>
                    <tr><td>12</td><td>46.5</td><td>13</td><td>29.8</td></tr>
                  </tbody>
                </table>
                <p class="admin-hint" style="margin-top:8px;">Measure your foot length and pick the matching UK size. Half sizes available on most pairs.</p>
              </div>
              <% } %>
            </div>
            <% } %>
            <div class="pd-cta">
              <div class="qty-select" id="qtySel">
                <button type="button" id="qtyMinus" aria-label="Decrease quantity">−</button>
                <span id="qtyVal">1</span>
                <button type="button" id="qtyPlus" aria-label="Increase quantity">+</button>
              </div>
              <% if (product.stock > 0) { %>
                <button class="btn btn-gold" id="addCartBtn"><i class="ic" data-ic="cart"></i> Add to cart</button>
                <a class="btn btn-dark" id="buyNowBtn"><i class="ic" data-ic="arrow"></i> Buy now</a>
              <% } else { %>
                <button class="btn btn-gold disabled">Sold out</button>
              <% } %>
            </div>
            <div class="pd-cta">
              <button class="btn btn-outline btn-sm" id="wishBtn"><i class="ic" data-ic="heart"></i> <span id="wishLabel">Add to wishlist</span></button>
            </div>
          <% } %>

          <div class="pd-desc"><%= product.description || 'This listing is being finalised — check back soon for the full description.' %></div>

          <div class="pd-meta">
            <div class="row"><span>SKU</span><b><%= product.sku || '—' %></b></div>
            <div class="row"><span>Category</span><b><%= product.category_name || 'Uncategorised' %></b></div>
            <div class="row"><span>Availability</span><b><%= priceRequest ? 'Price on request' : (product.stock > 0 ? 'In stock' : 'Out of stock') %></b></div>
            <div class="row"><span>Store</span><b><%= site.store_name %></b></div>
          </div>

          <div class="share-row">
            <a href="https://wa.me/?text=<%= encodeURIComponent(site.store_name + ' ' + product.name + ' — ' + site.site_url + '/product/' + product.slug) %>" target="_blank" rel="noopener" aria-label="Share on WhatsApp"><i class="ic" data-ic="whatsapp"></i></a>
            <a href="https://www.facebook.com/sharer/sharer.php?u=<%= encodeURIComponent(site.site_url + '/product/' + product.slug) %>" target="_blank" rel="noopener" aria-label="Share on Facebook"><i class="ic" data-ic="facebook"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <% if (related.length) { %>
  <section class="section" style="padding-top:20px;">
    <div class="container">
      <div class="section-head reveal">
        <div class="section-kicker">You might also like</div>
        <h2 class="section-title">Related products</h2>
      </div>
      <div class="product-grid">
        <% related.forEach(function(p){ %><div class="reveal"><%- include('partials/product-card', { p, money }) %></div><% }); %>
      </div>
    </div>
  </section>
  <% } %>
  <section class="section" style="padding-top:20px;">
    <div class="container" style="max-width:860px;">
      <div class="section-head reveal">
        <div class="section-kicker">Reviews</div>
        <h2 class="section-title">What customers think</h2>
      </div>

      <div class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
        <% if (productReviews.length) { %>
          <% productReviews.forEach(function(r){ %>
            <div style="padding:16px 0; border-bottom:1px solid var(--line);">
              <div style="display:flex; align-items:center; gap:10px;">
                <b><%= r.name %></b><% if (r.city) { %><span style="color:var(--muted); font-size:12px;">· <%= r.city %></span><% } %>
                <span style="color:var(--gold-2); margin-left:auto; font-size:14px;">
                  <% for (let i = 1; i <= 5; i++) { %><%= i <= r.rating ? '★' : '☆' %><% } %>
                </span>
              </div>
              <% if (r.title) { %><h4 style="margin:8px 0 4px; font-size:15px;"><%= r.title %></h4><% } %>
              <p style="color:var(--ink-2); font-size:14px;"><%= r.body %></p>
            </div>
          <% }); %>
        <% } else { %>
          <p style="color:var(--muted);">No reviews for this product yet — be the first below.</p>
        <% } %>
      </div>

      <div class="panel" style="background:var(--surface); border:1px solid var(--line-2); margin-top:18px;">
        <h3 style="margin-bottom:14px;">Leave a review for this product</h3>
        <form id="productReviewForm">
          <div class="form-grid">
            <div class="form-field"><label for="prName">Your name</label><input id="prName" required <% if (user) { %>value="<%= user.name %>"<% } %>></div>
            <div class="form-field">
              <label>Rating</label>
              <div class="star-picker" id="prPicker">
                <% for (let i = 1; i <= 5; i++) { %><button type="button" class="sp-star" data-v="<%= i %>" aria-label="<%= i %> stars"><i class="ic" data-ic="star"></i></button><% } %>
              </div>
            </div>
          </div>
          <div class="form-field"><label for="prTitle">Title</label><input id="prTitle"></div>
          <div class="form-field"><label for="prBody">Review</label><textarea id="prBody" rows="4" required></textarea></div>
          <button class="btn btn-gold" type="submit">Submit review</button>
        </form>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
<script>window.PRODUCT_SLUG = '<%= product.slug %>'; window.PRODUCT_ID = <%= product.id %>;</script>
<%- include('partials/scripts', { pageJs: 'product.js' }) %>
