<header class="container-fluid bg-white border-bottom py-3">
  <div class="row align-items-center">
    <!-- Logo centered -->
    <div class="col text-center">
      <img src="images/logo.png" alt="Logo" style="height: 400px; border: none; outline: none; box-shadow: none;">
    </div>

    <!-- Alias & QR code -->
    <div class="col-auto text-center">
      <div id="displayName" style="font-weight: bold; font-size: 1.25rem; color: var(--muted);"></div>
      <div id="userQR" class="qr-container"></div>
    </div>

    <!-- Logout button right aligned -->
    <div class="col-auto text-end">
      <button id="logoutBtn" 
              class="btn btn-outline-danger btn-lg btn-danger" 
              style="font-size: 1.25rem; padding: 0.75rem 1.5rem;">
        Log Out
      </button>
    </div>
  </div>
</header>

<!-- QR Code Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script type="module">
  import { auth, db, signOut } from './firebase-config.js';
  import { onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/11.0.1/firebase-auth.js';
  import { doc, getDoc } from 'https://www.gstatic.com/firebasejs/11.0.1/firebase-firestore.js';

  document.getElementById('logoutBtn').addEventListener('click', async () => {
    await signOut(auth);
    location.href = 'index.html';
  });

  onAuthStateChanged(auth, async (user) => {
    if (user) {
      console.log("User logged in:", user.uid);
      try {
        const userRef = doc(db, "users", user.uid);
        const userSnap = await getDoc(userRef);

        let displayName = "Member";
        if (userSnap.exists()) {
          const data = userSnap.data();
          if (data.personalData?.alias) {
            displayName = data.personalData.alias;
          } else if (data.personalData?.firstName) {
            displayName = data.personalData.firstName;
          } else if (data.personalData?.fullName) {
            displayName = data.personalData.fullName.split(" ")[0];
          }
        }

        document.getElementById("displayName").textContent = displayName;
        document.getElementById("userQR").innerHTML = "";

        const rateUrl = `https://yourwebsite.com/rate.html?uid=${user.uid}`;
        console.log("Generating QR for URL:", rateUrl);

        new QRCode(document.getElementById("userQR"), {
          text: rateUrl,
          width: 100,
          height: 100
        });

      } catch (err) {
        console.error("Error loading user data:", err);
      }
    } else {
      console.log("No user logged in.");
      document.getElementById("displayName").textContent = "";
      document.getElementById("userQR").innerHTML = "";
    }
  });
</script>

<style>
  /* Your existing styles.css merged here */
  :root {
    --bg: #ffffff;
    --panel: #ffffff;
    --muted: #001f3f;
    --accent: #228B22;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: #001f3f;
    padding: 20px;
  }

  .container {
    max-width: 820px;
    margin: 20px auto;
    background: var(--panel);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.04);
  }

  h1, h2 { 
    margin: 8px 0 16px; 
    color: #001f3f;
  }

  label { 
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
  }

  input, select, textarea {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 12px;
    background: #fff;
    color: #001f3f;
  }

  .button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .btn {
    padding: 10px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
  }

  .btn:hover {
    background: #2e8b57;
  }

  .btn-danger {
    background: #a00 !important;
  }

  .logout { float: right; }

  .section {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ccc;
  }

  .small { 
    font-size: 0.9rem; 
    color: #001f3f;
  }

  .note { color: #f88; }

  footer {
    margin-top: 18px;
    color: #001f3f;
    font-size: 0.9rem;
  }

  /* QR specific */
  .qr-container {
    width: 100px;
    height: 100px;
    margin-top: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    display: inline-block;
    background: white;
  }

  img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
</style>
