components/footer.js

class CustomFooter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: #1f2937;
          border-top: 2px solid #ef4444;
          margin-top: 3rem;
        }
        
        .footer {
          max-width: 1280px;
          margin: 0 auto;
          padding: 2rem 1.5rem;
          text-align: center;
        }
        
        .footer-text {
          color: #9ca3af;
          margin: 0.5rem 0;
        }
        
        .footer-features {
          display: flex;
          justify-content: center;
          gap: 2rem;
          margin-top: 1rem;
          flex-wrap: wrap;
        }
        
        .feature {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
          color: #d1d5db;
        }
        
        .feature-icon {
          width: 16px;
          height: 16px;
        }
        
        .operation-badge {
          display: inline-block;
          background: #ef4444;
          color: white;
          padding: 0.25rem 0.5rem;
          border-radius: 0.25rem;
          font-size: 0.75rem;
          font-weight: 600;
          letter-spacing: 0.05em;
        }
      </style>
      
      <footer class="footer">
        <p class="footer-text">
          Janus Scanner Pro - Advanced Financial Fraud Detection System
        </p>
        <p class="footer-text">
          © 2025 Janus Corp. All rights reserved. | 
          <span class="operation-badge">Operation "Lumière Noire"</span>
        </p>
        
        <div class="footer-features" role="list">
          <div class="feature" role="listitem">
            <svg class="feature-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
            </svg>
            Secure
          </div>
          <div class="feature" role="listitem">
            <svg class="feature-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
            </svg>
            AI Powered
          </div>
          <div class="feature" role="listitem">
            <svg class="feature-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
            </svg>
            Real-time Analysis
          </div>
        </div>
      </footer>
    `;
  }
}

customElements.define('custom-footer', CustomFooter);