class FeatureCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .feature-card {
          background: white;
          border-radius: 0.5rem;
          padding: 1.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
          transition: all 0.3s ease;
          height: 100%;
        }
        .feature-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .icon-container {
          display: inline-flex;
          padding: 0.75rem;
          border-radius: 50%;
          margin-bottom: 1rem;
        }
        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.75rem;
          color: #1f2937;
        }
        p {
          color: #6b7280;
          margin-bottom: 1rem;
        }
        .feature-content {
          margin-top: 1rem;
        }
      </style>
      <div class="feature-card">
        <div class="icon-container" style="background: ${this.getAttribute('icon-bg') || '#eef2ff'}; color: ${this.getAttribute('icon-color') || '#6366f1'}">
          <i data-feather="${this.getAttribute('icon') || 'star'}"></i>
        </div>
        <h3>${this.getAttribute('title') || 'Feature'}</h3>
        <p>${this.getAttribute('description') || 'Feature description'}</p>
        <div class="feature-content">
          <slot></slot>
        </div>
      </div>
    `;
  }
}
customElements.define('feature-card', FeatureCard);