components/floating-button.js

class FloatingButton extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          position: fixed;
          bottom: 2rem;
          left: 2rem;
          z-index: 999;
        }
        
        button {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: var(--primary);
          color: white;
          border: none;
          box-shadow: var(--shadow-lg);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: var(--transition);
        }
        
        button:hover {
          transform: translateY(-3px);
          box-shadow: 0 15px 20px rgba(0,0,0,0.1);
        }
        
        i {
          font-size: 1.5rem;
        }
      </style>
      <button>
        <i class="fas fa-plus"></i>
      </button>
    `;

    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  }
}

customElements.define('floating-button', FloatingButton);