components/footer.js

class CooperativeFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
                    color: #cbd5e1;
                }
                
                .footer-container {
                    max-width: 1280px;
                    margin: 0 auto;
                    padding: 3rem 1.5rem;
                }
                
                .footer-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 2rem;
                    margin-bottom: 3rem;
                }
                
                .footer-logo {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1rem;
                }
                
                .footer-logo-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 40px;
                    height: 40px;
                    background: linear-gradient(135deg, #3B82F6, #10B981);
                    border-radius: 10px;
                    margin-right: 0.75rem;
                    color: white;
                }
                
                .footer-logo-text {
                    font-size: 1.25rem;
                    font-weight: bold;
                    color: white;
                }
                
                .footer-tagline {
                    font-size: 0.875rem;
                    line-height: 1.5;
                    color: #94a3b8;
                }
                
                .footer-section-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    color: white;
                    margin-bottom: 1rem;
                }
                
                .footer-links {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                }
                
                .footer-links a {
                    color: #cbd5e1;
                    text-decoration: none;
                    font-size: 0.875rem;
                    transition: color 0.2s;
                    display: flex;
                    align-items: center;
                }
                
                .footer-links a:hover {
                    color: #60a5fa;
                }
                
                .footer-links a i {
                    margin-right: 0.5rem;
                    width: 1rem;
                    height: 1rem;
                }
                
                .footer-social {
                    display: flex;
                    gap: 1rem;
                    margin-top: 1rem;
                }
                
                .footer-social a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 36px;
                    height: 36px;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 50%;
                    color: #cbd5e1;
                    text-decoration: none;
                    transition: all 0.2s;
                }
                
                .footer-social a:hover {
                    background: #3B82F6;
                    color: white;
                    transform: translateY(-2px);
                }
                
                .footer-bottom {
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                    padding-top: 2rem;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    align-items: center;
                    text-align: center;
                }
                
                .footer-copyright {
                    font-size: 0.875rem;
                    color: #94a3b8;
                }
                
                .footer-legal {
                    display: flex;
                    gap: 1.5rem;
                    font-size: 0.875rem;
                }
                
                .footer-legal a {
                    color: #cbd5e1;
                    text-decoration: none;
                    transition: color 0.2s;
                }
                
                .footer-legal a:hover {
                    color: #60a5fa;
                }
                
                @media (min-width: 640px) {
                    .footer-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                    
                    .footer-bottom {
                        flex-direction: row;
                        justify-content: space-between;
                        text-align: left;
                    }
                }
                
                @media (min-width: 768px) {
                    .footer-grid {
                        grid-template-columns: repeat(4, 1fr);
                    }
                }
            </style>
            
            <div class="footer-container">
                <div class="footer-grid">
                    <!-- Logo and Description -->
                    <div>
                        <div class="footer-logo">
                            <div class="footer-logo-icon">
                                <i data-feather="star"></i>
                            </div>
                            <div class="footer-logo-text">Cooperative Constellation</div>
                        </div>
                        <p class="footer-tagline">
                            A global network of social and educational purpose cooperatives collaborating for positive change through shared resources and collective impact.
                        </p>
                        <div class="footer-social">
                            <a href="https://twitter.com" aria-label="Twitter">
                                <i data-feather="twitter"></i>
                            </a>
                            <a href="https://linkedin.com" aria-label="LinkedIn">
                                <i data-feather="linkedin"></i>
                            </a>
                            <a href="https://facebook.com" aria-label="Facebook">
                                <i data-feather="facebook"></i>
                            </a>
                            <a href="https://instagram.com" aria-label="Instagram">
                                <i data-feather="instagram"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- Quick Links -->
                    <div>
                        <h3 class="footer-section-title">Quick Links</h3>
                        <div class="footer-links">
                            <a href="/">
                                <i data-feather="home"></i>
                                Home
                            </a>
                            <a href="cooperatives.html">
                                <i data-feather="users"></i>
                                Cooperatives
                            </a>
                            <a href="network.html">
                                <i data-feather="globe"></i>
                                Network Map
                            </a>
                            <a href="resources.html">
                                <i data-feather="book"></i>
                                Resources
                            </a>
                            <a href="events.html">
                                <i data-feather="calendar"></i>
                                Events
                            </a>
                        </div>
                    </div>
                    
                    <!-- About -->
                    <div>
                        <h3 class="footer-section-title">About Us</h3>
                        <div class="footer-links">
                            <a href="about.html">
                                <i data-feather="info"></i>
                                Our Mission
                            </a>
                            <a href="team.html">
                                <i data-feather="user-check"></i>
                                Our Team
                            </a>
                            <a href="impact.html">
                                <i data-feather="trending-up"></i>
                                Impact Report
                            </a>
                            <a href="partners.html">
                                <i data-feather="handshake"></i>
                                Partners
                            </a>
                            <a href="contact.html">
                                <i data-feather="mail"></i>
                                Contact Us
                            </a>
                        </div>
                    </div>
                    
                    <!-- Join Network -->
                    <div>
                        <h3 class="footer-section-title">Join Our Network</h3>
                        <div class="footer-links">
                            <a href="join.html">
                                <i data-feather="plus-circle"></i>
                                Start a Cooperative
                            </a>
                            <a href="membership.html">
                                <i data-feather="user-plus"></i>
                                Individual Membership
                            </a>
                            <a href="volunteer.html">
                                <i data-feather="heart"></i>
                                Volunteer Opportunities
                            </a>
                            <a href="donate.html">
                                <i data-feather="dollar-sign"></i>
                                Support Our Work
                            </a>
                            <a href="newsletter.html">
                                <i data-feather="bell"></i>
                                Newsletter Signup
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="footer-bottom">
                    <div class="footer-copyright">
                        &copy; ${new Date().getFullYear()} Cooperative Constellation Network. All rights reserved.
                    </div>
                    <div class="footer-legal">
                        <a href="privacy.html">Privacy Policy</a>
                        <a href="terms.html">Terms of Service</a>
                        <a href="cookies.html">Cookie Policy</a>
                        <a href="accessibility.html">Accessibility</a>
                    </div>
                </div>
            </div>
        `;
        
        // Initialize feather icons after rendering
        setTimeout(() => {
            if (window.feather) {
                window.feather.replace({ class: 'footer-icons' });
            }
        }, 100);
    }
}

customElements.define('cooperative-footer', CooperativeFooter);