<header class="site-header">
  <div class="brand">
    <img src="<%= settings.logo %>" alt="<%= settings.storeName %>" class="brand-logo" onerror="this.style.display='none'">
    <span class="brand-name"><%= settings.storeName %></span>
  </div>

  <nav class="nav-menu">
    <a href="/" class="<%= typeof activePage !== 'undefined' && activePage === 'home' ? 'active' : '' %>">Home</a>
    <a href="/faq" class="<%= typeof activePage !== 'undefined' && activePage === 'faq' ? 'active' : '' %>">FAQ</a>
    <a href="/about-us" class="<%= typeof activePage !== 'undefined' && activePage === 'about' ? 'active' : '' %>">About Us</a>
  </nav>

  <div style="display:flex; align-items:center; gap:10px;">
    <% if (currentUser) { %>
      <a href="/account" class="cart-icon-btn" title="<%= currentUser.name %>" style="background: <%= currentUser.avatar ? 'transparent' : 'linear-gradient(135deg, var(--gold-bright), var(--gold-deep))' %>; overflow:hidden;">
        <% if (currentUser.avatar) { %>
          <img src="<%= currentUser.avatar %>" alt="" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">
        <% } else { %>
          <i class="fa-solid fa-user"></i>
        <% } %>
      </a>
    <% } else { %>
      <a href="/login" class="cart-icon-btn" title="Login">
        <i class="fa-solid fa-user"></i>
      </a>
    <% } %>

    <button type="button" class="cart-icon-btn" id="themeToggleBtn" title="Ganti tema" style="background: var(--bg-surface); color: var(--gold-primary); border: 1px solid var(--border-gold);">
      <i class="fa-solid fa-moon" id="themeIcon"></i>
    </button>
  </div>
</header>

<script>
  (function() {
    const btn = document.getElementById('themeToggleBtn');
    const icon = document.getElementById('themeIcon');
    const html = document.documentElement;

    function syncIcon() {
      const isLight = html.getAttribute('data-theme') === 'light';
      icon.className = isLight ? 'fa-solid fa-sun' : 'fa-solid fa-moon';
    }
    syncIcon();

    btn.addEventListener('click', function() {
      const isLight = html.getAttribute('data-theme') === 'light';
      const next = isLight ? 'dark' : 'light';
      html.setAttribute('data-theme', next);
      localStorage.setItem('buzzmart-theme', next);
      syncIcon();
    });
  })();
</script>
