<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Breadcrumb -->
  <div class="flex items-center gap-2 text-sm text-gray-500 mb-6">
    <a href="/" class="hover:text-indigo-600">Home</a>
    <i class="fas fa-chevron-right text-xs"></i>
    <a href="/products" class="hover:text-indigo-600">Products</a>
    <i class="fas fa-chevron-right text-xs"></i>
    <span class="text-gray-800 font-medium"><%= product.name %></span>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Images -->
    <div>
      <div class="aspect-square bg-gray-100 rounded-xl overflow-hidden mb-4">
        <% if (product.images && product.images.length) { %>
          <img src="<%= product.images[0].imagePath %>" alt="<%= product.name %>" id="mainImage" class="w-full h-full object-cover">
        <% } else { %>
          <div class="w-full h-full flex items-center justify-center text-gray-400">
            <i class="fas fa-image text-6xl"></i>
          </div>
        <% } %>
      </div>
      <% if (product.images && product.images.length > 1) { %>
        <div class="flex gap-2 overflow-x-auto">
          <% product.images.forEach(function(img) { %>
            <img src="<%= img.imagePath %>" class="w-20 h-20 object-cover rounded-lg cursor-pointer border-2 hover:border-indigo-600" onclick="document.getElementById('mainImage').src=this.src">
          <% }) %>
        </div>
      <% } %>
    </div>

    <!-- Product Info -->
    <div>
      <% if (product.Category) { %>
        <p class="text-sm text-indigo-600 font-medium mb-2"><%= product.Category.name %></p>
      <% } %>
      <h1 class="text-2xl font-bold text-gray-800 mb-2"><%= product.name %></h1>
      
      <!-- Rating -->
      <div class="flex items-center gap-2 mb-4">
        <div class="flex text-yellow-400 text-sm">
          <% const rating = parseFloat(typeof avgRating !== 'undefined' ? avgRating : 0); %>
          <% for (let i = 1; i <= 5; i++) { %>
            <i class="fas fa-star<%= i <= Math.round(rating) ? '' : '-o' %>"></i>
          <% } %>
        </div>
        <span class="text-sm text-gray-500">(<%= rating %>)</span>
      </div>

      <!-- Price -->
      <div class="flex items-center gap-3 mb-6">
        <span class="text-3xl font-bold text-indigo-600"><%= currencySymbol %><%= parseFloat(product.price).toFixed(2) %></span>
        <% if (product.comparePrice) { %>
          <span class="text-xl text-gray-400 line-through"><%= currencySymbol %><%= parseFloat(product.comparePrice).toFixed(2) %></span>
          <span class="bg-red-100 text-red-600 text-sm px-2 py-1 rounded-full font-medium">
            -<%= Math.round((1 - parseFloat(product.price)/parseFloat(product.comparePrice)) * 100) %>% OFF
          </span>
        <% } %>
      </div>

      <!-- Short Description -->
      <% if (product.shortDescription) { %>
        <p class="text-gray-600 mb-6"><%= product.shortDescription %></p>
      <% } %>

      <!-- Variants -->
      <% if (product.variants && product.variants.length) { %>
        <div class="mb-6">
          <h3 class="font-medium text-gray-800 mb-2">Options:</h3>
          <div class="flex flex-wrap gap-2" x-data="{ selectedVariant: null }">
            <% product.variants.forEach(function(v) { %>
              <button @click="selectedVariant = <%= v.id %>"
                :class="selectedVariant === <%= v.id %> ? 'border-indigo-600 bg-indigo-50 text-indigo-600' : 'border-gray-300 hover:border-gray-500'"
                class="px-4 py-2 border rounded-lg text-sm font-medium transition">
                <%= v.value %>
              </button>
            <% }) %>
          </div>
        </div>
      <% } %>

      <!-- Stock -->
      <div class="mb-6">
        <% if (product.stockQuantity > 0) { %>
          <span class="text-green-600 text-sm"><i class="fas fa-check-circle mr-1"></i> In Stock (<%= product.stockQuantity %> available)</span>
        <% } else { %>
          <span class="text-red-600 text-sm"><i class="fas fa-times-circle mr-1"></i> Out of Stock</span>
        <% } %>
      </div>

      <!-- Add to Cart -->
      <% if (product.stockQuantity > 0) { %>
        <form action="/cart/add" method="POST" class="flex items-center gap-4 mb-6">
          <input type="hidden" name="productId" value="<%= product.id %>">
          <div class="flex items-center border border-gray-300 rounded-lg">
            <button type="button" onclick="this.nextElementSibling.stepDown()" class="px-3 py-2 text-gray-500 hover:text-gray-700">-</button>
            <input type="number" name="quantity" value="1" min="1" max="<%= product.stockQuantity %>" class="w-16 text-center py-2 border-x border-gray-300">
            <button type="button" onclick="this.previousElementSibling.stepUp()" class="px-3 py-2 text-gray-500 hover:text-gray-700">+</button>
          </div>
          <button type="submit" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center gap-2">
            <i class="fas fa-shopping-cart"></i> Add to Cart
          </button>
        </form>
      <% } %>

      <!-- Wishlist -->
      <% if (currentUser) { %>
        <form action="/account/wishlist/add" method="POST" class="mb-6">
          <input type="hidden" name="productId" value="<%= product.id %>">
          <button type="submit" class="text-gray-500 hover:text-red-500 text-sm"><i class="far fa-heart mr-1"></i> Add to Wishlist</button>
        </form>
      <% } %>

      <!-- Description -->
      <% if (product.description) { %>
        <hr class="my-6">
        <h3 class="font-semibold text-gray-800 mb-2">Description</h3>
        <div class="text-gray-600 text-sm leading-relaxed"><%- product.description.replace(/\n/g, '<br>') %></div>
      <% } %>
    </div>
  </div>

  <!-- Reviews -->
  <div class="mt-12">
    <h2 class="text-xl font-bold text-gray-800 mb-6">Customer Reviews</h2>
    
    <% if (currentUser) { %>
      <form action="/account/review" method="POST" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <input type="hidden" name="productId" value="<%= product.id %>">
        <h3 class="font-medium text-gray-800 mb-4">Write a Review</h3>
        <div class="star-rating mb-4 flex flex-row-reverse justify-end gap-1">
          <% for (let i = 5; i >= 1; i--) { %>
            <input type="radio" name="rating" value="<%= i %>" id="star<%= i %>" <%= i === 5 ? 'checked' : '' %>>
            <label for="star<%= i %>" class="text-2xl cursor-pointer"><i class="fas fa-star"></i></label>
          <% } %>
        </div>
        <textarea name="comment" rows="3" placeholder="Share your experience..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm mb-4"></textarea>
        <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700">Submit Review</button>
      </form>
    <% } %>

    <% if (product.Reviews && product.Reviews.length) { %>
      <div class="space-y-4">
        <% product.Reviews.forEach(function(review) { %>
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-2">
              <div>
                <span class="font-medium text-gray-800"><%= review.User ? review.User.name : 'Anonymous' %></span>
                <div class="flex text-yellow-400 text-sm">
                  <% for (let i = 1; i <= 5; i++) { %>
                    <i class="fas fa-star<%= i <= review.rating ? '' : '-o' %>"></i>
                  <% } %>
                </div>
              </div>
              <span class="text-sm text-gray-400"><%= new Date(review.createdAt).toLocaleDateString('en-IN') %></span>
            </div>
            <p class="text-gray-600 text-sm"><%= review.comment %></p>
          </div>
        <% }) %>
      </div>
    <% } else { %>
      <p class="text-gray-400 text-center py-8">No reviews yet. Be the first to review!</p>
    <% } %>
  </div>

  <!-- Related Products -->
  <% if (typeof relatedProducts !== 'undefined' && relatedProducts && relatedProducts.length) { %>
    <div class="mt-12">
      <h2 class="text-xl font-bold text-gray-800 mb-6">Related Products</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
        <% relatedProducts.forEach(function(p) { %>
          <a href="/products/<%= p.slug %>" class="bg-white rounded-xl shadow-sm hover:shadow-md transition border border-gray-200 overflow-hidden group">
            <div class="aspect-square bg-gray-100">
              <% if (p.images && p.images.length) { %>
                <img src="<%= p.images[0].imagePath %>" class="w-full h-full object-cover group-hover:scale-105 transition">
              <% } else { %>
                <div class="w-full h-full flex items-center justify-center text-gray-400"><i class="fas fa-image text-3xl"></i></div>
              <% } %>
            </div>
            <div class="p-4">
              <h3 class="font-medium text-sm truncate"><%= p.name %></h3>
              <span class="text-indigo-600 font-bold">₹<%= parseFloat(p.price).toFixed(2) %></span>
            </div>
          </a>
        <% }) %>
      </div>
    </div>
  <% } %>
</div>
