components/footer.js

class FooterFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    @apply bg-gray-900 border-t border-gray-800;
                }
                
                .footer-container {
                    @apply container mx-auto px-4 py-12;
                }
                
                .footer-content {
                    @apply grid md:grid-cols-4 gap-8 mb-8;
                }
                
                .footer-section h3 {
                    @apply text-xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-rose-500 to-yellow-500;
                }
                
                .footer-section ul {
                    @apply space-y-2;
                }
                
                .footer-section a {
                    @apply text-gray-400 hover:text-white transition-colors;
                }
                
                .footer-bottom {
                    @apply pt-8 border-t border-gray-800 text-center text-gray-400;
                }
                
                .social-links {
                    @apply flex space-x-4 justify-center;
                }
                
                .social-link {
                    @apply w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-rose-600 transition-colors;
                }
                
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                .footer-animate {
                    animation: fadeInUp 0.8s ease-out;
                }
            </style>
            
            <footer class="footer-animate">
                <div class="footer-container">
                    <div class="footer-content">
                        <div class="footer-section">
                            <h3>О проекте</h3>
                            <p class="text-gray-400">
                                Полное руководство по настройке анонимности и приватности в Windows 11 для защиты ваших данных.
                            </p>
                        </div>
                        <div class="footer-section">
                            <h3>Быстрые ссылки</h3>
                            <ul>
                                <li><a href="#privacy" class="block">Настройки приватности</a></li>
                                <li><a href="#network" class="block">Сетевая безопасность</a></li>
                                <li><a href="#browser" class="block">Анонимный браузинг</a></li>
                                <li><a href="#tools" class="block">Рекомендуемые инструменты</a></li>
                            </ul>
</div>
                        <div class="footer-section">
                            <h3>Дополнительно</h3>
                            <ul>
                                <li><a href="/faq" class="block">FAQ</a></li>
                                <li><a href="/tutorials" class="block">Видеоуроки</a></li>
                                <li><a href="/checklist" class="block">Чек-лист</a></li>
                                <li><a href="/support" class="block">Поддержка</a></li>
                            </ul>
                        </div>
<div class="footer-section">
                            <h3>Контакты</h3>
                            <p class="text-gray-400 mb-4">
                                Присоединяйтесь к сообществу анонимных пользователей
                            </p>
                            <div class="social-links">
                                <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="social-link">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                                    </svg>
                                </a>
                                <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="social-link">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                                    </svg>
                                </a>
                                <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                                        <rect x="2" y="9" width="4" height="12"></rect>
                                        <circle cx="4" cy="4" r="2"></circle>
                                    </svg>
                                </a>
                            </div>
</div>
                    </div>
                    
                    <div class="footer-bottom">
                        <p>&copy; 2024 Windows Anon Guide. Все права защищены.</p>
                        <p class="mt-2 text-sm">Используйте информацию ответственно и в рамках закона.</p>
                    </div>
                </div>
            </footer>
        `;
    }
}

customElements.define('footer-footer', FooterFooter);