components/profile-links.js

class ProfileLinks extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        .links-container {
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          margin-top: 2rem;
          justify-content: center;
        }
        .profile-link {
          display: flex;
          align-items: center;
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          text-decoration: none;
          font-weight: 500;
          transition: all 0.3s ease;
          border: 1px solid var(--indigo-600);
          color: var(--indigo-600);
          background: transparent;
        }
        .profile-link:hover {
          background: var(--indigo-600);
          color: white;
          transform: translateY(-2px);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .profile-link i {
          margin-right: 0.5rem;
        }
        .dark .profile-link {
          border-color: var(--indigo-400);
          color: var(--indigo-400);
        }
        .dark .profile-link:hover {
          background: var(--indigo-400);
          color: var(--gray-900);
        }
      </style>
      <div class="links-container">
        <a href="#" class="profile-link" id="profile-cv">
          <i data-feather="download"></i> Download CV
        </a>
        <a href="#" class="profile-link" id="profile-linkedin">
          <i data-feather="linkedin"></i> LinkedIn
        </a>
        <a href="#" class="profile-link" id="profile-medium">
          <i data-feather="edit"></i> Medium
        </a>
        <a href="#" class="profile-link" id="profile-scholar">
          <i data-feather="book-open"></i> Scholar
        </a>
      </div>
    `;

    // Initialize feather icons
    document.addEventListener('DOMContentLoaded', () => {
      feather.replace();
    });
  }
}

customElements.define('profile-links', ProfileLinks);