components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    background: rgba(12, 74, 110, 0.9);
                    color: white;
                    margin-top: auto;
                }
                .footer-link {
                    color: #bae6fd;
                    transition: color 0.3s ease;
                }
                .footer-link:hover {
                    color: #ffffff;
                }
            </style>
            <footer class="mt-16">
                <div class="container mx-auto px-4 py-8">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">