src/ApplicationBundle/Resources/views/inc/central_header.html.twig line 1

Open in your IDE?
  1. {# ═══════════════════════════════════════════════════════════════════════════
  2.    Central Header — HoneyBee Ecosystem
  3.    Scandinavian SaaS design · single source of truth for all public pages
  4.    ═══════════════════════════════════════════════════════════════════════════ #}
  5. {% if not include_html is defined %}
  6.     {% set include_html = 1 %}
  7.     {% if app.request.request.get('skipHTML') != '' %}{% set include_html = 0 %}{% endif %}
  8.     {% if app.request.query.get('skipHTML')   != '' %}{% set include_html = 0 %}{% endif %}
  9. {% endif %}
  10. {% if include_html == 1 %}
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  17.     <meta name="description"
  18.           content="{{ og_description is defined ? og_description : 'HoneyBee connects business operations, AI automation, industrial energy control, and solar engineering in one affordable ecosystem — Business Suite, HiveMind & Agents, HoneyCore 4.0, HoneyWatt.' }}">
  19.     <meta name="keywords"
  20.           content="HoneyBee, project ERP Germany, EPC ERP, ERP for engineering companies, business ERP for SMEs, ERP Singapore, HoneyCore EMS, HoneyCore 4.0 project quotation software, energy infrastructure intelligence, EMS, SCADA business integration, O&amp;M billing software, DATEV-ready ERP, NIS2-aware software governance">
  21.     <meta name="author" content="HoneyBee Ecosystem">
  22.     {% set page_title = page_title|default('HoneyBee Ecosystem') %}
  23.     <title id="pageTitle">{{ page_title }}</title>
  25.     <meta property="og:title" content="{{ og_title       is defined ? og_title       : page_title }}"/>
  26.     <meta property="og:description"
  27.           content="{{ og_description is defined ? og_description : 'HoneyBee — Operating system for EPC companies, system integrators, energy asset owners, and multi-site industrial businesses.' }}"/>
  28.     <meta property="og:image"
  29.           content="{{ og_image       is defined ? (absolute_url(path('dashboard'))~og_image) : (absolute_url(path('dashboard'))~'honeybee_web_assets/icons/honeybeeicon.svg') }}"/>
  30.     {% set _noindex_routes = ['user_login','sign_up','reset_password','verify_email','verify_otp','reset_new_password','honeybee_otp_verification','hb360_my_estimate','hb360_shared_estimate'] %}
  31.     {% if app.request.get('_route') in _noindex_routes %}
  32.         <meta name="robots" content="noindex, nofollow">
  33.     {% else %}
  34.         <meta name="robots" content="index, follow">
  35.         {# WEB-2.1 (audit: .com/.online/www duplicates split the index) — every indexable
  36.            page names its ONE canonical home on the .eu domain, so search consolidates the
  37.            duplicates even before the server-side 301s land (those remain the owner's DNS/
  38.            server task and still matter). #}
  39.         <link rel="canonical" href="https://ourhoneybee.eu{{ app.request.pathInfo }}">
  40.     {% endif %}
  42.     {# ── Favicons ──────────────────────────────────────────────────────────── #}
  43.     <link rel="shortcut icon" type="image/x-icon"
  44.           href="{{ asset('favicon.ico') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  45.     <link rel="apple-touch-icon" sizes="180x180"
  46.           href="{{ asset('apple-icon.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  47.     <link rel="icon" type="image/png" sizes="32x32"
  48.           href="{{ asset('favicon-32x32.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  49.     <link rel="icon" type="image/png" sizes="16x16"
  50.           href="{{ asset('favicon-16x16.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  51.     <link rel="manifest" href="{{ asset('site.webmanifest') }}">
  52.     <link rel="mask-icon" href="{{ asset('safari-pinned-tab.svg') }}" color="#C07D2A">
  53.     <meta name="msapplication-TileColor" content="#1A1D2E">
  54.     <meta name="theme-color" content="#F7F5F0">
  56.     {# ── Fonts ─────────────────────────────────────────────────────────────── #}
  57.     <link rel="preconnect" href="https://fonts.googleapis.com">
  58.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  59.     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Montserrat:wght@500;700;800;900&display=swap"
  60.           rel="stylesheet">
  61.     {# Material Icons served locally (web/css/iconfont/) — no external CDN, so icons never flicker/break when offline or the CDN is slow #}
  62.     <link rel="stylesheet" href="{{ asset('css/iconfont/material-icons.css') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  64.     {# ── Core stylesheets ──────────────────────────────────────────────────── #}
  65.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  66.           integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
  67.           crossorigin="anonymous" referrerpolicy="no-referrer">
  68.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  69.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  70.     <link rel="stylesheet"
  71.           href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
  72.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css">
  73.     <link rel="stylesheet"
  74.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/bootstrap.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  75.     <link rel="stylesheet"
  76.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/style.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  77.     <link rel="stylesheet" id="dark-theme-css"
  78.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/dark.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  79.           disabled="true">
  80.     <link rel="stylesheet"
  81.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  82.     <link rel="stylesheet"
  83.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/central_responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  84.     {# ── CW1 consolidated central-web spine (base=tokens, pages=marketing, admin=shell).
  85.          Replaces the retired temporary_inline.css; loaded last so tokens/utilities
  86.          are available to every central page. ──────────────────────────────────── #}
  87.     <link rel="stylesheet"
  88.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/base.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  89.     <link rel="stylesheet"
  90.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/pages.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  91.     <link rel="stylesheet"
  92.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/admin.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  94.     {# ── Dev toolbar suppression ───────────────────────────────────────────── #}
  95.     <style>{% if app.session.get('devAdminMode') != 1 %}.sf-toolbar {
  96.             display: none !important
  97.         }{% endif %}</style>
  99.     {# ── Preloader ─────────────────────────────────────────────────────────── #}
  100.     <style>
  101.         #hb-preloader {
  102.             position: fixed;
  103.             top: 0;
  104.             left: 0;
  105.             width: 100%;
  106.             height: 100vh;
  107.             background: var(--hb-cream, #F7F5F0);
  108.             display: flex;
  109.             flex-direction: column;
  110.             justify-content: center;
  111.             align-items: center;
  112.             z-index: 99999;
  113.         }
  115.         .hb-pre-logo {
  116.             display: flex;
  117.             align-items: center;
  118.             gap: 12px;
  119.             margin-bottom: 28px;
  120.         }
  122.         .hb-pre-logo img {
  123.             width: 34px;
  124.             height: 34px;
  125.         }
  127.         .hb-pre-logo span {
  128.             font-family: 'DM Sans', sans-serif;
  129.             font-size: 17px;
  130.             font-weight: 800;
  131.             color: var(--hb-ink, #1A1D2E);
  132.             letter-spacing: -.01em;
  133.         }
  135.         .hb-pre-logo span b {
  136.             color: #C07D2A;
  137.             font-weight: 800;
  138.         }
  140.         .hb-pre-bar-wrap {
  141.             width: 120px;
  142.             height: 2px;
  143.             background: rgba(26, 29, 46, .08);
  144.             border-radius: 2px;
  145.             overflow: hidden;
  146.         }
  148.         .hb-pre-bar {
  149.             height: 100%;
  150.             width: 40%;
  151.             background: #C07D2A;
  152.             border-radius: 2px;
  153.             animation: hb-slide 1.5s ease-in-out infinite;
  154.         }
  156.         @keyframes hb-slide {
  157.             0% {
  158.                 transform: translateX(-100%);
  159.             }
  160.             50% {
  161.                 transform: translateX(250%);
  162.             }
  163.             100% {
  164.                 transform: translateX(-100%);
  165.             }
  166.         }
  167.     </style>
  169.     {# ── Inline JS (runs before body paint) ───────────────────────────────── #}
  170.     <script>
  171.         var logger = (function () {
  172.             var _old = null, pub = {};
  173.             pub.enableLogger = function () {
  174.                 if (_old) window['console']['log'] = _old;
  175.             };
  176.             pub.disableLogger = function () {
  177.                 _old = console.log;
  178.                 window['console']['log'] = function () {
  179.                 };
  180.             };
  181.             return pub;
  182.         }());
  183.         {% if app.session.get('devAdminMode') != 1 %}
  184.         window['console']['log'] = function () {
  185.         };
  186.         {% endif %}
  187.     </script>
  189.     <script>
  190.         function changeTheme(isDark) {
  191.             var darkCss = document.getElementById('dark-theme-css');
  192.             var cb = document.getElementById('theme-toggle-checkbox');
  193.             var track = document.getElementById('hbThemeTrack');
  194.             document.querySelectorAll('img').forEach(function (img) {
  195.                 if (isDark) {
  196.                     img.src = img.src.replace('/honeybee_web_assets/', '/honeybee_web_assets/dark/');
  197.                 } else {
  198.                     img.src = img.src.replace('/honeybee_web_assets/dark/', '/honeybee_web_assets/');
  199.                 }
  200.             });
  201.             if (darkCss) darkCss.disabled = !isDark;
  202.             if (cb) cb.checked = isDark;
  203.             if (track) track.classList.toggle('hb-dark', isDark);
  204.             localStorage.setItem('theme', isDark ? 'dark' : 'light');
  205.         }
  206.     </script>
  208.     <script>if (typeof module === 'object') {
  209.             window.module = module;
  210.             module = undefined;
  211.         }</script>
  213.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  214.             integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  215.     <script data-ad-client="ca-pub-8286883017903771" async
  216.             src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  217.     <script>var BaseURL = '{{ url('dashboard') }}';</script>
  218. </head>
  220. {# ── Google Analytics ──────────────────────────────────────────────────────── #}
  221. <script async src="https://www.googletagmanager.com/gtag/js?id=G-V22132YMJ3"></script>
  222. <script>
  223.     window.dataLayer = window.dataLayer || [];
  225.     function gtag() {
  226.         dataLayer.push(arguments);
  227.     }
  229.     gtag('js', new Date());
  230.     gtag('config', 'G-V22132YMJ3');
  231. </script>
  233. {# ── Resolve admin level & consultant flag ────────────────────────────────── #}
  234. {% set BUDDYBEE_ADMIN_LEVEL = 0 %}
  235. {% set isConsultant         = 0 %}
  236. {% if session[UserConstants.USER_ID] is defined %}
  237.     {% set isConsultant         = session[UserConstants.IS_CONSULTANT]        is defined ? session[UserConstants.IS_CONSULTANT]        : 0 %}
  238.     {% set BUDDYBEE_ADMIN_LEVEL = session[UserConstants.BUDDYBEE_ADMIN_LEVEL] is defined ? session[UserConstants.BUDDYBEE_ADMIN_LEVEL] : 0 %}
  239. {% endif %}
  241. {# Single <body> tag — classes set in one place, no duplicate tags #}
  242. {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  243. <body class="buddybee_body has_admin_bar body-mask">
  244. {% elseif session[UserConstants.USER_ID] is defined %}
  245. <body class="buddybee_body body-mask">
  246. {% else %}
  247. <body class="body-mask">
  248. {% endif %}
  250. {# ── Preloader ─────────────────────────────────────────────────────────────── #}
  251. <div id="hb-preloader">
  252.     <div class="hb-pre-logo">
  253.         <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  254.              alt="HoneyBee">
  255.         <span>Honey<b>Bee</b></span>
  256.     </div>
  257.     <div class="hb-pre-bar-wrap">
  258.         <div class="hb-pre-bar"></div>
  259.     </div>
  260. </div>
  262. {# ── Processing overlay (shown during AJAX) ────────────────────────────────── #}
  263. <div id="buddybee_processing_loader">
  264.     <div><p>Processing</p></div>
  265. </div>
  267. {# ══════════════════════════════ NAVBAR ═══════════════════════════════════════
  268.    Scandinavian navbar: glass-morphism, fixed, minimal, fully responsive
  269.    ═══════════════════════════════════════════════════════════════════════════ #}
  270. <style>
  271.     /* ── Design tokens ──────────────────────────────────────────────────────────── */
  272.     :root {
  273.         --hb-ink: #1A1D2E;
  274.         --hb-ink-2: #252840;
  275.         --hb-amber: #C07D2A;
  276.         --hb-amber-lt: #D4954A;
  277.         --hb-muted: #6B6E7F;
  278.         --hb-border: rgba(26, 29, 46, .08);
  279.         --hb-border-md: rgba(26, 29, 46, .14);
  280.         --hb-cream: #F7F5F0;
  281.         --hb-white: #FFFFFF;
  282.         --hb-shadow: 0 2px 20px rgba(26, 29, 46, .07);
  283.         --hb-shadow-lg: 0 8px 32px rgba(26, 29, 46, .10);
  284.         --hb-radius: 10px;
  285.         --hb-font: 'DM Sans', 'Gilroy', system-ui, sans-serif;
  286.     }
  288.     /* ── Navbar shell ─────────────────────────────────────────────────────────── */
  289.     .hb-navbar {
  290.         position: fixed;
  291.         top: 0;
  292.         left: 0;
  293.         right: 0;
  294.         z-index: 9999;
  295.         background: rgba(247, 245, 240, .97);
  296.         backdrop-filter: blur(20px) saturate(180%);
  297.         -webkit-backdrop-filter: blur(20px) saturate(180%);
  298.         border-bottom: 1px solid var(--hb-border);
  299.         transition: box-shadow .2s, border-color .2s;
  300.         font-family: var(--hb-font);
  301.     }
  303.     .hb-navbar.hb-scrolled {
  304.         box-shadow: var(--hb-shadow);
  305.         border-color: var(--hb-border-md);
  306.     }
  308.     /* ── Inner container ──────────────────────────────────────────────────────── */
  309.     .hb-nav-inner {
  310.         max-width: 1280px;
  311.         margin: 0 auto;
  312.         padding: 0 28px;
  313.         height: 64px;
  314.         display: flex;
  315.         align-items: center;
  316.         gap: 24px;
  317.     }
  319.     /* ── Brand ────────────────────────────────────────────────────────────────── */
  320.     .hb-brand {
  321.         display: flex;
  322.         align-items: center;
  323.         gap: 9px;
  324.         text-decoration: none;
  325.         flex-shrink: 0;
  326.     }
  328.     .hb-brand img {
  329.         height: 30px;
  330.         width: auto;
  331.     }
  333.     .hb-brand-name {
  334.         font-size: 15.5px;
  335.         font-weight: 800;
  336.         color: var(--hb-ink);
  337.         letter-spacing: -.01em;
  338.         line-height: 1;
  339.     }
  341.     .hb-brand-name b {
  342.         color: var(--hb-amber);
  343.         font-weight: 800;
  344.     }
  346.     /* ── Nav links ────────────────────────────────────────────────────────────── */
  347.     .hb-links {
  348.         display: flex;
  349.         align-items: center;
  350.         gap: 2px;
  351.         list-style: none;
  352.         margin: 0;
  353.         padding: 0;
  354.         flex: 1;
  355.     }
  357.     .hb-links .hb-link > a,
  358.     .hb-links .hb-drop > a {
  359.         display: inline-flex;
  360.         align-items: center;
  361.         gap: 5px;
  362.         padding: 7px 11px;
  363.         font-size: 13.5px;
  364.         font-weight: 500;
  365.         color: var(--hb-muted);
  366.         text-decoration: none;
  367.         border-radius: 7px;
  368.         white-space: nowrap;
  369.         transition: color .15s, background .15s;
  370.         position: relative;
  371.     }
  373.     .hb-links .hb-link > a:hover,
  374.     .hb-links .hb-drop > a:hover {
  375.         color: var(--hb-ink);
  376.         background: rgba(26, 29, 46, .04);
  377.     }
  379.     .hb-links .hb-link > a.active {
  380.         color: var(--hb-ink);
  381.         font-weight: 600;
  382.     }
  384.     .hb-links .hb-link > a.active::after {
  385.         content: '';
  386.         position: absolute;
  387.         bottom: 2px;
  388.         left: 11px;
  389.         right: 11px;
  390.         height: 1.5px;
  391.         background: var(--hb-amber);
  392.         border-radius: 2px;
  393.     }
  395.     /* ── Dropdown ─────────────────────────────────────────────────────────────── */
  396.     .hb-drop {
  397.         position: relative;
  398.     }
  400.     .hb-caret {
  401.         font-size: 11px;
  402.         opacity: .5;
  403.         transition: transform .2s;
  404.     }
  406.     .hb-drop:hover .hb-caret {
  407.         transform: rotate(180deg);
  408.     }
  410.     .hb-dd-menu {
  411.         position: absolute;
  412.         top: 100%;
  413.         left: 50%;
  414.         transform: translateX(-50%) translateY(0);
  415.         min-width: 195px;
  416.         background: var(--hb-white);
  417.         border: 1px solid var(--hb-border-md);
  418.         border-radius: var(--hb-radius);
  419.         box-shadow: var(--hb-shadow-lg);
  420.         padding: 6px;
  421.         padding-top: 12px; /* gap lives inside → no dead zone */
  422.         opacity: 0;
  423.         pointer-events: none;
  424.         transition: opacity .16s, transform .16s;
  425.         transition-delay: 0s, 0s; /* show instantly */
  426.         list-style: none;
  427.         margin: 0;
  428.         z-index: 10001;
  429.     }
  431.     .hb-drop:hover .hb-dd-menu,
  432.     .hb-dd-menu:hover {
  433.         opacity: 1;
  434.         pointer-events: all;
  435.         transform: translateX(-50%) translateY(0);
  436.     }
  438.     .hb-drop:not(:hover) .hb-dd-menu:not(:hover) {
  439.         transition-delay: .12s;
  440.     }
  442.     /* slight lag on hide */
  443.     .hb-dd-menu li a {
  444.         display: block;
  445.         padding: 8px 12px;
  446.         font-size: var(--cp-fs-base, 13px);
  447.         font-weight: 500;
  448.         color: var(--hb-muted);
  449.         text-decoration: none;
  450.         border-radius: 6px;
  451.         transition: color .12s, background .12s;
  452.     }
  454.     .hb-dd-menu li a:hover {
  455.         color: var(--hb-ink);
  456.         background: rgba(26, 29, 46, .04);
  457.     }
  459.     .hb-dd-menu li a.active {
  460.         color: var(--hb-ink);
  461.         font-weight: 600;
  462.     }
  464.     .hb-dd-div {
  465.         height: 1px;
  466.         background: var(--hb-border);
  467.         margin: 4px 6px;
  468.     }
  470.     /* ── Right side ───────────────────────────────────────────────────────────── */
  471.     .hb-nav-right {
  472.         display: flex;
  473.         align-items: center;
  474.         gap: 6px;
  475.         flex-shrink: 0;
  476.     }
  478.     /* ── Language switcher ────────────────────────────────────────────────────── */
  479.     .hb-lang {
  480.         position: relative;
  481.     }
  483.     .hb-lang-btn {
  484.         display: flex;
  485.         align-items: center;
  486.         gap: 5px;
  487.         padding: 6px 10px;
  488.         font-size: var(--cp-fs-sm, 12.5px);
  489.         font-weight: 600;
  490.         color: var(--hb-muted);
  491.         background: none;
  492.         border: 1px solid var(--hb-border);
  493.         border-radius: 7px;
  494.         cursor: pointer;
  495.         transition: all .15s;
  496.         font-family: var(--hb-font);
  497.     }
  499.     .hb-lang-btn:hover {
  500.         color: var(--hb-ink);
  501.         border-color: var(--hb-border-md);
  502.         background: rgba(26, 29, 46, .03);
  503.     }
  505.     .hb-lang-menu {
  506.         position: absolute;
  507.         top: 100%;
  508.         right: 0;
  509.         min-width: 155px;
  510.         background: var(--hb-white);
  511.         border: 1px solid var(--hb-border-md);
  512.         border-radius: var(--hb-radius);
  513.         box-shadow: var(--hb-shadow-lg);
  514.         padding: 6px;
  515.         padding-top: 10px; /* gap lives inside → no dead zone */
  516.         opacity: 0;
  517.         pointer-events: none;
  518.         transform: translateY(0);
  519.         transition: opacity .15s;
  520.         z-index: 10001;
  521.         list-style: none;
  522.         margin: 0;
  523.     }
  525.     .hb-lang:hover .hb-lang-menu,
  526.     .hb-lang-menu:hover {
  527.         opacity: 1;
  528.         pointer-events: all;
  529.     }
  531.     .hb-lang:not(:hover) .hb-lang-menu:not(:hover) {
  532.         transition-delay: .12s;
  533.     }
  535.     .hb-lang-menu li a {
  536.         display: block;
  537.         padding: 7px 12px;
  538.         font-size: var(--cp-fs-base, 13px);
  539.         font-weight: 500;
  540.         color: var(--hb-muted);
  541.         text-decoration: none;
  542.         border-radius: 6px;
  543.         transition: all .12s;
  544.     }
  546.     .hb-lang-menu li a:hover {
  547.         color: var(--hb-ink);
  548.         background: rgba(26, 29, 46, .04);
  549.     }
  551.     /* ── User dropdown ────────────────────────────────────────────────────────── */
  552.     .hb-user {
  553.         position: relative;
  554.     }
  556.     .hb-user-btn {
  557.         display: flex;
  558.         align-items: center;
  559.         gap: 7px;
  560.         background: none;
  561.         border: none;
  562.         cursor: pointer;
  563.         padding: 4px 6px;
  564.         border-radius: 8px;
  565.         transition: background .15s;
  566.     }
  568.     .hb-user-btn:hover {
  569.         background: rgba(26, 29, 46, .05);
  570.     }
  572.     .hb-user-avatar {
  573.         width: 30px;
  574.         height: 30px;
  575.         border-radius: 50%;
  576.         background-size: cover !important;
  577.         background-position: center !important;
  578.         border: 1.5px solid var(--hb-border-md);
  579.         flex-shrink: 0;
  580.     }
  582.     .hb-user-name {
  583.         font-size: var(--cp-fs-base, 13px);
  584.         font-weight: 600;
  585.         color: var(--hb-ink);
  586.         max-width: 110px;
  587.         white-space: nowrap;
  588.         overflow: hidden;
  589.         text-overflow: ellipsis;
  590.     }
  592.     .hb-user-menu {
  593.         position: absolute;
  594.         top: 100%;
  595.         right: 0;
  596.         min-width: 185px;
  597.         background: var(--hb-white);
  598.         border: 1px solid var(--hb-border-md);
  599.         border-radius: var(--hb-radius);
  600.         box-shadow: var(--hb-shadow-lg);
  601.         padding: 6px;
  602.         padding-top: 12px; /* gap lives inside → no dead zone */
  603.         opacity: 0;
  604.         pointer-events: none;
  605.         transform: translateY(0);
  606.         transition: opacity .15s;
  607.         z-index: 10001;
  608.         list-style: none;
  609.         margin: 0;
  610.     }
  612.     .hb-user:hover .hb-user-menu {
  613.         opacity: 1;
  614.         pointer-events: all;
  615.     }
  617.     .hb-user:not(:hover) .hb-user-menu:not(:hover) {
  618.         transition-delay: .12s;
  619.     }
  621.     .hb-user-menu li a {
  622.         display: flex;
  623.         align-items: center;
  624.         gap: 8px;
  625.         padding: 8px 12px;
  626.         font-size: var(--cp-fs-base, 13px);
  627.         font-weight: 500;
  628.         color: var(--hb-muted);
  629.         text-decoration: none;
  630.         border-radius: 6px;
  631.         transition: all .12s;
  632.     }
  634.     .hb-user-menu li a:hover {
  635.         color: var(--hb-ink);
  636.         background: rgba(26, 29, 46, .04);
  637.     }
  639.     .hb-user-menu li a i {
  640.         font-size: 12px;
  641.         width: 14px;
  642.         opacity: .5;
  643.     }
  645.     .hb-u-div {
  646.         height: 1px;
  647.         background: var(--hb-border);
  648.         margin: 4px 6px;
  649.     }
  651.     /* ── Auth + Companies buttons ─────────────────────────────────────────────── */
  652.     .hb-btn-login {
  653.         padding: 7px 16px;
  654.         font-size: var(--cp-fs-base, 13px);
  655.         font-weight: 600;
  656.         color: var(--hb-ink);
  657.         background: none;
  658.         border: 1.5px solid var(--hb-border-md);
  659.         border-radius: 8px;
  660.         text-decoration: none;
  661.         transition: all .15s;
  662.     }
  664.     .hb-btn-login:hover {
  665.         color: var(--hb-ink);
  666.         border-color: var(--hb-ink);
  667.         background: rgba(26, 29, 46, .03);
  668.     }
  670.     .hb-btn-signup {
  671.         padding: 7px 16px;
  672.         font-size: var(--cp-fs-base, 13px);
  673.         font-weight: 700;
  674.         color: #fff;
  675.         background: var(--hb-ink);
  676.         border: 1.5px solid transparent;
  677.         border-radius: 8px;
  678.         text-decoration: none;
  679.         transition: all .15s;
  680.     }
  682.     .hb-btn-signup:hover {
  683.         color: #fff;
  684.         background: var(--hb-ink-2);
  685.         box-shadow: 0 4px 14px rgba(26, 29, 46, .2);
  686.     }
  688.     .hb-btn-companies {
  689.         display: inline-flex;
  690.         align-items: center;
  691.         gap: 6px;
  692.         padding: 7px 15px;
  693.         font-size: var(--cp-fs-base, 13px);
  694.         font-weight: 700;
  695.         color: #fff;
  696.         background: var(--hb-amber);
  697.         border: none;
  698.         border-radius: 8px;
  699.         text-decoration: none;
  700.         transition: all .15s;
  701.     }
  703.     .hb-btn-companies:hover {
  704.         color: #fff;
  705.         background: var(--hb-amber-lt);
  706.         box-shadow: 0 4px 14px rgba(192, 125, 42, .28);
  707.     }
  709.     /* ── Switch-user panel (admin only) ──────────────────────────────────────── */
  710.     .hb-switch {
  711.         position: relative;
  712.     }
  714.     .hb-switch-btn {
  715.         padding: 6px 11px;
  716.         font-size: 12px;
  717.         font-weight: 600;
  718.         color: var(--hb-muted);
  719.         background: none;
  720.         border: 1px solid var(--hb-border);
  721.         border-radius: 7px;
  722.         cursor: pointer;
  723.         font-family: var(--hb-font);
  724.         transition: all .15s;
  725.     }
  727.     .hb-switch-btn:hover {
  728.         color: var(--hb-ink);
  729.         border-color: var(--hb-border-md);
  730.     }
  732.     .hb-switch-panel {
  733.         position: absolute;
  734.         top: 100%;
  735.         right: 0;
  736.         min-width: 225px;
  737.         background: var(--hb-white);
  738.         border: 1px solid var(--hb-border-md);
  739.         border-radius: var(--hb-radius);
  740.         box-shadow: var(--hb-shadow-lg);
  741.         padding: 10px;
  742.         padding-top: 14px; /* gap lives inside → no dead zone */
  743.         opacity: 0;
  744.         pointer-events: none;
  745.         transform: translateY(0);
  746.         transition: opacity .15s;
  747.         z-index: 10001;
  748.         list-style: none;
  749.         margin: 0;
  750.     }
  752.     .hb-switch:hover .hb-switch-panel {
  753.         opacity: 1;
  754.         pointer-events: all;
  755.     }
  757.     .hb-switch:not(:hover) .hb-switch-panel:not(:hover) {
  758.         transition-delay: .12s;
  759.     }
  761.     .hb-switch-panel li a {
  762.         display: block;
  763.         padding: 8px 10px;
  764.         font-size: var(--cp-fs-base, 13px);
  765.         font-weight: 500;
  766.         color: var(--hb-muted);
  767.         text-decoration: none;
  768.         border-radius: 6px;
  769.         transition: all .12s;
  770.     }
  772.     .hb-switch-panel li a:hover {
  773.         color: var(--hb-ink);
  774.         background: rgba(26, 29, 46, .04);
  775.     }
  777.     .hb-sw-div {
  778.         height: 1px;
  779.         background: var(--hb-border);
  780.         margin: 6px 0;
  781.     }
  783.     .hb-switch-panel select {
  784.         width: 100%;
  785.         font-size: 12px;
  786.         font-family: var(--hb-font);
  787.         border: 1px solid var(--hb-border-md);
  788.         border-radius: 6px;
  789.         padding: 6px 8px;
  790.         color: var(--hb-ink);
  791.         background: var(--hb-cream);
  792.     }
  794.     /* ── Theme toggle ─────────────────────────────────────────────────────────── */
  795.     .hb-theme {
  796.         display: flex;
  797.         align-items: center;
  798.         gap: 6px;
  799.         padding: 0 2px;
  800.     }
  802.     .hb-theme-img {
  803.         width: 14px;
  804.         height: 14px;
  805.         opacity: .45;
  806.         display: block;
  807.     }
  809.     #theme-toggle-checkbox {
  810.         display: none;
  811.     }
  813.     .hb-theme-track {
  814.         position: relative;
  815.         width: 34px;
  816.         height: 19px;
  817.         background: rgba(26, 29, 46, .14);
  818.         border-radius: 10px;
  819.         cursor: pointer;
  820.         transition: background .2s;
  821.         flex-shrink: 0;
  822.         display: block;
  823.     }
  825.     .hb-theme-track::after {
  826.         content: '';
  827.         position: absolute;
  828.         top: 2px;
  829.         left: 2px;
  830.         width: 15px;
  831.         height: 15px;
  832.         background: white;
  833.         border-radius: 50%;
  834.         box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  835.         transition: transform .2s;
  836.     }
  838.     .hb-theme-track.hb-dark {
  839.         background: var(--hb-amber);
  840.     }
  842.     .hb-theme-track.hb-dark::after {
  843.         transform: translateX(15px);
  844.     }
  846.     /* ── Mobile hamburger ─────────────────────────────────────────────────────── */
  847.     .hb-toggler {
  848.         display: none;
  849.         background: none;
  850.         border: none;
  851.         cursor: pointer;
  852.         padding: 8px;
  853.         flex-direction: column;
  854.         gap: 5px;
  855.         border-radius: 7px;
  856.         margin-left: auto;
  857.         flex-shrink: 0;
  858.         transition: background .15s;
  859.     }
  861.     .hb-toggler:hover {
  862.         background: rgba(26, 29, 46, .06);
  863.     }
  865.     .hb-toggler span {
  866.         display: block;
  867.         width: 21px;
  868.         height: 1.5px;
  869.         background: var(--hb-ink);
  870.         border-radius: 2px;
  871.         transition: all .22s;
  872.     }
  874.     .hb-toggler.hb-open span:nth-child(1) {
  875.         transform: rotate(45deg) translate(4.5px, 4.5px);
  876.     }
  878.     .hb-toggler.hb-open span:nth-child(2) {
  879.         opacity: 0;
  880.         transform: scaleX(0);
  881.     }
  883.     .hb-toggler.hb-open span:nth-child(3) {
  884.         transform: rotate(-45deg) translate(4.5px, -4.5px);
  885.     }
  887.     /* ── Responsive ───────────────────────────────────────────────────────────── */
  888.     @media (max-width: 1024px) {
  889.         .hb-toggler {
  890.             display: flex;
  891.         }
  893.         .hb-links, .hb-nav-right {
  894.             display: none;
  895.         }
  897.         .hb-nav-inner {
  898.             height: 56px;
  899.         }
  901.         .hb-navbar.hb-open .hb-nav-inner {
  902.             height: auto;
  903.             flex-wrap: wrap;
  904.             padding-top: 12px;
  905.             padding-bottom: 14px;
  906.             align-items: flex-start;
  907.         }
  909.         .hb-navbar.hb-open .hb-links {
  910.             display: flex;
  911.             flex-direction: column;
  912.             align-items: flex-start;
  913.             width: 100%;
  914.             flex: 0 0 100%;
  915.             gap: 2px; /* flex: 0 0 100% overrides base flex:1 to force row wrap */
  916.         }
  918.         .hb-navbar.hb-open .hb-links .hb-link,
  919.         .hb-navbar.hb-open .hb-links .hb-drop {
  920.             width: 100%;
  921.         }
  923.         .hb-navbar.hb-open .hb-links .hb-link > a,
  924.         .hb-navbar.hb-open .hb-links .hb-drop > a {
  925.             width: 100%;
  926.             justify-content: space-between;
  927.         }
  929.         .hb-navbar.hb-open .hb-dd-menu {
  930.             position: static;
  931.             transform: none;
  932.             opacity: 0;
  933.             pointer-events: none;
  934.             display: none;
  935.             box-shadow: none;
  936.             border: none;
  937.             background: rgba(26, 29, 46, .03);
  938.             border-radius: 7px;
  939.             margin: 2px 0 2px 12px;
  940.         }
  942.         .hb-navbar.hb-open .hb-drop.hb-mob-open .hb-dd-menu {
  943.             display: block;
  944.             opacity: 1;
  945.             pointer-events: all;
  946.         }
  948.         .hb-navbar.hb-open .hb-nav-right {
  949.             display: flex;
  950.             flex-wrap: wrap;
  951.             width: 100%;
  952.             flex: 0 0 100%;
  953.             gap: 8px;
  954.             padding-top: 12px;
  955.             border-top: 1px solid var(--hb-border);
  956.             margin-top: 4px;
  957.         }
  958.     }
  960.     /* ── Body offset for fixed navbar ─────────────────────────────────────────── */
  961.     body {
  962.         padding-top: 64px;
  963.     }
  965.     @media (max-width: 1024px) {
  966.         body {
  967.             padding-top: 56px;
  968.         }
  969.     }
  971.     /* ── Processing loader ────────────────────────────────────────────────────── */
  972.     #buddybee_processing_loader {
  973.         position: fixed;
  974.         inset: 0;
  975.         background: rgba(247, 245, 240, .88);
  976.         backdrop-filter: blur(4px);
  977.         z-index: 999999;
  978.         display: none;
  979.         align-items: center;
  980.         justify-content: center;
  981.     }
  983.     #buddybee_processing_loader div {
  984.         background: var(--hb-white);
  985.         border-radius: 14px;
  986.         padding: 28px 44px;
  987.         box-shadow: 0 12px 40px rgba(26, 29, 46, .12);
  988.         text-align: center;
  989.     }
  991.     #buddybee_processing_loader p {
  992.         color: var(--hb-ink);
  993.         font-weight: 700;
  994.         font-size: 12px;
  995.         letter-spacing: .1em;
  996.         text-transform: uppercase;
  997.         margin: 0;
  998.         font-family: var(--hb-font);
  999.     }
  1001.     a:hover {
  1002.         text-decoration: none;
  1003.     }
  1004. </style>
  1006. <nav class="hb-navbar" id="hbNavbar">
  1007.     <div class="hb-nav-inner">
  1009.         {# Brand #}
  1010.         <a class="hb-brand" href="{{ url('dashboard') }}">
  1011.             <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  1012.                  alt="HoneyBee">
  1013.             <span class="hb-brand-name">Honey<b>Bee</b></span>
  1014.         </a>
  1016.         {# Mobile hamburger #}
  1017.         <button class="hb-toggler" id="hbToggler" aria-label="Open menu" type="button">
  1018.             <span></span><span></span><span></span>
  1019.         </button>
  1021.         {# Primary navigation — this single <ul> is BOTH the desktop nav and the
  1022.            responsive hamburger menu (see the max-width:1024px block above, which
  1023.            re-flows .hb-links to a column inside .hb-navbar.hb-open). Adding one
  1024.            <li> here therefore surfaces the item in both, with no duplicate CSS. #}
  1025.         {# WEB-1b (Conversion Spec §3): Products | Solutions | Pricing | Partners |
  1026.            Resources | Company — buyers pick a PRODUCT or a PROBLEM, never an ERP module.
  1027.            Investor material left the nav (footer/Company page carries it — spec §31);
  1028.            the Tools fold into Resources. Items whose dedicated pages arrive with WEB-2
  1029.            (/business-suite, /hivemind, /agents, /honeycore/*, /honeywatt) point at the
  1030.            closest live page today and re-point when those pages ship. #}
  1031.         <ul class="hb-links">
  1032.             <li class="hb-drop">
  1033.                 <a href="#">Products <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1034.                 <ul class="hb-dd-menu">
  1035.                     {# WEB-2: the dedicated product pages shipped — the dropdown now points at
  1036.                        them (the WEB-1b placeholders pointed at the closest legacy page). #}
  1037.                     <li><span style="display:block;padding:7px 14px 3px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.5;">Business</span></li>
  1038.                     <li><a href="{{ url('honeybee_business_suite') }}"
  1039.                            class="{{ app.request.get('_route') == 'honeybee_business_suite' ? 'active' : '' }}">HoneyBee Business Suite</a></li>
  1040.                     <li><a href="{{ url('honeybee_hivemind') }}"
  1041.                            class="{{ app.request.get('_route') == 'honeybee_hivemind' ? 'active' : '' }}">HiveMind AI</a></li>
  1042.                     <li><a href="{{ url('honeybee_agents') }}"
  1043.                            class="{{ app.request.get('_route') == 'honeybee_agents' ? 'active' : '' }}">AI Agents</a></li>
  1044.                     <li><span style="display:block;padding:9px 14px 3px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.5;">Energy &amp; Industrial</span></li>
  1045.                     <li><a href="{{ url('honeybee_honeycore') }}"
  1046.                            class="{{ app.request.get('_route') == 'honeybee_honeycore' ? 'active' : '' }}">HoneyCore 4.0</a></li>
  1047.                     <li><a href="{{ url('honeybee_honeycore_hybrid') }}"
  1048.                            class="{{ app.request.get('_route') == 'honeybee_honeycore_hybrid' ? 'active' : '' }}">Hybrid Control</a></li>
  1049.                     <li><a href="{{ url('honeybee_honeycore_ems') }}"
  1050.                            class="{{ app.request.get('_route') == 'honeybee_honeycore_ems' ? 'active' : '' }}">EMS</a></li>
  1051.                     <li><a href="{{ url('honeybee_honeycore_bms') }}"
  1052.                            class="{{ app.request.get('_route') == 'honeybee_honeycore_bms' ? 'active' : '' }}">BMS</a></li>
  1053.                     <li><span style="display:block;padding:9px 14px 3px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.5;">Engineering</span></li>
  1054.                     <li><a href="{{ url('honeybee_honeywatt') }}"
  1055.                            class="{{ app.request.get('_route') == 'honeybee_honeywatt' ? 'active' : '' }}">HoneyWatt — Solar Design</a></li>
  1056.                 </ul>
  1057.             </li>
  1058.             {# WEB-3 §4: Solutions organized around BUYERS, not technologies #}
  1059.             <li class="hb-drop">
  1060.                 <a href="{{ url('honeybee_solutions') }}"
  1061.                    class="{{ app.request.get('_route') == 'honeybee_solutions' ? 'active' : '' }}">Solutions <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1062.                 <ul class="hb-dd-menu">
  1063.                     <li><a href="{{ url('honeybee_solution', {'slug': 'solar-epc'}) }}"
  1064.                            class="{{ app.request.get('slug') == 'solar-epc' ? 'active' : '' }}">Solar EPC Companies</a></li>
  1065.                     <li><a href="{{ url('honeybee_solution', {'slug': 'system-integrators'}) }}"
  1066.                            class="{{ app.request.get('slug') == 'system-integrators' ? 'active' : '' }}">System Integrators</a></li>
  1067.                     <li><a href="{{ url('honeybee_solution', {'slug': 'energy-asset-owners'}) }}"
  1068.                            class="{{ app.request.get('slug') == 'energy-asset-owners' ? 'active' : '' }}">Energy Asset Owners</a></li>
  1069.                     <li><a href="{{ url('honeybee_solution', {'slug': 'industrial-energy-management'}) }}"
  1070.                            class="{{ app.request.get('slug') == 'industrial-energy-management' ? 'active' : '' }}">C&amp;I &amp; Industrial</a></li>
  1071.                     <li><a href="{{ url('honeybee_solution', {'slug': 'multi-site-operations'}) }}"
  1072.                            class="{{ app.request.get('slug') == 'multi-site-operations' ? 'active' : '' }}">Multi-Site Operations</a></li>
  1073.                     <li><a href="{{ url('honeybee_solutions') }}"
  1074.                            class="{{ app.request.get('_route') == 'honeybee_solutions' ? 'active' : '' }}">All solutions</a></li>
  1075.                 </ul>
  1076.             </li>
  1077.             <li class="hb-link">
  1078.                 <a href="{{ url('honeybee_pricing') }}"
  1079.                    class="{{ app.request.get('_route') == 'honeybee_pricing' ? 'active' : '' }} trn"
  1080.                    data-trn-key="_PRICING_">Pricing</a>
  1081.             </li>
  1082.             <li class="hb-link">
  1083.                 <a href="{{ url('honeybee_partners') }}"
  1084.                    class="{{ app.request.get('_route') == 'honeybee_partners' ? 'active' : '' }}">Partners</a>
  1085.             </li>
  1086.             <li class="hb-drop">
  1087.                 <a href="#">Resources <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1088.                 <ul class="hb-dd-menu">
  1089.                     <li><a href="{{ url('honeybee_tool', {'slug': 'rooftop-estimate'}) }}"
  1090.                            class="{{ app.request.get('slug') == 'rooftop-estimate' ? 'active' : '' }}">Instant Solar Estimate</a></li>
  1091.                     {% if app.session.get('userType') == 8 %}
  1092.                     <li><a href="{{ url('hb360_my_estimate') }}"
  1093.                            class="{{ app.request.get('_route') == 'hb360_my_estimate' ? 'active' : '' }}">My Solar Estimates</a></li>
  1094.                     {% endif %}
  1095.                     <li><a href="{{ url('honeybee_tool', {'slug': 'cost-leakage-calculator'}) }}"
  1096.                            class="{{ app.request.get('slug') == 'cost-leakage-calculator' ? 'active' : '' }}">Project Cost Leakage Calculator</a></li>
  1097.                     <li><a href="{{ url('honeybee_tool', {'slug': 'roi-calculator'}) }}"
  1098.                            class="{{ app.request.get('slug') == 'roi-calculator' ? 'active' : '' }}">ERP ROI Calculator</a></li>
  1099.                     <li><a href="{{ url('honeybee_tool', {'slug': 'site-assessment-estimator'}) }}"
  1100.                            class="{{ app.request.get('slug') == 'site-assessment-estimator' ? 'active' : '' }}">HoneyCore Site Assessment Estimator</a></li>
  1101.                     {# WEB-4: the trust set — customers / implementation / security #}
  1102.                     <li><a href="{{ url('honeybee_customers') }}"
  1103.                            class="{{ app.request.get('_route') == 'honeybee_customers' ? 'active' : '' }}">Customer Stories</a></li>
  1104.                     <li><a href="{{ url('honeybee_implementation') }}"
  1105.                            class="{{ app.request.get('_route') == 'honeybee_implementation' ? 'active' : '' }}">Implementation</a></li>
  1106.                     <li><a href="{{ url('honeybee_security') }}"
  1107.                            class="{{ app.request.get('_route') == 'honeybee_security' ? 'active' : '' }}">Security</a></li>
  1108.                     <li><a href="{{ url('honeybee_trust') }}"
  1109.                            class="{{ app.request.get('_route') == 'honeybee_trust' ? 'active' : '' }}">Trust &amp; Governance</a></li>
  1110.                     <li><a href="{{ url('honeybee_FAQ') }}"
  1111.                            class="{{ app.request.get('_route') == 'honeybee_FAQ' ? 'active' : '' }}">FAQ</a></li>
  1112.                 </ul>
  1113.             </li>
  1114.             <li class="hb-drop">
  1115.                 <a href="#">Company <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1116.                 <ul class="hb-dd-menu">
  1117.                     <li><a href="{{ url('honeybee_about_us') }}"
  1118.                            class="{{ app.request.get('_route') == 'honeybee_about_us' ? 'active' : '' }}">About</a></li>
  1119.                     <li><a href="{{ url('honeybee_experience') }}"
  1120.                            class="{{ app.request.get('_route') == 'honeybee_experience' ? 'active' : '' }}">Experience</a></li>
  1121.                     <li><a href="{{ url('honeybee_investor') }}"
  1122.                            class="{{ app.request.get('_route') == 'honeybee_investor' ? 'active' : '' }}">Investor Snapshot</a></li>
  1123.                     <li><a href="{{ url('honeybee_contact') }}"
  1124.                            class="{{ app.request.get('_route') == 'honeybee_contact' ? 'active' : '' }}">Contact</a>
  1125.                     </li>
  1126.                 </ul>
  1127.             </li>
  1128.             {# spec §28: the ONE primary conversion — visible on every page #}
  1129.             <li class="hb-link">
  1130.                 <a href="{{ url('honeybee_contact') }}"
  1131.                    style="background:var(--hb-amber, #C07D2A);color:#fff;border-radius:8px;padding:8px 18px;font-weight:700;">Book a Demo</a>
  1132.             </li>
  1133.         </ul>
  1135.         {# Right-side controls #}
  1136.         <div class="hb-nav-right">
  1138.             {# Language switcher #}
  1139.             <div class="hb-lang">
  1140.                 <button class="hb-lang-btn" type="button">
  1141.                     <i class="fa-solid fa-globe" style="font-size:12px"></i>
  1142.                     <span class="curr_locale_text">en</span>
  1143.                     <i class="fa-solid fa-chevron-down" style="font-size:8px;opacity:.5"></i>
  1144.                 </button>
  1145.                 <ul class="hb-lang-menu">
  1146.                     <li><a href="#" class="locale_changer en" data-locale="en">🇬🇧 English</a></li>
  1147.                     <li><a href="#" class="locale_changer bn" data-locale="bn">🇧🇩 বাংলা</a></li>
  1148.                     <li><a href="#" class="locale_changer it" data-locale="it">🇮🇹 Italiano</a></li>
  1149.                     <li><a href="#" class="locale_changer de" data-locale="de">🇩🇪 Deutsch</a></li>
  1150.                     <li><a href="#" class="locale_changer fr" data-locale="fr">🇫🇷 Français</a></li>
  1151.                     <li><a href="#" class="locale_changer sp" data-locale="sp">🇪🇸 Español</a></li>
  1152.                     <li><a href="#" class="locale_changer cn" data-locale="cn">🇨🇳 中文</a></li>
  1153.                 </ul>
  1154.             </div>
  1156.             {# Admin only: switch user #}
  1157.             {% if session[UserConstants.USER_ID] is defined and (BUDDYBEE_ADMIN_LEVEL >= 1 or session['actualUserIsAdmin'] is defined) %}
  1158.                 <div class="hb-switch">
  1159.                     <button class="hb-switch-btn" type="button">Switch User</button>
  1160.                     <ul class="hb-switch-panel">
  1161.                         <li>
  1162.                             <a href="{{ absolute_url(path('view_as_user_central')) }}/{{ session['actualUserId'] is defined ? session['actualUserId'] : session['userId'] }}">
  1163.                                 ↩ Back to Mine
  1164.                             </a>
  1165.                         </li>
  1166.                         <li class="hb-sw-div"></li>
  1167.                         <li style="padding:2px 0"><select name="viewAsId" id="viewAsId"></select></li>
  1168.                     </ul>
  1169.                 </div>
  1170.             {% endif %}
  1172.             {% if session[UserConstants.USER_ID] is defined %}
  1174.                 {# Authenticated: user avatar + dropdown #}
  1175.                 <div class="hb-user">
  1176.                     <button class="hb-user-btn" type="button">
  1177.                         <div class="hb-user-avatar"
  1178.                                 {% if session[UserConstants.USER_IMAGE] != '' and session[UserConstants.USER_IMAGE] is not null %}
  1179.                                     style="background:url('{{ url('dashboard') }}{{ session[UserConstants.USER_IMAGE] }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1180.                                 {% else %}
  1181.                                     style="background:url('{{ url('dashboard') }}honeybee_web_assets/images/profiles/profile.png?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1182.                                 {% endif %}
  1183.                         ></div>
  1184.                         <span class="hb-user-name">{{ session[UserConstants.USER_NAME] }}</span>
  1185.                         <i class="fa-solid fa-chevron-down" style="font-size:11px;color:var(--hb-muted);opacity:.55"></i>
  1186.                     </button>
  1187.                     <ul class="hb-user-menu">
  1188.                         <li>
  1189.                             <a href="{{ url('honeybee_my_freelancer_profile') }}"
  1190.                                class="{{ app.request.get('_route') == 'honeybee_my_freelancer_profile' ? 'active' : '' }}">
  1191.                                 <i class="fa-regular fa-circle-user"></i> Profile
  1192.                             </a>
  1193.                         </li>
  1194.                         <li>
  1195.                             <a href="{{ url('ticket_list') }}"
  1196.                                class="{{ app.request.get('_route') == 'ticket_list' ? 'active' : '' }}">
  1197.                                 <i class="fa-regular fa-ticket"></i> <span class="trn" data-trn-key="_MY_TICKETS_">My Tickets</span>
  1198.                             </a>
  1199.                         </li>
  1200.                         <li>
  1201.                             <a href="{{ url('central_landing') }}"
  1202.                                class="{{ app.request.get('_route') == 'central_landing' ? 'active' : '' }}">
  1203.                                 <i class="fas fa-border-all"></i> <span class="trn" data-trn-key="_MY_COMPANIES_">My Companies</span>
  1204.                             </a>
  1205.                         </li>
  1206.                         {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  1207.                             <li class="hb-u-div"></li>
  1208.                             <li>
  1209.                                 <a href="{{ url('super_admin_command_center') }}"
  1210.                                    class="{{ app.request.get('_route') == 'super_admin_command_center' ? 'active' : '' }}">
  1211.                                     <i class="fa-solid fa-gauge-high"></i> Super Admin
  1212.                                 </a>
  1213.                             </li>
  1214.                             <li class="hb-u-div"></li>
  1215.                             <li>
  1216.                                 <a href="{{ url('datev_home') }}"
  1217.                                    class="{{ app.request.get('_route') == 'datev_home' ? 'active' : '' }}">
  1218.                                     <i class="fa-solid fa-gauge-high"></i> Datev Control
  1219.                                 </a>
  1220.                             </li>
  1222.                         {% endif %}
  1223.                         {% if BUDDYBEE_ADMIN_LEVEL > 1 %}
  1224.                             <li class="hb-u-div"></li>
  1225.                             <li>
  1226.                                 <a href="{{ url('admin_demo_pending_list') }}"
  1227.                                    class="{{ app.request.get('_route') in ['admin_demo_pending_list','admin_demo_request_detail'] ? 'active' : '' }}">
  1228.                                     <i class="fa-solid fa-calendar-check"></i> Demo Requests
  1229.                                 </a>
  1230.                             </li>
  1231.                             <li>
  1232.                                 <a href="{{ url('admin_demo_all_list') }}"
  1233.                                    class="{{ app.request.get('_route') == 'admin_demo_all_list' ? 'active' : '' }}">
  1234.                                     <i class="fa-solid fa-list-check"></i> All Bookings
  1235.                                 </a>
  1236.                             </li>
  1237.                         {% endif %}
  1238.                         <li class="hb-u-div"></li>
  1239.                         <li>
  1240.                             <a href="{{ url('user_logout') }}" style="color:#B04030">
  1241.                                 <i class="fa-solid fa-right-from-bracket"></i> Logout
  1242.                             </a>
  1243.                         </li>
  1244.                     </ul>
  1245.                 </div>
  1247.                 {# Companies shortcut #}
  1248.                 <a href="{{ url('central_landing') }}" class="hb-btn-companies trn" data-trn-key="_COMPANIES_">
  1249.                     <i class="fa-solid fa-building" style="font-size:12px"></i>
  1250.                     <span>Companies</span>
  1251.                 </a>
  1253.                 {# Book Demo CTA (authenticated) #}
  1254.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1255.                     Demo</a>
  1257.             {% else %}
  1259.                 {# Guest: login + get started + book demo #}
  1260.                 <a href="{{ url('user_login') }}" class="hb-btn-login trn" data-trn-key="_LOGIN_">Login</a>
  1261.                 <a href="{{ url('sign_up') }}" class="hb-btn-signup trn" data-trn-key="_CREATE_ACCOUNT_">Get Started</a>
  1262.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1263.                     Demo</a>
  1265.             {% endif %}
  1267.             {# Dark / Light mode toggle #}
  1268.             {#            <div class="hb-theme"> #}
  1269.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/sun.svg')) }}" alt="Light mode"> #}
  1270.             {#                <input type="checkbox" id="theme-toggle-checkbox"> #}
  1271.             {#                <label for="theme-toggle-checkbox" class="hb-theme-track" id="hbThemeTrack"></label> #}
  1272.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/moon.svg')) }}" alt="Dark mode"> #}
  1273.             {#            </div> #}
  1275.         </div>{# /hb-nav-right #}
  1276.     </div>{# /hb-nav-inner #}
  1277. </nav>
  1279. {# ── Apply saved theme immediately (no flash of wrong theme) ─────────────── #}
  1280. <script>
  1281.     (function () {
  1282.         var saved = localStorage.getItem('theme') || 'light';
  1283.         if (saved === 'dark') {
  1284.             var css = document.getElementById('dark-theme-css');
  1285.             var cb = document.getElementById('theme-toggle-checkbox');
  1286.             var track = document.getElementById('hbThemeTrack');
  1287.             if (css) css.disabled = false;
  1288.             if (cb) cb.checked = true;
  1289.             if (track) track.classList.add('hb-dark');
  1290.         }
  1291.     }());
  1292. </script>
  1294. {# ── Navbar interaction scripts ───────────────────────────────────────────── #}
  1295. <script>
  1296.     (function () {
  1297.         var navbar = document.getElementById('hbNavbar');
  1298.         var toggler = document.getElementById('hbToggler');
  1300.         window.addEventListener('scroll', function () {
  1301.             navbar.classList.toggle('hb-scrolled', window.scrollY > 6);
  1302.         }, {passive: true});
  1304.         if (toggler) {
  1305.             toggler.addEventListener('click', function () {
  1306.                 navbar.classList.toggle('hb-open');
  1307.                 toggler.classList.toggle('hb-open');
  1308.             });
  1309.         }
  1311.         navbar.querySelectorAll('.hb-drop > a').forEach(function (a) {
  1312.             a.addEventListener('click', function (e) {
  1313.                 if (window.innerWidth <= 1024) {
  1314.                     e.preventDefault();
  1315.                     a.closest('.hb-drop').classList.toggle('hb-mob-open');
  1316.                 }
  1317.             });
  1318.         });
  1320.         var cb = document.getElementById('theme-toggle-checkbox');
  1321.         var track = document.getElementById('hbThemeTrack');
  1322.         if (cb && track) {
  1323.             track.addEventListener('click', function () {
  1324.                 changeTheme(!cb.checked);
  1325.             });
  1326.         }
  1327.     }());
  1328. </script>
  1330. {# ── Preloader: hide on load ──────────────────────────────────────────────── #}
  1331. <script>
  1332.     document.body.style.overflow = 'hidden';
  1333.     window.addEventListener('load', function () {
  1334.         var pre = document.getElementById('hb-preloader');
  1335.         if (pre) {
  1336.             pre.style.transition = 'opacity .35s ease';
  1337.             pre.style.opacity = '0';
  1338.             setTimeout(function () {
  1339.                 pre.style.display = 'none';
  1340.             }, 360);
  1341.         }
  1342.         document.body.style.overflow = 'auto';
  1343.     });
  1344. </script>
  1347. {% set full_js_included = 0 %}
  1348. {% endif %}{# /include_html #}
  1350. <input type="hidden" id="timeStampOnHeaderLoad" value="{{ 'now'|date('U') }}">
  1351. {% include '@Application/inc/ajax_route_library.html.twig' %}
  1353. {# Date-picker scripts #}
  1354. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1355. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  1356. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>
  1358. {# WEB-5 §33 — the first-party conversion beacon. Privacy-lean BY CONSTRUCTION: respects
  1359.    Do-Not-Track, sets no cookie, mints a random per-TAB session id (sessionStorage — gone
  1360.    when the tab closes), sends only whitelisted events (WebAnalyticsCore refuses the rest).
  1361.    Events: page_view on load · data-wa clicks · any .pp-cta = cta_click · form_start on
  1362.    first input in an intent form · form_complete fired by the form on success. #}
  1363. <script>
  1364. (function () {
  1365.     'use strict';
  1366.     if (navigator.doNotTrack === '1' || window.doNotTrack === '1') { return; }
  1367.     var URL_WA = "{{ url('honeybee_wa_event') }}";
  1368.     var sid = '';
  1369.     try {
  1370.         sid = sessionStorage.getItem('hb_wa_sid') || '';
  1371.         if (!sid) {
  1372.             sid = Array.from(crypto.getRandomValues(new Uint8Array(8)))
  1373.                 .map(function (b) { return b.toString(16).padStart(2, '0'); }).join('');
  1374.             sessionStorage.setItem('hb_wa_sid', sid);
  1375.         }
  1376.     } catch (e) { sid = ''; }
  1377.     var q = new URLSearchParams(window.location.search);
  1378.     function send(ev, meta) {
  1379.         try {
  1380.             var fd = new FormData();
  1381.             fd.append('event', ev);
  1382.             fd.append('page', window.location.pathname);
  1383.             if (meta) { fd.append('meta', String(meta).slice(0, 300)); }
  1384.             ['utm_source', 'utm_medium', 'utm_campaign'].forEach(function (k) {
  1385.                 var v = q.get(k); if (v) { fd.append(k, v); }
  1386.             });
  1387.             if (document.referrer) { fd.append('ref', document.referrer.slice(0, 160)); }
  1388.             if (sid) { fd.append('sid', sid); }
  1389.             if (!(navigator.sendBeacon && navigator.sendBeacon(URL_WA, fd))) {
  1390.                 fetch(URL_WA, { method: 'POST', body: fd, keepalive: true }).catch(function () {});
  1391.             }
  1392.         } catch (e) { /* analytics must never break a page */ }
  1393.     }
  1394.     window.hbWa = send;
  1395.     send('page_view');
  1396.     document.addEventListener('click', function (e) {
  1397.         var a = e.target && e.target.closest ? e.target.closest('a,button') : null;
  1398.         if (!a) { return; }
  1399.         var wa = a.getAttribute && a.getAttribute('data-wa');
  1400.         if (wa) { send(wa, a.getAttribute('href') || a.textContent.trim().slice(0, 80)); return; }
  1401.         if (a.className && String(a.className).indexOf('pp-cta') !== -1) {
  1402.             send(window.location.pathname === '/pricing' ? 'pricing_cta' : 'cta_click',
  1403.                 a.getAttribute('href') || a.textContent.trim().slice(0, 80));
  1404.         }
  1405.     }, true);
  1406.     var formStarted = false;
  1407.     document.addEventListener('focusin', function (e) {
  1408.         if (formStarted || !e.target || !e.target.closest) { return; }
  1409.         var f = e.target.closest('form.pp-form');
  1410.         if (f) { formStarted = true; send('form_start', f.getAttribute('data-intent') || ''); }
  1411.     }, true);
  1412. })();
  1413. </script>