class CategoryCard extends HTMLElement {
  connectedCallback() {
    const title = this.getAttribute('title') || 'Category';
    const image = this.getAttribute('image') || '';
    const link = this.getAttribute('link') || '#';
    const icon = this.getAttribute('icon') || 'fa-box';

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          border-radius: 0.75rem;
          overflow: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          height: 100%;
        }
:host(:hover) {
          transform: translateY(-5px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        a {
          display: block;
          text-decoration: none;
          color: inherit;
          height: 100%;
        }
        .card-inner {
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .image-container {
          height: 10rem;
          background-size: cover;
          background-position: center;
          background-image: url('${image}');
          position: relative;
        }
        .icon-container {
          position: absolute;
          top: 1rem;
          left: 1rem;
          background: rgba(255, 255, 255, 0.9);
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #10B981;
          font-size: 1.5rem;
        }
        .content {
          padding: 1.5rem;
          background: white;
          flex: 1;
        }
        .title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #111827;
          margin-bottom: 0.5rem;
        }
        .shop-link {
          color: #10B981;
          font-weight: 500;
          display: inline-flex;
          align-items: center;
          margin-top: 1rem;
        }
        .shop-link i {
          transition: transform 0.2s;
        }
        :host(:hover) .shop-link i {
          transform: translateX(3px);
        }
      </style>
      <a href="${link}">
        <div class="card-inner">
          <div class="image-container">
            <div class="icon-container">
              <i class="fas ${icon}"></i>
            </div>
          </div>
          <div class="content">
            <h3 class="title">${title}</h3>
            <span class="shop-link">
              Shop now <i class="fas fa-arrow-right ml-2"></i>
            </span>
          </div>
        </div>
      </a>
    `;
  }
}
customElements.define('category-card', CategoryCard);