components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .footer-link:hover {
          color: #38bdf8;
          transform: translateX(4px);
        }
      </style>
      <footer class="bg-gray-900 border-t border-gray-800">
        <div class="container mx-auto px-4 py-12">
          <div class="grid md:grid-cols-4 gap-12">
            <div>
              <div class="flex items-center gap-2 mb-6">
              <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
                <span class="text-white font-bold text-xs">PD</span>
              </div>
              <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">PHANTOM DIGITAL</span>
</div>
              <p class="text-gray-400 mb-6">
                Crafting digital experiences that captivate and convert.
              </p>
              <div class="flex gap-4">
                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
                  <i data-feather="twitter"></i>
                </a>
                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
                  <i data-feather="linkedin"></i>
                </a>
                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
                  <i data-feather="instagram"></i>
                </a>
                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
                  <i data-feather="github"></i>
                </a>
              </div>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-6">Services</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> Web Development
                </a></li>
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> Mobile Apps
                </a></li>
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> UI/UX Design
                </a></li>
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> Digital Strategy
                </a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-6">Company</h3>
              <ul class="space-y-3">
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> About Us
                </a></li>
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> Careers
                </a></li>
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> Blog
                </a></li>
                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
                  <i data-feather="chevron-right" class="w-4 h-4"></i> Contact
                </a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-6">Contact</h3>
              <ul class="space-y-3">
                <li class="flex items-start gap-3 text-gray-400">
                  <i data-feather="map-pin" class="w-5 h-5 mt-0.5 text-cyan-400"></i>
                  <span>123 Digital Street, Tech City, TC 10101</span>
                </li>
                <li class="flex items-center gap-3 text-gray-400">
                  <i data-feather="mail" class="w-5 h-5 text-cyan-400"></i>
                  <span>hello@phantom-digital.com</span>
                </li>
                <li class="flex items-center gap-3 text-gray-400">
                  <i data-feather="phone" class="w-5 h-5 text-cyan-400"></i>
                  <span>+1 (555) 123-4567</span>
                </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 text-sm mb-4 md:mb-0">
              © ${new Date().getFullYear()} Phantom Digital. All rights reserved.
            </p>
            <div class="flex gap-6">
              <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Privacy Policy</a>
              <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Terms of Service</a>
              <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Cookies</a>
            </div>
          </div>
        </div>
      </footer>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);