components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer-links a {
                    transition: color 0.2s ease;
                }
                .footer-links a:hover {
                    color: #00A0B0;
                }
                .certification-logo {
                    filter: grayscale(100%) brightness(200%);
                    transition: filter 0.3s ease;
                }
                .certification-logo:hover {
                    filter: grayscale(0%) brightness(100%);
                }
            </style>
            <footer class="bg-primary text-white pt-16 pb-8">
                <div class="container mx-auto px-6">
                    <div class="flex justify-center mb-12">
                        <img src="https://www.api.org/~/media/api/images/logo/api-logo-white.png" alt="API Certified" class="certification-logo h-16 opacity-90">
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                        <div>
                            <h3 class="text-xl font-bold mb-4">BLU2</h3>
                            <p class="mb-4">Performance & Purity in Diesel Exhaust Fluid for the Canadian market.</p>
                            <div class="flex space-x-4">
                                <a href="#"><i data-feather="facebook"></i></a>
                                <a href="#"><i data-feather="linkedin"></i></a>
                                <a href="#"><i data-feather="twitter"></i></a>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-bold mb-4">Company</h4>
                            <div class="footer-links space-y-2">
                                <a href="#" class="block">About Us</a>
                                <a href="#" class="block">Our Team</a>
                                <a href="#" class="block">Careers</a>
                                <a href="#" class="block">News</a>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-bold mb-4">Support</h4>
                            <div class="footer-links space-y-2">
                                <a href="#" class="block">FAQs</a>
                                <a href="#" class="block">Technical Support</a>
                                <a href="#" class="block">Safety Data Sheets</a>
                                <a href="#" class="block">Contact Us</a>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-bold mb-4">Contact</h4>
                            <div class="space-y-2">
                                <div class="flex items-start gap-2">
                                    <i data-feather="map-pin"></i>
                                    <p>123 Industrial Blvd, Montreal, QC</p>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i data-feather="phone"></i>
                                    <a href="tel:+1855680BLU2">1-855-680-BLU2</a>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i data-feather="mail"></i>
                                    <a href="mailto:[email protected]">[email protected]</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border-t border-white border-opacity-20 pt-8 text-center text-sm text-white text-opacity-70">
                        <p>© ${new Date().getFullYear()} BLU2. All rights reserved. Powered by SMTWEB et Marketing</p>
                    </div>
                </div>
            </footer>
        `;

        // Initialize feather icons
        feather.replace();
    }
}

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