components/footer.js

class SiteFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    
    let currentLang = 'en';
    
    window.addEventListener('langChanged', (e) => {
        currentLang = e.detail;
        this.render();
    });

    if(typeof localStorage !== 'undefined') {
        currentLang = localStorage.getItem('lang') || 'en';
    }

    this.render();
  }

  render() {
    const isArabic = currentLang === 'ar';
    const dir = isArabic ? 'rtl' : 'ltr';
    const copyTxt = isArabic ? 'جميع الحقوق محفوظة 2023' : 'All rights reserved 2023';
    const builtTxt = isArabic ? 'صنع بكل حب' : 'Built with love';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
            display: block;
            background-color: #0f172a;
            color: #94a3b8;
            padding: 4rem 1.5rem;
            text-align: center;
        }
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        .logo-area h3 {
            color: #ffffff;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        .social-icon {
            color: #94a3b8;
            transition: color 0.3s;
        }
        .social-icon:hover {
            color: #3b82f6;
        }
        .links-area h4 {
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .links-area ul {
            list-style: none;
            padding: 0;
        }
        .links-area li {
            margin-bottom: 0.5rem;
        }
        .links-area a {
            color: #94a3b8;
            text-decoration: none;
            transition: color 0.3s;
        }
        .links-area a:hover {
            color: #3b82f6;
        }
        .copyright {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid #1e293b;
            font-size: 0.875rem;
        }
        @media (min-width: 768px) {
            .footer-content {
                grid-template-columns: repeat(3, 1fr);
                text-align: left;
            }
            /* RTL Adjustments */
            [dir="rtl"] .footer-content {
                text-align: right;
            }
            .social-links {
                justify-content: flex-start;
            }
            [dir="rtl"] .social-links {
                justify-content: flex-end;
            }
        }
      </style>
      <div dir="${dir}">
        <div class="footer-content">
            <div class="logo-area">
                <h3>Super Engineer</h3>
                <p>${isArabic ? 'مطور متكامل للحلول البرمجية الحديثة' : 'Full-stack Developer for Modern Solutions'}</p>
                <div class="social-links">
                    <a href="#" class="social-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="#" class="social-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
                    <a href="#" class="social-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
                </div>
            </div>
            <div class="links-area">
                <h4>${isArabic ? 'روابط سريعة' : 'Quick Links'}</h4>
                <ul>
                    <li><a href="#home">${isArabic ? 'الرئيسية' : 'Home'}</a></li>
                    <li><a href="#projects">${isArabic ? 'المشاريع' : 'Projects'}</a></li>
                    <li><a href="#contact">${isArabic ? 'اتصل بي' : 'Contact'}</a></li>
                </ul>
            </div>
            <div class="links-area">
                <h4>${isArabic ? 'المنصات' : 'Platforms'}</h4>
                <ul>
                    <li><a href="#">Mostaql</a></li>
                    <li><a href="#">Khamsat</a></li>
                    <li><a href="#">Upwork</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; ${copyTxt}. ${builtTxt} ❤️</p>
        </div>
      </div>
    `;
  }
}

customElements.define('site-footer', SiteFooter);