components/logo.js

class CustomLogo extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .logo-container {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-family: 'Playfair Display', serif;
          font-weight: 700;
          font-size: 1.5rem;
          color: #111827;
        }
        .logo-icon {
          color: #D4AF37;
          width: 1.5em;
          height: 1.5em;
        }
        .logo-text {
          position: relative;
        }
        .logo-text::after {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55, 0.5));
        }
      </style>
      <div class="logo-container">
        <i data-feather="shield" class="logo-icon"></i>
        <span class="logo-text">SolStrategies</span>
      </div>
    `;
    feather.replace();
  }
}

customElements.define('custom-logo', CustomLogo);