class ProductCard extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name') || 'Product';
    const price = parseFloat(this.getAttribute('price')) || 0;
    const image = this.getAttribute('image') || '';
    const rating = parseFloat(this.getAttribute('rating')) || 0;
    const id = this.getAttribute('id') || '';

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: white;
          border-radius: 0.75rem;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
          transition: all 0.3s ease;
          height: 100%;
        }
:host(:hover) {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        a {
          display: block;
          text-decoration: none;
          color: inherit;
        }
        .image-container {
          height: 12rem;
          background-size: cover;
          background-position: center;
          background-image: url('${image}');
        }
        .content {
          padding: 1.25rem;
        }
        .name {
          font-weight: 600;
          margin-bottom: 0.5rem;
          color: #1e293b;
        }
        .price {
          font-weight: 700;
          color: #2563eb;
          margin-bottom: 0.75rem;
          font-size: 1.125rem;
        }
        .rating {
          color: #f59e0b;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
          gap: 0.25rem;
        }
        .btn-add {
          width: 100%;
          background: #2563eb;
          color: white;
          border: none;
          padding: 0.5rem;
          border-radius: 0.25rem;
          font-weight: 500;
          cursor: pointer;
          transition: background 0.2s;
        }
        .btn-add:hover {
          background: #1d4ed8;
        }
      </style>
      <a href="/product.html?id=${id}">
        <div class="image-container"></div>
        <div class="content">
          <h3 class="name">${name}</h3>
          <div class="price">$${price.toFixed(2)}</div>
          <div class="rating">
            <i class="fas fa-star"></i>
            <span>${rating}</span>
          </div>
          <button class="btn-add" onclick="event.preventDefault(); addToCart('${id}')">
            Add to Cart
          </button>
        </div>
      </a>
    `;
  }
}
customElements.define('product-card', ProductCard);