components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: linear-gradient(to right, var(--primary), var(--secondary));
          color: white;
          padding: 3rem 1rem;
          margin-top: 3rem;
        }
        
        .footer-container {
          max-width: 1280px;
          margin: 0 auto;
        }
        
        .footer-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 2.5rem;
        }
        
        .footer-logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 1rem;
        }
        
        .footer-logo-icon {
          background: white;
          color: var(--primary);
          padding: 0.5rem;
          border-radius: 50%;
        }
        
        .footer-description {
          opacity: 0.9;
          margin-bottom: 1rem;
          font-size: 0.875rem;
        }
        
        .social-icons {
          display: flex;
          gap: 1rem;
        }
        
        .social-icon {
          opacity: 0.8;
          transition: opacity 0.2s;
        }
        
        .social-icon:hover {
          opacity: 1;
        }
        
        .footer-heading {
          font-size: 1.125rem;
          font-weight: 600;
          margin-bottom: 1rem;
        }
        
        .footer-links {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        
        .footer-link {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          opacity: 0.8;
          transition: opacity 0.2s;
        }
        
        .footer-link:hover {
          opacity: 1;
        }
        
        .footer-link-icon {
          width: 1rem;
          height: 1rem;
        }
        
        .contact-item {
          display: flex;
          gap: 0.75rem;
          margin-bottom: 1rem;
        }
        
        .contact-icon {
          flex-shrink: 0;
          margin-top: 0.25rem;
        }
        
        .footer-divider {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          margin-top: 2.5rem;
          padding-top: 1.5rem;
          text-align: center;
          font-size: 0.875rem;
          opacity: 0.8;
        }
        
        @media (min-width: 768px) {
          .footer-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }
      </style>
      
      <footer>
        <div class="footer-container">
          <div class="footer-grid">
<div class="container mx-auto px-4 sm:px-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <div class="flex items-center space-x-3 mb-4">
                <div class="bg-white text-primary p-2 rounded-full">
                  <i data-feather="globe"></i>
                </div>
                <span class="text-2xl font-bold">Lingua Noel</span>
              </div>
              <p class="text-white opacity-90 mb-4">Your AI-powered language learning companion with a festive twist this holiday season.</p>
              <div class="flex space-x-4">
                <a href="#" class="social-icon text-white opacity-80 hover:opacity-100">
                  <i data-feather="facebook"></i>
                </a>
                <a href="#" class="social-icon text-white opacity-80 hover:opacity-100">
                  <i data-feather="twitter"></i>
                </a>
                <a href="#" class="social-icon text-white opacity-80 hover:opacity-100">
                  <i data-feather="instagram"></i>
                </a>
                <a href="#" class="social-icon text-white opacity-80 hover:opacity-100">
                  <i data-feather="youtube"></i>
                </a>
              </div>
            </div>
            
            <div>
              <h3 class="font-bold text-xl mb-4">Quick Links</h3>
              <ul class="space-y-2">
                <li><a href="/about.html" class="footer-link text-white opacity-80 hover:opacity-100 transition flex items-center"><i data-feather="chevron-right" class="mr-2 w-4 h-4"></i> About Us</a></li>
                <li><a href="/pricing.html" class="footer-link text-white opacity-80 hover:opacity-100 transition flex items-center"><i data-feather="chevron-right" class="mr-2 w-4 h-4"></i> Pricing</a></li>
                <li><a href="/support.html" class="footer-link text-white opacity-80 hover:opacity-100 transition flex items-center"><i data-feather="chevron-right" class="mr-2 w-4 h-4"></i> Support</a></li>
                <li><a href="/contact.html" class="footer-link text-white opacity-80 hover:opacity-100 transition flex items-center"><i data-feather="chevron-right" class="mr-2 w-4 h-4"></i> Contact</a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="font-bold text-xl mb-4">Contact Info</h3>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i data-feather="mail" class="mr-3 mt-1 w-5 h-5"></i>
                  <span>support@linguanoelexample.com</span>
                </li>
                <li class="flex items-start">
                  <i data-feather="phone" class="mr-3 mt-1 w-5 h-5"></i>
                  <span>+1 (555) 123-4567</span>
                </li>
                <li class="flex items-start">
                  <i data-feather="map-pin" class="mr-3 mt-1 w-5 h-5"></i>
                  <span>123 Holiday Street, Christmasville, CV 12345</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div class="border-t border-white border-opacity-20 mt-8 pt-6 text-center">
            <p class="text-white opacity-80">© 2023 Lingua Noel. All rights reserved.</p>
          </div>
        </div>
      </footer>
    `;
  }
}

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