(function () {
  'use strict';

  var MAIN_H = 52;
  var SUB_H  = 40;

  // ── Global service links ───────────────────────────────────────────────────
  var LINKS = [
    { label: 'FAQ',     href: '/faq.html' },
    { label: 'Privacy', href: '/privacy-policy.html' },
    { label: 'Terms',   href: '/terms.html' },
    { label: 'Contact', href: 'mailto:aibrainbitesweb@gmail.com' },
  ];

  // ── Global sub-bar links (shown on every page) ─────────────────────────────
  var DEFAULT_SUBLINKS = [
    { label: 'Blog',               href: '/blog/' },
    { label: 'Word Search Solver', href: '/word-search-solver/' },
    { label: 'WS Creator',         href: '/word-search-creator/' },
    { label: 'Clicker',            href: '/clicker/' },
    { label: 'Block Blast Solver', href: '/block-blast-solver/' },
    { label: 'Password Generator', href: '/password-generator/' },
  ];

  // ── Per-service extra sub-bar links (prepended to DEFAULT_SUBLINKS) ────────
  // Key: path prefix. Value: array of links to prepend.
  var SUBNAV_EXTRA = {
    '/clicker/': [
      { label: 'Stats', href: '/clicker/stats.html' },
    ],
  };

  // ── CSS ────────────────────────────────────────────────────────────────────
  var FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";

  var CSS = [
    /* ── Main bar ── */
    '#aib-navbar {',
    '  position: fixed; top: 0; left: 0; right: 0;',
    '  z-index: 9999;',
    '  height: ' + MAIN_H + 'px;',
    '  display: flex; align-items: center; justify-content: space-between; gap: 12px;',
    '  padding: 0 20px;',
    '  background: rgba(8,11,18,0.88);',
    '  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);',
    '  border-bottom: 1px solid rgba(255,255,255,0.07);',
    '  box-sizing: border-box;',
    '  font-family: ' + FONT + ';',
    '}',
    '#aib-navbar * { box-sizing: border-box; }',
    '.aib-brand {',
    '  font-size: 0.88rem; font-weight: 700; color: #e2e8f0;',
    '  text-decoration: none; white-space: nowrap;',
    '  letter-spacing: -0.01em; flex-shrink: 0;',
    '}',
    '.aib-brand:hover { color: #fff; }',
    '.aib-links {',
    '  display: flex; align-items: center; gap: 2px;',
    '  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;',
    '}',
    '.aib-links::-webkit-scrollbar { display: none; }',
    '.aib-link {',
    '  font-size: 0.77rem; font-weight: 500; color: #94a3b8;',
    '  text-decoration: none; padding: 5px 11px; border-radius: 8px;',
    '  white-space: nowrap; transition: color 0.15s, background 0.15s;',
    '}',
    '.aib-link:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }',
    '.aib-link--active { color: #60a5fa; background: rgba(59,130,246,0.12); }',
    '.aib-link--active:hover { color: #93c5fd; background: rgba(59,130,246,0.18); }',

    /* ── Sub bar ── */
    '#aib-subnav {',
    '  position: fixed; top: ' + MAIN_H + 'px; left: 0; right: 0;',
    '  z-index: 9998;',
    '  height: ' + SUB_H + 'px;',
    '  display: flex; align-items: center; gap: 2px;',
    '  padding: 0 20px;',
    '  background: rgba(8,11,18,0.96);',
    '  border-bottom: 1px solid rgba(255,255,255,0.05);',
    '  box-sizing: border-box;',
    '  font-family: ' + FONT + ';',
    '  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;',
    '}',
    '#aib-subnav::-webkit-scrollbar { display: none; }',
    '#aib-subnav * { box-sizing: border-box; }',
    '.aib-sublink {',
    '  font-size: 0.72rem; font-weight: 500; color: #64748b;',
    '  text-decoration: none; padding: 4px 10px; border-radius: 6px;',
    '  white-space: nowrap; transition: color 0.15s, background 0.15s;',
    '}',
    '.aib-sublink:hover { color: #e2e8f0; background: rgba(255,255,255,0.05); }',
    '.aib-sublink--active { color: #e2e8f0; }',
    '.aib-sub-sep {',
    '  width: 1px; height: 14px; flex-shrink: 0;',
    '  background: rgba(255,255,255,0.1); margin: 0 6px;',
    '}',
  ].join('\n');

  // ── Helpers ────────────────────────────────────────────────────────────────
  function el(tag, props) {
    var node = document.createElement(tag);
    Object.keys(props || {}).forEach(function (k) {
      if (k === 'cls') { node.className = props[k]; }
      else if (k === 'text') { node.textContent = props[k]; }
      else { node.setAttribute(k, props[k]); }
    });
    return node;
  }

  function makeLinks(container, items, currentPath, baseClass, activeClass) {
    items.forEach(function (item) {
      var a = el('a', { cls: baseClass, href: item.href, text: item.label });
      var isActive = !item.href.startsWith('mailto:') && currentPath === item.href;
      if (isActive) {
        a.classList.add(activeClass);
        a.setAttribute('aria-current', 'page');
      }
      container.appendChild(a);
    });
  }

  function getExtraSublinks(path) {
    var extra = [];
    Object.keys(SUBNAV_EXTRA).forEach(function (prefix) {
      if (path.startsWith(prefix)) { extra = SUBNAV_EXTRA[prefix]; }
    });
    return extra;
  }

  // ── Init ───────────────────────────────────────────────────────────────────
  function init() {
    var styleEl = el('style', { id: 'aib-navbar-styles' });
    styleEl.textContent = CSS;
    document.head.appendChild(styleEl);

    var currentPath = window.location.pathname;
    var totalH = MAIN_H + SUB_H;

    // Main bar
    var nav = el('nav', { id: 'aib-navbar', 'aria-label': 'AI Brain Bites navigation' });
    var brand = el('a', { cls: 'aib-brand', href: 'https://aibrainbites.com/', text: 'AI Brain Bites' });
    var linksDiv = el('div', { cls: 'aib-links' });
    makeLinks(linksDiv, LINKS, currentPath, 'aib-link', 'aib-link--active');
    nav.appendChild(brand);
    nav.appendChild(linksDiv);
    document.body.insertBefore(nav, document.body.firstChild);

    // Sub bar (always visible)
    var sub = el('div', { id: 'aib-subnav' });
    var extra = getExtraSublinks(currentPath);

    // Service-specific links first, then a separator if any, then global links
    if (extra.length) {
      makeLinks(sub, extra, currentPath, 'aib-sublink', 'aib-sublink--active');
      sub.appendChild(el('span', { cls: 'aib-sub-sep' }));
    }
    makeLinks(sub, DEFAULT_SUBLINKS, currentPath, 'aib-sublink', 'aib-sublink--active');

    document.body.insertBefore(sub, nav.nextSibling);

    document.body.classList.add('aib-has-navbar');
    document.body.style.paddingTop = totalH + 'px';
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();