function getHeaderMarkup() {
  return `
<div class="hc-root z-[9999] bg-white shadow-sm">

  <!-- TOP BAR -->
  <div class="bg-[var(--primary-color)] text-white">
    <div class="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-2 text-xs sm:text-sm md:flex-row md:items-center md:justify-between">
      <p>Phone: 044-123345534, 044-7865766233</p>
      <p>Email: knbf@gmail.com</p>
    </div>
  </div>

  <!-- HEADER -->
  <header class="border-b border-black/5 bg-white">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-2">
     <!-- LOGO + TITLE (bigger logo, no circle/border) -->
<a href="index.html#home" class="flex items-center gap-3 min-w-0">
  <img
    src="logo.png"
    alt="Logo"
    class="block h-12 w-12 sm:h-14 sm:w-14 object-contain flex-shrink-0"
  />

  <span class="leading-tight min-w-0">
    <span class="block text-sm sm:text-base md:text-lg font-black text-[var(--primary-color)]">
      Kannadasan Nagar Benefit Fund Limited
    </span>
    <span class="block text-[9px] sm:text-[10px] text-gray-600">
      Save for Safety
    </span>
  </span>
</a>

      <!-- MENU BUTTON (MOBILE) -->
      <button id="menuBtn" class="menu-btn md:hidden" aria-label="Toggle navigation" aria-expanded="false">
        <span class="menu-line"></span>
        <span class="menu-line"></span>
        <span class="menu-line"></span>
      </button>

      <!-- DESKTOP NAV -->
      <nav id="desktopNav" class="desktop-nav gap-8 text-sm font-semibold text-gray-700">
        <a href="index.html#home" class="nav-link" data-nav="home">Home</a>
        <a href="about.html" class="nav-link" data-nav="about">About Us</a>
        <a href="index.html#services" class="nav-link" data-nav="services">Services</a>
        <a href="index.html#financials" class="nav-link" data-nav="financials">Financials</a>
        <a href="index.html#contact" class="nav-link" data-nav="contact">Contact</a>
      </nav>
    </div>

    <!-- MOBILE NAV -->
    <nav id="mobileNav" class="mobile-nav border-t border-black/5 bg-white px-4 py-3">
      <div class="flex flex-col gap-3 text-sm font-semibold text-gray-700">
        <a href="index.html#home" class="nav-link" data-nav="home">Home</a>
        <a href="about.html" class="nav-link" data-nav="about">About Us</a>
        <a href="index.html#services" class="nav-link" data-nav="services">Services</a>
        <a href="index.html#financials" class="nav-link" data-nav="financials">Financials</a>
        <a href="index.html#contact" class="nav-link" data-nav="contact">Contact</a>
      </div>
    </nav>

  </header>
</div>
`;
}

function ensureHeaderStyles() {
  if (document.getElementById("headerComponentStyles")) return;

  var style = document.createElement("style");
  style.id = "headerComponentStyles";
  style.textContent = `
    .hc-root .desktop-nav { display: none; }
    .hc-root .mobile-nav { display: none; }
    .hc-root .mobile-nav.is-open { display: block; }

    @media (min-width: 768px) {
      .hc-root #menuBtn { display: none !important; }
      .hc-root .desktop-nav { display: flex !important; }
      .hc-root .mobile-nav { display: none !important; }
    }

    .menu-btn {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      border: none;
      background: transparent;
    }

    .menu-btn:hover .menu-line {
      background: var(--primary-color);
    }

    .menu-line {
      width: 24px;
      height: 2.5px;
      background: #333;
      display: block;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }

    .nav-link:hover {
      color: var(--primary-color);
    }

    .nav-link.active {
      color: var(--primary-color);
      font-weight: bold;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--secondary-color);
      border-radius: 2px;
    }

    .mobile-nav .nav-link {
      display: block;
      padding: 8px 0;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .mobile-nav .nav-link:last-child {
      border-bottom: none;
    }

    .mobile-nav .nav-link.active::after {
      display: none;
    }

    .mobile-nav .nav-link.active {
      color: var(--primary-color);
      padding-left: 12px;
      border-left: 3px solid var(--secondary-color);
    }

    /* Sticky only on desktop */
.hc-root { position: static; }

@media (min-width: 768px) {
  .hc-root {
    position: sticky;
    top: 0;
    z-index: 9999;
  }
}
  `;

  document.head.appendChild(style);
}

function mountHeader(options) {
  if (!options) options = {};
  
  ensureHeaderStyles();

  var target = document.getElementById(options.targetId || "siteHeader");
  if (!target) return;

  target.innerHTML = getHeaderMarkup();

  var page = options.page || "home";
  var sections = options.trackSections || [];

  function setActiveNav(name) {
    document.querySelectorAll(".nav-link").forEach(function (link) {
      link.classList.toggle("active", link.dataset.nav === name);
    });
  }

  var menuBtn = document.getElementById("menuBtn");
  var mobileNav = document.getElementById("mobileNav");

  if (menuBtn && mobileNav) {
    menuBtn.addEventListener("click", function () {
      mobileNav.classList.toggle("is-open");
      menuBtn.setAttribute("aria-expanded", mobileNav.classList.contains("is-open"));
    });

    mobileNav.querySelectorAll("a").forEach(function (link) {
      link.addEventListener("click", function () {
        mobileNav.classList.remove("is-open");
        menuBtn.setAttribute("aria-expanded", "false");
      });
    });
  }

  document.addEventListener("click", function(e) {
    if (mobileNav && mobileNav.classList.contains("is-open")) {
      if (!mobileNav.contains(e.target) && !menuBtn.contains(e.target)) {
        mobileNav.classList.remove("is-open");
        menuBtn.setAttribute("aria-expanded", "false");
      }
    }
  });

  setActiveNav(page);

  if (sections.length > 0) {
    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            setActiveNav(entry.target.id);
          }
        });
      },
      { threshold: 0.6 }
    );

    sections.forEach(function (id) {
      var el = document.getElementById(id);
      if (el) observer.observe(el);
    });
  }

  var hash = window.location.hash.replace("#", "");
  if (hash) setActiveNav(hash);
}