class BackButton extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
        }
        .back-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: var(--primary);
          color: white;
          border: none;
          border-radius: 9999px;
          cursor: pointer;
          transition: var(--transition);
        }
        .back-btn:hover {
          background: var(--primary-dark);
          transform: translateY(-2px);
        }
      </style>
      <button class="back-btn" id="backBtn">
        <i data-feather="arrow-left"></i>
        <span>Back</span>
      </button>
    `;
    this.shadowRoot.getElementById('backBtn').addEventListener('click', () => {
      window.location.href = 'index.html';
});
}
}

customElements.define('back-button', BackButton);