components/back-to-top.js

class BackToTop extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          position: fixed;
          bottom: 2rem;
          right: 2rem;
          z-index: 50;
          opacity: 0;
          visibility: hidden;
          transform: translateY(20px);
          transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        :host(.visible) {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        button {
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 50%;
          background: linear-gradient(135deg, #0ea5e9, #7c3aed);
          color: white;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }
        button::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
          transform: translateX(-100%);
          transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        button:hover {
          transform: translateY(-3px) scale(1.05);
          box-shadow: 0 8px 30px rgba(14, 165, 233, 0.4);
        }
        button:hover::before {
          transform: translateX(0);
        }
        i {
          width: 1.5rem;
          height: 1.5rem;
        }
      </style>
      <button aria-label="Back to top">
        <i data-feather="arrow-up"></i>
      </button>
    `;

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

    window.addEventListener('scroll', this.handleScroll.bind(this));
    feather.replace();
  }

  handleScroll() {
    if (window.scrollY > 300) {
      this.classList.add('visible');
    } else {
      this.classList.remove('visible');
    }
  }
}

customElements.define('back-to-top', BackToTop);