components/neon-button.js

class NeonButton extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button {
          position: relative;
          background: transparent;
          color: var(--neon-primary);
          border: 2px solid var(--neon-primary);
          padding: 1rem 2.5rem;
          font-size: 1rem;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          cursor: pointer;
          transition: all 0.3s ease;
          overflow: hidden;
          z-index: 1;
        }
        
        button:hover {
          color: var(--bg-dark);
          box-shadow: 0 0 10px var(--neon-primary),
                      0 0 20px var(--neon-primary),
                      0 0 40px var(--neon-primary);
        }
        
        button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, var(--neon-primary), transparent);
          transition: 0.5s;
          z-index: -1;
        }
        
        button:hover::before {
          left: 100%;
        }
        
        .icon {
          margin-right: 0.5rem;
          vertical-align: middle;
        }
      </style>
      <button>
        <i data-feather="${this.getAttribute('icon')}" class="icon"></i>
        <slot></slot>
      </button>
    `;
    feather.replace();
  }
}
customElements.define('neon-button', NeonButton);