class FooterComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background-color: #1f2937;
        }
        .footer-link {
          color: #d1d5db;
          transition: color 0.2s;
        }
        .footer-link:hover {
          color: white;
        }
        .social-icon {
          background-color: #374151;
          transition: background-color 0.2s;
        }
        .social-icon:hover {
          background-color: #4b5563;
        }
      </style>
      <footer class="text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
            <!-- Column 1 -->
            <div>
              <h3 class="text-lg font-bold mb-6">Domeinnaam</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Domeinnaam registreren</a></li>
                <li><a href="#" class="footer-link">Nieuwe domeinnamen</a></li>
                <li><a href="#" class="footer-link">E-mail</a></li>
                <li><a href="#" class="footer-link">Prijzen domeinnamen</a></li>
              </ul>
            </div>
            
            <!-- Column 2 -->
            <div>
              <h3 class="text-lg font-bold mb-6">E-mail en Office</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Microsoft 365</a></li>
                <li><a href="#" class="footer-link">E-mail Hosting</a></li>
              </ul>
              
              <h3 class="text-lg font-bold mt-8 mb-6">Website</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Website maken</a></li>
                <li><a href="#" class="footer-link">Webshop maken</a></li>
                <li><a href="#" class="footer-link">Website laten maken</a></li>
              </ul>
            </div>
            
            <!-- Column 3 -->
            <div>
              <h3 class="text-lg font-bold mb-6">WordPress</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">WordPress-website maken</a></li>
                <li><a href="#" class="footer-link">Hosting voor WordPress</a></li>
                <li><a href="#" class="footer-link">WP.one</a></li>
              </ul>
              
              <h3 class="text-lg font-bold mt-8 mb-6">Hosting</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Webhosting</a></li>
                <li><a href="#" class="footer-link">Managed Hosting</a></li>
              </ul>
            </div>
            
            <!-- Column 4 -->
            <div>
              <h3 class="text-lg font-bold mb-6">VPS</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">VPS Hosting</a></li>
                <li><a href="#" class="footer-link">SSL-certificaten</a></li>
                <li><a href="#" class="footer-link">Managed VPS</a></li>
              </ul>
              
              <h3 class="text-lg font-bold mt-8 mb-6">Over Hostnet</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Over Hostnet</a></li>
                <li><a href="#" class="footer-link">Nieuws</a></li>
                <li><a href="#" class="footer-link">Academy</a></li>
              </ul>
            </div>
            
            <!-- Column 5 -->
            <div>
              <h3 class="text-lg font-bold mb-6">Inloggen</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Mijn Hostnet</a></li>
                <li><a href="#" class="footer-link">Webmail</a></li>
                <li><a href="#" class="footer-link">Microsoft Office 365</a></li>
              </ul>
              
              <h3 class="text-lg font-bold mt-8 mb-6">Hulp nodig?</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link">Helpdesk</a></li>
                <li><a href="#" class="footer-link">Stuur een e-mail</a></li>
                <li><a href="#" class="footer-link">Storingen en onderhoud</a></li>
              </ul>
            </div>
          </div>
          
          <div class="border-t border-gray-700 mt-12 pt-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
              <div class="mb-6 md:mb-0">
                <div class="flex space-x-4">
                  <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
                    <i data-feather="facebook" class="w-5 h-5"></i>
                  </a>
                  <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
                    <i data-feather="youtube" class="w-5 h-5"></i>
                  </a>
                  <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
                    <i data-feather="linkedin" class="w-5 h-5"></i>
                  </a>
                  <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
                    <i data-feather="instagram" class="w-5 h-5"></i>
                  </a>
                </div>
              </div>
              <div class="text-gray-400 text-sm">
                <p>Alle prijzen zijn exclusief 21% btw, tenzij anders vermeld.</p>
                <div class="flex space-x-4 mt-4">
                  <div class="bg-gray-200 border-2 border-dashed rounded w-12 h-6"></div>
                  <div class="bg-gray-200 border-2 border-dashed rounded w-12 h-6"></div>
                  <div class="bg-gray-200 border-2 border-dashed rounded w-12 h-6"></div>
                </div>
              </div>
            </div>
            
            <div class="flex flex-wrap justify-center gap-6 mt-8 text-gray-400 text-sm">
              <a href="#" class="hover:text-white">Algemene voorwaarden</a>
              <a href="#" class="hover:text-white">Privacy en cookies</a>
              <a href="#" class="hover:text-white">Sitemap</a>
              <a href="#" class="hover:text-white">Herroepingsrecht</a>
              <a href="#" class="hover:text-white">Copyright</a>
              <a href="#" class="hover:text-white">Legal</a>
              <a href="#" class="hover:text-white">Toegankelijkheidsverklaring</a>
            </div>
          </div>
        </div>
      </footer>
    `;
    
    feather.replace();
  }
}

customElements.define('footer-component', FooterComponent);