components/header.js

class SiteHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    
    // Initial State
    let currentLang = 'en';
    let currentTheme = 'light';

    // Listen for global state changes
    window.addEventListener('langChanged', (e) => {
        currentLang = e.detail;
        this.render();
    });

    window.addEventListener('themeChanged', (e) => {
        currentTheme = e.detail;
        this.render();
    });

    // Load initial state from localStorage if possible (fallback)
    if(typeof localStorage !== 'undefined') {
        currentLang = localStorage.getItem('lang') || 'en';
        currentTheme = localStorage.getItem('theme') || 'light';
    }

    this.render();
  }

  render() {
    const isArabic = this.getAttribute('lang') === 'ar' || currentLang === 'ar';
    const isDark = currentTheme === 'dark';
    
    // Text Content
    const homeTxt = isArabic ? 'الرئيسية' : 'Home';
    const servicesTxt = isArabic ? 'خدماتي' : 'Services';
    const portfolioTxt = isArabic ? 'أعمالي' : 'Portfolio';
    const reviewsTxt = isArabic ? 'تقييماتي' : 'Reviews';
    const contactTxt = isArabic ? 'تواصل معي' : 'Contact';

    // Theme Icon
    const themeIcon = isDark ? 'sun' : 'moon';
    
    // Lang Text
    const langTxt = isArabic ? 'English' : 'العربية';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
            display: block;
            position: sticky;
            top: 0;
            z-index: 50;
            background-color: ${isDark ? '#1e293b' : '#ffffff'};
            border-bottom: 1px solid ${isDark ? '#334155' : '#e2e8f0'};
            transition: all 0.3s ease;
        }
        nav {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-weight: 900;
            font-size: 1.5rem;
            color: #2563eb; /* Primary 600 */
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        .nav-links {
            display: none;
        }
        .nav-links a {
            margin: 0 1rem;
            text-decoration: none;
            color: ${isDark ? '#f1f5f9' : '#334155'};
            font-weight: 500;
            transition: color 0.2s;
        }
        .nav-links a:hover {
            color: #2563eb;
        }
        .controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .btn-icon {
            background: none;
            border: 1px solid ${isDark ? '#475569' : '#e2e8f0'};
            border-radius: 0.5rem;
            padding: 0.5rem;
            cursor: pointer;
            color: ${isDark ? '#f1f5f9' : '#334155'};
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-icon:hover {
            background-color: ${isDark ? '#334155' : '#f1f5f9'};
            border-color: #2563eb;
        }
        .lang-btn {
            font-size: 0.875rem;
            font-weight: 600;
            padding: 0.5rem 0.75rem;
        }

        @media (min-width: 768px) {
            .nav-links {
                display: flex;
            }
        }
      </style>
      <nav>
        <a href="#" class="logo">
            <span style="font-size: 1.8rem; margin-right: 0.5rem; margin-left: 0.5rem;">🚀</span>
            <span>SuperEng</span>
        </a>
        <div class="nav-links">
            <a href="#home">${homeTxt}</a>
            <a href="#projects">${portfolioTxt}</a>
            <a href="#contact">${contactTxt}</a>
        </div>
        <div class="controls">
            <button class="btn-icon" id="lang-toggle" aria-label="Toggle Language">
                ${langTxt}
            </button>
            <button class="btn-icon" id="theme-toggle" aria-label="Toggle Theme">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    ${this.getIconSvg(themeIcon)}
                </svg>
            </button>
        </div>
      </nav>
    `;

    // Add Event Listeners
    this.shadowRoot.getElementById('lang-toggle').addEventListener('click', () => {
        window.toggleLanguage();
    });
    
    this.shadowRoot.getElementById('theme-toggle').addEventListener('click', () => {
        window.toggleTheme();
    });
  }

  getIconSvg(name) {
      const icons = {
          sun: '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>',
          moon: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'
      };
      return icons[name] || '';
  }
}

customElements.define('site-header', SiteHeader);