components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer-link:hover {
                    color: #3b82f6;
                    transition: color 0.3s ease;
                }
            </style>
            <footer class="bg-gray-900 text-white py-12">
                <div class="container mx-auto px-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        <div>
                            <h3 class="text-xl font-bold mb-4">
                                <span class="text-blue-400">SKY</span>HIGH
                            </h3>
                            <p class="text-gray-400 mb-4">
                                Redefining private aviation with unparalleled service and safety standards.
                            </p>
                            <div class="flex space-x-4">
                                <a href="#" class="text-gray-400 hover:text-blue-400">
                                    <i data-feather="twitter"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-blue-400">
                                    <i data-feather="instagram"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-blue-400">
                                    <i data-feather="linkedin"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-blue-400">
                                    <i data-feather="facebook"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Services</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-gray-400">Private Charter</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Jet Cards</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Aircraft Management</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Corporate Solutions</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Medical Flights</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Company</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-gray-400">About Us</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Our Fleet</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Safety</a></li>
                                <li><a href="#" class="footer-link text-gray-400">Careers</a></li>
                                <li><a href="#" class="footer-link text-gray-400">News</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Contact</h4>
                            <ul class="space-y-2 text-gray-400">
                                <li class="flex items-start">
                                    <i data-feather="map-pin" class="mr-2 mt-1"></i>
                                    <span>123 Aviation Way, Suite 100<br>New York, NY 10001</span>
                                </li>
                                <li class="flex items-center">
                                    <i data-feather="phone" class="mr-2"></i>
                                    <span>+1 (555) 123-4567</span>
                                </li>
                                <li class="flex items-center">
                                    <i data-feather="mail" class="mr-2"></i>
                                    <span>info@skyhigh.aero</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-400 mb-4 md:mb-0">
                            © 2023 SkyHigh Aero. All rights reserved.
                        </p>
                        <div class="flex space-x-6">
                            <a href="#" class="footer-link text-gray-400">Privacy Policy</a>
                            <a href="#" class="footer-link text-gray-400">Terms of Service</a>
                            <a href="#" class="footer-link text-gray-400">Sitemap</a>
                        </div>
                    </div>
                </div>
            </footer>
        `;
    }
}

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