components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background-color: #171717;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .footer-link {
          transition: color 0.2s ease;
        }
        
        .footer-link:hover {
          color: #e879f9;
        }
      </style>
      <footer class="py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
          <div>
            <h3 class="text-xl font-bold bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent mb-4">RecoFuchsia</h3>
            <p class="text-neutral-400 mb-6">AI-powered recommendations that boost your conversions.</p>
            <div class="flex gap-4">
              <a href="#" class="text-neutral-400 hover:text-primary-400">
                <i data-feather="twitter"></i>
              </a>
              <a href="#" class="text-neutral-400 hover:text-primary-400">
                <i data-feather="github"></i>
              </a>
              <a href="#" class="text-neutral-400 hover:text-primary-400">
                <i data-feather="linkedin"></i>
              </a>
            </div>
          </div>
          
          <div>
            <h4 class="font-semibold text-neutral-200 mb-4">Product</h4>
            <ul class="space-y-2">
              <li><a href="#features" class="footer-link text-neutral-400">Features</a></li>
              <li><a href="/recommendations.html" class="footer-link text-neutral-400">Recommendations Engine</a></li>
<li><a href="#pricing" class="footer-link text-neutral-400">Pricing</a></li>
              <li><a href="#demo" class="footer-link text-neutral-400">Demo</a></li>
              <li><a href="#updates" class="footer-link text-neutral-400">Updates</a></li>
            </ul>
          </div>
          
          <div>
            <h4 class="font-semibold text-neutral-200 mb-4">Resources</h4>
            <ul class="space-y-2">
              <li><a href="#docs" class="footer-link text-neutral-400">Documentation</a></li>
              <li><a href="#tutorials" class="footer-link text-neutral-400">Tutorials</a></li>
              <li><a href="#blog" class="footer-link text-neutral-400">Blog</a></li>
              <li><a href="#support" class="footer-link text-neutral-400">Support</a></li>
            </ul>
          </div>
          
          <div>
            <h4 class="font-semibold text-neutral-200 mb-4">Company</h4>
            <ul class="space-y-2">
              <li><a href="#about" class="footer-link text-neutral-400">About Us</a></li>
              <li><a href="#careers" class="footer-link text-neutral-400">Careers</a></li>
              <li><a href="#contact" class="footer-link text-neutral-400">Contact</a></li>
              <li><a href="#legal" class="footer-link text-neutral-400">Legal</a></li>
            </ul>
          </div>
        </div>
        
        <div class="max-w-7xl mx-auto border-t border-neutral-800 mt-12 pt-8 text-sm text-neutral-500 text-center">
          © ${new Date().getFullYear()} RecoFuchsia. All rights reserved.
        </div>
      </footer>
    `;
    
    // Add feather icons replacement for shadow DOM
    setTimeout(() => {
      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
      icons.forEach(icon => {
        feather.replace(icon);
      });
    }, 100);
  }
}

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