class ShareButton extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
        }
        button {
          background: linear-gradient(to right, #dc2626, #7c3aed);
          color: white;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          font-family: inherit;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          transition: all 0.3s ease;
        }
        button:hover {
          opacity: 0.9;
          transform: translateY(-1px);
        }
        .share-icon {
          width: 1rem;
          height: 1rem;
        }
      </style>
      <button>
        <svg class="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
          <polyline points="16 6 12 2 8 6"></polyline>
          <line x1="12" y1="2" x2="12" y2="15"></line>
        </svg>
        Share
      </button>
    `;

    this.shadowRoot.querySelector('button').addEventListener('click', () => this.shareContent());
  }

  shareContent() {
    const title = document.title;
    const url = window.location.href;
    const text = "Check out this DevDaRK Shadow AI Pro module";

    if (navigator.share) {
      navigator.share({
        title,
        text,
        url
      }).catch(err => {
        console.log('Error sharing:', err);
      });
    } else {
      // Fallback for desktop
      const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
      window.open(shareUrl, '_blank');
    }
  }
}
customElements.define('share-button', ShareButton);