components/step.js

class CustomStep extends HTMLElement {
  constructor() {
    super();
    this.number = this.getAttribute('number') || '1';
    this.icon = this.getAttribute('icon') || 'check';
    this.title = this.getAttribute('title') || 'Step';
    this.description = this.getAttribute('description') || 'Description';
    this.delay = this.getAttribute('delay') || '0';
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          animation-delay: ${this.delay}ms;
        }
        .step-card {
          text-align: center;
          padding: 1.5rem;
          opacity: 0;
          animation: fadeIn 0.5s ease-out ${this.delay}ms forwards;
        }
        @keyframes fadeIn {
          to {
            opacity: 1;
          }
        }
        .step-number {
          width: 4rem;
          height: 4rem;
          margin: 0 auto 1.5rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.5rem;
            background: linear-gradient(135deg, #22c55e, #d946ef);
            color: white;
            font-size: 1.875rem;
        }
        .step-icon {
          width: 1.5rem;
          height: 1.5rem;
            color: white;
        }
        h3 {
          font-size: 1.5rem;
          font-weight: 600;
          margin-bottom: 0.75rem;
        }
        p {
          color: #9ca3af;
        }
      </style>
      <div class="step-card">
        <div class="step-number">
          <i data-feather="${this.icon}" class="step-icon"></i>
        </div>
        <h3>${this.title}</h3>
        <p>${this.description}</p>
      </div>
    `;
    
    setTimeout(() => {
      if (typeof feather !== 'undefined') {
        feather.replace();
      }
    }, 100);
  }
}

customElements.define('custom-step', CustomStep);