components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin-top: auto;
                }
                
                footer {
                    background: #1f2937;
                    color: white;
                    padding: 3rem 0 2rem;
                    margin-top: 4rem;
                }
                
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 1rem;
                }
                
                .footer-content {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 2rem;
                    margin-bottom: 2rem;
                }
                
                .footer-section h3 {
                    color: #f59e0b;
                    font-size: 1.25rem;
                    font-weight: bold;
                    margin-bottom: 1rem;
                }
                
                .footer-section p, .footer-section a {
                    color: #d1d5db;
                    text-decoration: none;
                    line-height: 1.6;
                }
                
                .footer-section a:hover {
                    color: #f59e0b;
                }
                
                .social-links {
                    display: flex;
                    gap: 1rem;
                    margin-top: 1rem;
                }
                
                .social-link {
                    background: #374151;
                    padding: 0.5rem;
                    border-radius: 0.5rem;
                    transition: all 0.3s ease;
                }
                
                .social-link:hover {
                    background: #f59e0b;
                    transform: translateY(-2px);
                }
                
                .footer-bottom {
                    border-top: 1px solid #374151;
                    padding-top: 2rem;
                    text-align: center;
                    color: #9ca3af;
                }
                
                .poop-animation {
                    display: inline-block;
                    animation: bounce 2s infinite;
                }
                
                @keyframes bounce {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-10px); }
                }
                
                @media (max-width: 640px) {
                    .footer-content {
                        grid-template-columns: 1fr;
                        text-align: center;
                    }
                    
                    .social-links {
                        justify-content: center;
                    }
                }
            </style>
            
            <footer>
                <div class="container">
                    <div class="footer-content">
                        <div class="footer-section">
                            <h3>💩 ScatBoi Art Gen</h3>
                            <p>
                                The ultimate AI-powered art generator for creative scatboi artwork.
                                Transform your wildest ideas into visual masterpieces!
                            </p>
                            <div class="social-links">
                                <a href="#" class="social-link">
                                    <i data-feather="twitter"></i>
                                </a>
                                <a href="#" class="social-link">
                                    <i data-feather="instagram"></i>
                                </a>
                                <a href="#" class="social-link">
                                    <i data-feather="github"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div class="footer-section">
                            <h3>Quick Links</h3>
                            <p><a href="/">Home</a></p>
                            <p><a href="#gallery">Gallery</a></p>
                            <p><a href="/about.html">About Us</a></p>
                            <p><a href="/privacy.html">Privacy Policy</a></p>
                        </div>
                        
                        <div class="footer-section">
                            <h3>Fun Facts</h3>
                            <p>🎨 Generated <span id="totalArts">1000+</span> artworks</p>
                            <p>💩 100% unique scatboi content</p>
                            <p>⚡ AI-powered generation</p>
                            <p>🌈 Rainbow poop guaranteed</p>
                        </div>
                    </div>
                    
                    <div class="footer-bottom">
                        <p>
                            &copy; 2024 ScatBoi Art Gen. Made with 
                            <span class="poop-animation">💩</span> 
                            and lots of creativity.
                        </p>
                    </div>
                </div>
            </footer>
        `;
        
        // Animate the total arts counter
        this.animateCounter();
    }
    
    animateCounter() {
        const counter = this.shadowRoot.getElementById('totalArts');
        let current = 0;
        const target = 1337;
        const increment = target / 100;
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            counter.textContent = Math.floor(current) + '+';
        }, 20);
    }
}

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