components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        .footer-container {
          background: rgba(17, 24, 39, 0.95);
          border-top: 1px solid rgba(55, 65, 81, 0.3);
        }
        .footer-link {
          color: #9ca3af;
          transition: color 0.3s ease;
        }
        .footer-link:hover {
          color: #22c55e;
        }
      </style>
      <footer class="footer-container">
        <div class="container mx-auto px-6 py-12">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <!-- Brand -->
            <div>
              <div class="flex items-center space-x-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                <i data-feather="cpu" class="w-6 h-6 text-gray-900"></i>
            </div>
            <span class="text-xl font-bold">PySQL Labs</span>
            </div>
              <p class="text-gray-400 text-sm">
                Interactive platform for mastering Python and SQL through hands-on labs and interview simulations.
            </p>
          </div>

          <!-- Quick Links -->
          <div>
            <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
            <ul class="space-y-3">
              <li><a href="#docs" class="footer-link">Documentation</a></li>
            <li><a href="#cheatsheets" class="footer-link">Cheat Sheets</a></li>
              <li><a href="#api" class="footer-link">API Reference</a></li>
            <li><a href="#tutorials" class="footer-link">Video Tutorials</a></li>
            </ul>
          </div>

          <!-- Resources -->
          <div>
            <h4 class="text-lg font-semibold mb-4">Resources</h4>
              <ul class="space-y-3">
                <li><a href="#blog" class="footer-link">Developer Blog</a></li>
            <li><a href="#community" class="footer-link">Community Forum</a></li>
              <li><a href="#webinars" class="footer-link">Live Webinars</a></li>
            <li><a href="#github" class="footer-link">GitHub Repo</a></li>
            <li><a href="#roadmap" class="footer-link">Product Roadmap</a></li>
            </ul>
        </div>

        <!-- Legal -->
        <div>
            <h4 class="text-lg font-semibold mb-4">Legal</h4>
              <ul class="space-y-3">
                <li><a href="#privacy" class="footer-link">Privacy Policy</a></li>
            <li><a href="#terms" class="footer-link">Terms of Service</a></li>
              <li><a href="#cookies" class="footer-link">Cookie Policy</a></li>
              <li><a href="#security" class="footer-link">Security</a></li>
            <li><a href="#contact" class="footer-link">Contact Us</a></li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-800 mt-8 pt-8">
          <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-gray-500 text-sm mb-4 md:mb-0">
              &copy; ${new Date().getFullYear()} PySQL Labs. For educational use only.
          </div>
          <div class="flex space-x-6">
              <a href="#twitter" aria-label="Twitter">
                <i data-feather="twitter" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
              </a>
            <a href="#github" aria-label="GitHub">
                <i data-feather="github" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
              </a>
            <a href="#linkedin" aria-label="LinkedIn">
                <i data-feather="linkedin" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
              </a>
            <a href="#discord" aria-label="Discord">
                <i data-feather="message-circle" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
              </a>
            </div>
          </div>
        </div>
      </footer>
    `;
    
    setTimeout(() => {
      if (typeof feather !== 'undefined') {
        feather.replace();
      }
    }, 100);
  }
}

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