components/product-card.js

class ProductCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    const productId = this.getAttribute('data-id');
    const productTitle = this.getAttribute('data-title');
    const productPrice = this.getAttribute('data-price');
    const productDiscount = this.getAttribute('data-discount');
    const productImage = this.getAttribute('data-image');
    
    this.shadowRoot.innerHTML = `
      <style>
        .product-card {
          background: white;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          position: relative;
        }
        
        .product-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .product-image {
          width: 100%;
          height: 250px;
          object-fit: cover;
          background: #f3f4f6;
        }
        
        .discount-badge {
          position: absolute;
          top: 10px;
          right: 10px;
          background: #ef4444;
          color: white;
          padding: 0.25rem 0.75rem;
          border-radius: 20px;
          font-size: 0.875rem;
          font-weight: 600;
        }
        
        .product-info {
          padding: 1.5rem;
        }
        
        .product-title {
          font-size: 1.125rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
          color: #1f2937;
          line-height: 1.4;
        }
        
        .product-price {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 1rem;
        }
        
        .price-current {
          font-size: 1.5rem;
          font-weight: 700;
          color: #059669;
        }
        
        .price-original {
          font-size: 1rem;
          color: #9ca3af;
          text-decoration: line-through;
        }
        
        .product-rating {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 1rem;
        }
        
        .stars {
          color: #fbbf24;
        }
        
        .rating-count {
          color: #6b7280;
          font-size: 0.875rem;
        }
        
        .add-to-cart-btn {
          width: 100%;
          background: linear-gradient(135deg, #6366f1, #9333ea);
          color: white;
          border: none;
          padding: 0.75rem;
          border-radius: 8px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .add-to-cart-btn:hover {
          background: linear-gradient(135deg, #4f46e5, #7e22ce);
          transform: scale(1.02);
        }
      </style>
      
      <div class="product-card">
        <img src="${productImage}" alt="${productTitle}" class="product-image">
        ${productDiscount ? `<span class="discount-badge">${productDiscount}% تخفیف</span>` : ''}
        <div class="product-info">
          <h3 class="product-title">${productTitle}</h3>
          <div class="product-price">
            <span class="price-current">${productPrice}</span>
            ${productDiscount ? `<span class="price-original">${Math.round(productPrice * (1 + parseInt(productDiscount) / 100))}</span>` : ''}
          </div>
          <div class="product-rating">
            <div class="stars">★★★★☆</div>
            <span class="rating-count">(4.5 از 128 نظر)</span>
          </div>
          <button class="add-to-cart-btn">افزودن به سبد خرید</button>
        </div>
      </div>
    `;
  }
}

customElements.define('product-card', ProductCard);