document.currentScript.insertAdjacentHTML('beforebegin', `
<nav id="mainNavbar" class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="assets/images/logo-bg-removed2.png" alt="GP Crackers" class="nav-logo">
    </a>

    <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu"
      aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="toggler-icon"></span>
      <span class="toggler-icon"></span>
      <span class="toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav mx-auto align-items-center">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="products.html">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>

    <div class="navbar-actions d-flex align-items-center gap-2 ms-auto">
      <a class="nav-link position-relative px-2" href="cart.html" id="cart-nav-link">
        <i class="bi bi-cart3 fs-4"></i>
        <span class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger" id="cart-item-count" style="display: none; font-size: 0.65rem;">
          0
        </span>
      </a>

      <div class="nav-item dropdown" id="nav-user-item">
        <a class="nav-link nav-profile-link px-2" href="login.html" title="Account" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-person-circle fs-4"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end shadow border-0" aria-labelledby="userDropdown" id="user-dropdown-menu">
           <!-- Dynamically filled -->
           <li><a class="dropdown-item py-2" href="login.html"><i class="bi bi-box-arrow-in-right me-2"></i> Login / Register</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
`);

// Logic to check session and update navbar
(function() {
    const userDropdown = document.getElementById('userDropdown');
    const dropdownMenu = document.getElementById('user-dropdown-menu');

    if (!userDropdown || !dropdownMenu) return;

    fetch('api/check_session.php')
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success' && data.logged_in) {
                // User is logged in
                const userName = data.user.full_name.split(' ')[0]; // Use first name
                userDropdown.innerHTML = `<i class="bi bi-person-circle fs-4 me-1"></i><span class="d-none d-lg-inline fw-semibold" style="font-size: 0.9rem;">${userName}</span>`;
                
                dropdownMenu.innerHTML = `
                    <li><a class="dropdown-item py-2 text-danger fw-bold" href="api/logout.php"><i class="bi bi-box-arrow-right me-2"></i> Logout</a></li>
                `;
            }
        })
        .catch(err => console.error('Error checking session:', err));
})();