class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background-color: rgba(0, 0, 0, 0.9);
          border-top: 1px solid #374151;
          padding: 3rem 1.5rem;
          position: relative;
          z-index: 10;
        }
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1.5rem;
        }
        .grid {
          display: grid;
          grid-template-columns: repeat(1, minmax(0, 1fr));
          gap: 2rem;
          margin-bottom: 3rem;
        }
        @media (min-width: 768px) {
          .grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        .flex {
          display: flex;
        }
        .items-center {
          align-items: center;
        }
        .justify-between {
          justify-content: space-between;
        }
        .space-x-2 > * + * {
          margin-left: 0.5rem;
        }
        .space-x-4 > * + * {
          margin-left: 1rem;
        }
        .space-x-6 > * + * {
          margin-left: 1.5rem;
        }
        .space-y-2 > * + * {
          margin-top: 0.5rem;
        }
        .mb-4 {
          margin-bottom: 1rem;
        }
        .mb-6 {
          margin-bottom: 1.5rem;
        }
        .mt-12 {
          margin-top: 3rem;
        }
        .py-12 {
          padding-top: 3rem;
          padding-bottom: 3rem;
        }
        .px-6 {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
        .text-2xl {
          font-size: 1.5rem;
          line-height: 2rem;
        }
        .font-bold {
          font-weight: 700;
        }
        .text-yellow-500 {
          color: #eab308;
        }
        .text-white {
          color: #fff;
        }
        .text-gray-400 {
          color: #9ca3af;
        }
        .text-gray-500 {
          color: #6b7280;
        }
        .hover\\:text-yellow-500:hover {
          color: #eab308;
        }
        .transition {
          transition-property: all;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 150ms;
        }
        .border-t {
          border-top-width: 1px;
        }
        .border-gray-800 {
          border-color: #1f2937;
        }
        .rounded-lg {
          border-radius: 0.5rem;
        }
        .relative {
          position: relative;
        }
        .absolute {
          position: absolute;
        }
        .hidden {
          display: none;
        }
        .language-selector {
          display: flex;
          align-items: center;
          color: #6b7280;
          margin-top: 1rem;
        }
        .language-selector select {
          background: transparent;
          border: none;
          color: #fff;
          margin-left: 0.5rem;
          cursor: pointer;
        }
        .language-selector select:focus {
          outline: none;
        }
      </style>
      <footer>
        <div class="container">
          <div class="grid">
            <div>
              <div class="flex items-center space-x-2 mb-4">
                <i data-feather="zap"></i>
                <span class="text-2xl font-bold tracking-wider text-yellow-500">AMPLIFY</span>
              </div>
              <p class="text-gray-400 mb-4">
                Mental performance technology for champions in sports, business, and life.
              </p>
              <div class="language-selector">
                <i data-feather="globe"></i>
                <select id="footer-language-select">
                  <option value="en">English</option>
                  <option value="es">Español</option>
                  <option value="fr">Français</option>
                  <option value="de">Deutsch</option>
                </select>
              </div>
              <script>
                document.getElementById('footer-language-select').addEventListener('change', function() {
                  const lang = this.value;
                  localStorage.setItem('amplify-language-pref', lang);
                  i18next.changeLanguage(lang, () => {
                    updateContent();
                  });
                });
              </script>
</div>
            
            <div>
              <h3 class="text-lg font-bold text-white mb-4">Products</h3>
              <ul class="space-y-2">
                <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
                <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
                <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-bold text-white mb-4">Company</h3>
              <ul class="space-y-2">
                <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
                <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
                <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
                <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
              <ul class="space-y-2">
                <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
                <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Research</a></li>
                <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
              </ul>
            </div>
          </div>
          
          <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-500 mb-4 md:mb-0">
              © 2025 Amplify Technologies. All rights reserved.
            </p>
            <div class="flex space-x-6">
              <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
              <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
            </div>
          </div>
        </div>
      </footer>
    `;

    // Initialize language selector
    const languageSelect = this.shadowRoot.getElementById('footer-language-select');
    languageSelect.addEventListener('change', (e) => {
      const lang = e.target.value;
      // Save language preference
      localStorage.setItem('amplify-language-pref', lang);
      // Reload page to apply language
      window.location.reload();
    });

    // Set current language
    const savedLang = localStorage.getItem('amplify-language-pref') || 'en';
    languageSelect.value = savedLang;

    // Replace feather icons
    if (window.feather) {
      window.feather.replace({ class: 'inline-block' });
    }
  }
}

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