src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/pricing.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  5. :root {
  6.     --n-cream:     #F7F5F0;
  7.     --n-cream-2:   #F0EDE5;
  8.     --n-white:     #FFFFFF;
  9.     --n-dark:      #1A1D2E;
  10.     --n-dark-2:    #252840;
  11.     --n-amber:     #C07D2A;
  12.     --n-amber-lt:  #D4954A;
  13.     --n-amber-dim: rgba(192,125,42,.10);
  14.     --n-sage:      #3D6B52;
  15.     --n-sage-dim:  rgba(61,107,82,.09);
  16.     --n-muted:     #6B6E7F;
  17.     --n-muted-2:   #9395A5;
  18.     --n-border:    rgba(26,29,46,.07);
  19.     --n-border-md: rgba(26,29,46,.12);
  20.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  21.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  22.     --n-shadow-lg: 0 20px 64px rgba(26,29,46,.10);
  23.     --n-radius:    14px;
  24.     --n-radius-sm: 8px;
  25.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  26. }
  27. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  28. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  29. a { text-decoration: none; }
  31. /* ── Navbar ─────────────────────────────────────────────────────────────────── */
  32. .navbar {
  33.     background: rgba(247,245,240,.96) !important;
  34.     backdrop-filter: blur(16px) saturate(180%);
  35.     border-bottom: 1px solid var(--n-border) !important;
  36.     box-shadow: none !important;
  37. }
  38. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  39. .navbar .nav-link:hover  { opacity: 1; color: var(--n-dark) !important; }
  40. .navbar .login-btn       { background: var(--n-dark) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; }
  42. /* ── Utilities ──────────────────────────────────────────────────────────────── */
  43. .n-wrap    { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
  44. .n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
  45. .n-eyebrow {
  46.     display: inline-flex; align-items: center; gap: 8px;
  47.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  48.     color: var(--n-amber); margin-bottom: 16px;
  49. }
  50. .n-eyebrow::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  51. .n-center { text-align: center; }
  52. .n-center .n-eyebrow { justify-content: center; }
  54. /* ── Hero ────────────────────────────────────────────────────────────────────── */
  55. .n-pricing-hero {
  56.     background: var(--n-cream); padding: 100px 0 64px;
  57.     border-bottom: 1px solid var(--n-border);
  58. }
  59. .n-pricing-hero h1 {
  60.     font-family: 'Montserrat', sans-serif;
  61.     font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900;
  62.     color: var(--n-dark); margin: 0 0 18px; letter-spacing: -.028em; line-height: 1.07;
  63.     max-width: 680px;
  64. }
  65. .n-pricing-hero h1 em { font-style: italic; color: var(--n-amber); }
  66. .n-pricing-hero .n-lead {
  67.     font-size: 1.05rem; color: var(--n-muted); max-width: 620px; line-height: 1.75; margin-bottom: 28px;
  68. }
  70. /* Trigger note box */
  71. .n-trigger-note {
  72.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.22);
  73.     border-radius: 10px; padding: 18px 22px; margin-top: 8px;
  74.     display: flex; gap: 14px; align-items: flex-start; max-width: 700px;
  75. }
  76. .n-trigger-icon {
  77.     font-family: monospace; font-size: .85rem; font-weight: 600;
  78.     color: var(--n-amber); flex-shrink: 0; margin-top: 1px;
  79. }
  80. .n-trigger-note p { font-size: .9rem; color: var(--n-dark); margin: 0; line-height: 1.6; }
  81. .n-trigger-note strong { font-weight: 700; }
  83. /* ── Pricing cards ───────────────────────────────────────────────────────────── */
  84. .n-pricing-section { background: var(--n-white); padding: 68px 0 56px; }
  85. .n-pricing-grid {
  86.     display: grid;
  87.     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  88.     gap: 20px; max-width: 1100px; margin: 0 auto; padding: 0 28px;
  89.     align-items: stretch;   /* equal height across all cards */
  90. }
  91. .n-pricing-card {
  92.     background: var(--n-cream); border: 1.5px solid var(--n-border-md);
  93.     border-radius: var(--n-radius); padding: 30px 26px;
  94.     display: flex; flex-direction: column; gap: 0;
  95.     height: 100%;           /* fill full row height */
  96.     transition: box-shadow .25s, transform .2s, border-color .2s;
  97.     cursor: pointer; position: relative; overflow: visible;
  98. }
  99. .n-pricing-card:hover {
  100.     border-color: rgba(192,125,42,.35);
  101.     box-shadow: var(--n-shadow-md); transform: translateY(-3px);
  102. }
  103. .n-pricing-card.active-card {
  104.     border-color: var(--n-amber);
  105.     box-shadow: 0 8px 40px rgba(192,125,42,.18);
  106.     transform: translateY(-4px);
  107. }
  108. .n-pricing-card.active-card::before {
  109.     content: '✓ Selected'; position: absolute; top: -12px; right: 18px;
  110.     font-size: .68rem; font-weight: 700; background: var(--n-amber); color: #fff;
  111.     padding: 3px 12px; border-radius: 20px; letter-spacing: .06em; text-transform: uppercase;
  112. }
  113. /* Free plan — forest green accent */
  114. .n-pricing-card.n-plan-free {
  115.     border-color: rgba(61,107,82,.3);
  116.     background: rgba(61,107,82,.03);
  117. }
  118. .n-pricing-card.n-plan-free:hover { border-color: var(--n-sage); box-shadow: 0 8px 32px rgba(61,107,82,.12); }
  119. .n-pricing-card.n-plan-free.active-card { border-color: var(--n-sage); box-shadow: 0 8px 40px rgba(61,107,82,.2); }
  120. .n-pricing-card.n-plan-free.active-card::before { background: var(--n-sage); }
  121. /* Featured (dark) plan */
  122. .n-pricing-card.n-plan-featured {
  123.     background: var(--n-dark); border-color: transparent;
  124.     box-shadow: var(--n-shadow-lg);
  125.     /* no margin-top — equal height grid handles elevation via box-shadow only */
  126. }
  127. .n-pricing-card.n-plan-featured:hover  { border-color: var(--n-amber); transform: translateY(-6px); }
  128. .n-pricing-card.n-plan-featured.active-card { border-color: var(--n-amber); transform: translateY(-8px); box-shadow: 0 16px 56px rgba(192,125,42,.25); }
  129. .n-pricing-card.n-plan-featured .n-pc-name  { color: rgba(255,255,255,.9); }
  130. .n-pricing-card.n-plan-featured .n-pc-badge { color: rgba(255,255,255,.45); }
  131. .n-pricing-card.n-plan-featured .n-pc-price { color: #fff; }
  132. .n-pricing-card.n-plan-featured .n-pc-price small  { color: rgba(255,255,255,.45); }
  133. .n-pricing-card.n-plan-featured .n-pc-price-sec    { color: rgba(255,255,255,.45); }
  134. .n-pricing-card.n-plan-featured .n-pc-billing      { color: rgba(255,255,255,.4); }
  135. .n-pricing-card.n-plan-featured .n-pc-divider      { border-color: rgba(255,255,255,.09); }
  136. .n-pricing-card.n-plan-featured .n-pc-features li  { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.08); }
  137. .n-pricing-card.n-plan-featured .n-pc-features li::before { border-color: var(--n-amber); background: radial-gradient(circle, var(--n-amber) 30%, transparent 32%); }
  138. .n-pricing-card.n-plan-featured .n-pc-btn { background: var(--n-amber); color: #fff; }
  139. .n-pricing-card.n-plan-featured .n-pc-btn:hover { background: var(--n-amber-lt); }
  141. /* plan-tag pill */
  142. .n-plan-tag {
  143.     position: absolute; top: 16px; right: 16px;
  144.     font-family: monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  145.     padding: 4px 10px; border-radius: 100px; font-weight: 700;
  146. }
  147. .n-plan-tag.popular { color: var(--n-amber); background: var(--n-amber-dim); }
  148. .n-plan-tag.free-tag { color: var(--n-sage); background: var(--n-sage-dim); }
  150. .n-pc-name {
  151.     font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 800;
  152.     color: var(--n-dark); margin: 0 0 5px;
  153. }
  154. .n-pc-badge { font-size: .82rem; color: var(--n-muted); margin-bottom: 20px; line-height: 1.45; min-height: 2.4em; }
  155. .n-pc-price {
  156.     font-family: 'Montserrat', sans-serif; font-size: 2.6rem; font-weight: 900;
  157.     color: var(--n-dark); line-height: 1; display: flex; align-items: baseline; gap: 6px;
  158. }
  159. .n-pc-price small  { font-size: .85rem; font-weight: 400; color: var(--n-muted); font-family: var(--n-font); }
  160. .n-pc-price-sec    { font-family: monospace; font-size: .78rem; color: var(--n-muted); margin-top: 6px; }
  161. .n-pc-billing      { font-size: .78rem; color: var(--n-muted); margin-top: 6px; margin-bottom: 20px; }
  162. /* ── Early-adopter pricing ── */
  163. .n-pc-regular-price {
  164.     font-family: monospace; font-size: .78rem; color: var(--n-muted-2);
  165.     text-decoration: line-through; margin-bottom: 4px; opacity: .75;
  166. }
  167. .n-pc-early-badge {
  168.     display: inline-flex; align-items: center; gap: 5px;
  169.     font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  170.     color: var(--n-amber); background: var(--n-amber-dim);
  171.     border: 1px solid rgba(192,125,42,.25); border-radius: 100px;
  172.     padding: 3px 9px; margin-bottom: 8px;
  173. }
  174. .n-pc-early-badge::before { content: '⚡'; font-size: .7rem; }
  175. .n-pc-lock-note {
  176.     font-size: .72rem; color: var(--n-amber); margin-top: 5px; margin-bottom: 18px;
  177.     display: flex; align-items: flex-start; gap: 5px; line-height: 1.45;
  178. }
  179. .n-pc-lock-note::before { content: '🔒'; font-size: .72rem; flex-shrink: 0; }
  180. /* Dark-card overrides */
  181. .n-plan-featured .n-pc-early-badge { color: var(--n-amber); background: rgba(192,125,42,.18); border-color: rgba(192,125,42,.35); }
  182. .n-plan-featured .n-pc-regular-price { color: rgba(255,255,255,.35); }
  183. .n-plan-featured .n-pc-lock-note { color: rgba(192,125,42,.85); }
  184. .n-pc-divider      { border: none; border-top: 1.5px solid var(--n-border); margin: 4px 0 16px; }
  185. .n-pc-features     { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
  186. .n-pc-features li  {
  187.     padding: 9px 0; font-size: .88rem; color: var(--n-muted);
  188.     display: flex; gap: 10px; align-items: flex-start;
  189.     border-bottom: 1px solid var(--n-border); line-height: 1.45;
  190. }
  191. .n-pc-features li:last-child { border-bottom: none; }
  192. .n-pc-features li::before {
  193.     content: ''; width: 13px; height: 13px; border: 1.5px solid var(--n-amber);
  194.     border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  195.     background: radial-gradient(circle, var(--n-amber) 30%, transparent 32%);
  196. }
  197. .n-plan-free .n-pc-features li::before {
  198.     border-color: var(--n-sage);
  199.     background: radial-gradient(circle, var(--n-sage) 30%, transparent 32%);
  200. }
  201. .n-pc-btn {
  202.     margin-top: auto; padding: 12px 20px; width: 100%;
  203.     background: var(--n-dark); color: #fff; border: none;
  204.     border-radius: var(--n-radius-sm); font-family: 'DM Sans', sans-serif;
  205.     font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .2s; text-align: center;
  206. }
  207. .n-pc-btn:hover { background: var(--n-amber); }
  208. .n-plan-free .n-pc-btn { background: var(--n-sage); }
  209. .n-plan-free .n-pc-btn:hover { background: #4f8866; }
  211. /* ── Plan Summary Cart ───────────────────────────────────────────────────────── */
  212. .n-plan-summary-wrap { max-width: 560px; margin: 52px auto 0; padding: 0 24px; display: none; }
  213. .n-plan-summary-wrap.visible { display: block; background: #f7f5f0; padding-bottom: 72px; }
  214. .n-plan-summary {
  215.     border: 1.5px solid var(--n-border-md); border-radius: 16px;
  216.     padding: 28px; background: #fff; box-shadow: var(--n-shadow-md);
  217. }
  218. .n-ps-header {
  219.     display: flex; align-items: center; justify-content: space-between;
  220.     border-bottom: 1.5px solid var(--n-border); padding-bottom: 14px; margin-bottom: 20px;
  221. }
  222. .n-ps-header h4 { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--n-dark); margin: 0; }
  223. .n-ps-name  { font-size: 1.15rem; font-weight: 700; color: var(--n-dark); }
  224. .n-ps-price { font-size: 1rem; font-weight: 600; color: var(--n-amber); margin-top: 4px; }
  225. .n-ps-row   { display: flex; justify-content: space-between; margin-bottom: 18px; }
  226. .n-ps-col small    { font-size: .78rem; color: var(--n-muted); display: block; margin-bottom: 4px; }
  227. .n-ps-col strong   { font-size: .95rem; color: var(--n-dark); }
  228. .n-ps-label        { font-size: .78rem; color: var(--n-muted); margin: 0 0 8px; }
  229. .n-counter-row     { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  230. .n-counter         { flex: 1; min-width: 140px; }
  231. .n-counter label   { display: block; font-size: .78rem; color: var(--n-muted); margin-bottom: 6px; }
  232. .n-counter-ctrl    {
  233.     display: flex; align-items: center; justify-content: space-between;
  234.     border: 1.5px solid var(--n-border-md); border-radius: 8px; padding: 6px 12px; gap: 10px;
  235. }
  236. .n-counter-ctrl button { width: 32px; height: 32px; border: none; background: var(--n-cream); border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background .15s; }
  237. .n-counter-ctrl button:hover    { background: #e6e3db; }
  238. .n-counter-ctrl button:disabled { opacity: .4; cursor: not-allowed; }
  239. .n-counter-ctrl span { font-weight: 700; font-size: 1rem; color: var(--n-dark); flex: 1; text-align: center; }
  240. .n-ps-total-row { display: flex; justify-content: space-between; align-items: center; border-top: 1.5px solid var(--n-border); padding-top: 16px; margin-top: 4px; }
  241. .n-ps-total-label { font-weight: 600; color: var(--n-dark); }
  242. .n-ps-total-val   { font-size: 1.2rem; font-weight: 800; color: var(--n-amber); }
  243. .n-pay-btn { width: 100%; margin-top: 18px; padding: 13px; background: var(--n-amber); color: #fff; border: none; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s; }
  244. .n-pay-btn:hover    { background: #a86d24; transform: translateY(-1px); }
  245. .n-pay-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
  247. /* ── Calculator section ──────────────────────────────────────────────────────── */
  248. .n-calc-section { padding: 0     0 0; }
  249. .n-calc-box {
  250.     padding: 48px; background: var(--n-white);
  251.     border: 1px solid var(--n-border-md); border-radius: 16px;
  252. }
  253. .n-calc-head { max-width: 660px; }
  254. .n-calc-head h2 {
  255.     font-family: 'Montserrat', sans-serif;
  256.     font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 900;
  257.     color: var(--n-dark); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 14px;
  258. }
  259. .n-calc-head h2 em { font-style: italic; color: var(--n-amber); }
  260. .n-calc-head p { color: var(--n-muted); font-size: .95rem; line-height: 1.72; }
  261. .n-calc-toggle-row {
  262.     margin-top: 24px; display: flex; align-items: center; gap: 14px;
  263. }
  264. .n-calc-toggle-btn {
  265.     display: inline-flex; align-items: center; gap: 7px;
  266.     padding: 10px 22px; background: var(--n-dark); color: #fff;
  267.     border: none; border-radius: var(--n-radius-sm);
  268.     font-family: 'DM Sans', sans-serif; font-size: .88rem; font-weight: 600;
  269.     cursor: pointer; transition: background .2s;
  270. }
  271. .n-calc-toggle-btn:hover { background: var(--n-amber); }
  272. .n-calc-toggle-btn .arrow { transition: transform .25s; display: inline-block; }
  273. .n-calc-toggle-btn.open .arrow { transform: rotate(180deg); }
  274. .n-calc-body { display: block !important; overflow: visible !important; opacity: 1 !important; max-height: none !important; visibility: visible !important; }
  275. .n-calc-table-wrap { overflow-x: auto; margin-top: 32px; }
  276. .n-calc-table {
  277.     width: 100%; border-collapse: collapse; min-width: 600px;
  278. }
  279. .n-calc-table thead th {
  280.     text-align: left; padding: 13px 16px;
  281.     background: var(--n-cream-2); font-family: monospace; font-weight: 500;
  282.     font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  283.     color: var(--n-muted); border-bottom: 1px solid var(--n-border-md);
  284. }
  285. .n-calc-table thead th:not(:first-child) { text-align: right; }
  286. .n-calc-table tbody tr { border-bottom: 1px solid var(--n-border); }
  287. .n-calc-table tbody tr:last-child { border-bottom: none; }
  288. .n-calc-table td { padding: 14px 16px; font-size: .93rem; color: var(--n-muted); }
  289. .n-calc-table td:not(:first-child) { text-align: right; }
  290. .n-calc-table td.n-total   { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 900; color: var(--n-dark); }
  291. .n-calc-table td.n-blended { font-family: monospace; font-size: .82rem; color: var(--n-amber); font-weight: 700; }
  292. .n-admin-explainer {
  293.     margin-top: 24px; padding: 18px 22px; background: var(--n-cream);
  294.     border: 1px solid var(--n-border-md); border-radius: 10px;
  295.     display: flex; gap: 16px; align-items: flex-start;
  296. }
  297. .n-admin-explainer .marker {
  298.     font-family: monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  299.     color: var(--n-amber); flex-shrink: 0; padding-top: 1px; font-weight: 700; white-space: nowrap;
  300. }
  301. .n-admin-explainer p { font-size: .88rem; color: var(--n-muted); margin: 0; line-height: 1.65; }
  302. .n-admin-explainer strong { color: var(--n-dark); font-weight: 600; }
  304. /* ── Comparison table ────────────────────────────────────────────────────────── */
  305. .n-compare-section { padding: 0 0 80px; }
  306. .n-compare-head { margin-bottom: 28px; }
  307. .n-compare-head h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; }
  308. .n-compare-wrap {
  309.     border: 1px solid var(--n-border-md); border-radius: 14px;
  310.     overflow-x: auto;   /* scroll on small screens, no height collapse */
  311.     background: #ffffff;
  312. }
  313. /* Force table to render — project-wide CSS may override generic `table` selectors */
  314. .n-cmp-table {
  315.     display: table !important;
  316.     width: 100% !important;
  317.     border-collapse: collapse !important;
  318.     table-layout: auto !important;
  319.     visibility: visible !important;
  320.     min-width: 600px;
  321. }
  322. .n-cmp-table thead  { display: table-header-group !important; visibility: visible !important; }
  323. .n-cmp-table tbody  { display: table-row-group    !important; visibility: visible !important; }
  324. .n-cmp-table tr     { display: table-row          !important; visibility: visible !important; border-bottom: 1px solid rgba(26,29,46,.07); }
  325. .n-cmp-table tr:last-child { border-bottom: none !important; }
  326. .n-cmp-table th,
  327. .n-cmp-table td     { display: table-cell         !important; visibility: visible !important; }
  329. /* thead cells */
  330. .n-cmp-table thead th {
  331.     text-align: left !important; padding: 18px 22px !important;
  332.     background: #F0EDE5 !important; font-family: var(--n-font) !important;
  333.     font-weight: 700 !important; font-size: .9rem !important; color: #1A1D2E !important;
  334.     border-bottom: 1px solid rgba(26,29,46,.12) !important;
  335.     white-space: nowrap;
  336. }
  337. .n-cmp-table thead th:not(:first-child) { text-align: center !important; }
  339. /* plan-name+price header row */
  340. .n-cmp-table thead tr.n-plan-row th {
  341.     background: #ffffff !important; padding: 14px 22px 16px !important;
  342.     border-bottom: 2px solid rgba(26,29,46,.12) !important;
  343. }
  344. .n-cmp-table thead tr.n-plan-row th:first-child { background: #F0EDE5 !important; }
  346. /* section header rows in tbody */
  347. .n-cmp-table tbody tr.n-sh td {
  348.     background: #F7F5F0 !important; font-family: monospace !important;
  349.     font-size: .72rem !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  350.     color: #C07D2A !important; padding: 12px 22px !important; font-weight: 700 !important;
  351.     border-bottom: 1px solid rgba(26,29,46,.12) !important;
  352. }
  353. /* regular tbody cells */
  354. .n-cmp-table tbody td {
  355.     padding: 13px 22px !important; font-size: .88rem !important; color: #6B6E7F !important;
  356. }
  357. .n-cmp-table tbody td:not(:first-child) { text-align: center !important; color: #1A1D2E !important; font-size: .9rem !important; }
  359. /* value indicators */
  360. .n-cmp-table .n-check   { color: #3D6B52 !important; font-weight: 700 !important; font-size: 1rem !important; }
  361. .n-cmp-table .n-dash    { color: #9395A5 !important; }
  362. .n-cmp-table .n-partial { color: #C07D2A !important; font-size: .82rem !important; font-weight: 600 !important; }
  364. /* Toggle button */
  365. .n-table-toggle { text-align: center; margin-bottom: 28px; }
  366. .n-table-toggle-btn {
  367.     padding: 11px 30px; background: var(--n-dark); color: #fff;
  368.     border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif;
  369.     font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s;
  370. }
  371. .n-table-toggle-btn:hover { background: var(--n-amber); }
  373. /* plan header cells content */
  374. .n-cmp-plan-name  { font-family: 'Montserrat', sans-serif; font-size: .88rem; font-weight: 800; color: #1A1D2E; }
  375. .n-cmp-plan-price { font-family: 'Montserrat', sans-serif; font-size: 1.35rem; font-weight: 900; color: #C07D2A; line-height: 1.1; margin: 3px 0; }
  376. .n-cmp-plan-sub   { font-size: .72rem; color: #9395A5; font-family: monospace; }
  378. /* ── FAQ ─────────────────────────────────────────────────────────────────────── */
  379. .n-faq-section { padding: 72px 0; border-top: 1px solid var(--n-border); }
  380. .n-faq-layout  { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
  381. .n-faq-sidebar h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; margin-bottom: 12px; }
  382. .n-faq-sidebar h2 em { font-style: italic; color: var(--n-amber); }
  383. .n-faq-sidebar p { font-size: .9rem; color: var(--n-muted); line-height: 1.65; }
  384. .n-faq-sidebar a { color: var(--n-amber); border-bottom: 1px solid rgba(192,125,42,.4); }
  385. .n-faq-list    { display: flex; flex-direction: column; gap: 0; }
  386. .n-faq-item    { border-bottom: 1px solid var(--n-border-md); }
  387. details.n-faq-item summary {
  388.     display: flex; justify-content: space-between; align-items: center;
  389.     padding: 18px 0; cursor: pointer; gap: 16px;
  390.     font-size: .93rem; font-weight: 600; color: var(--n-dark);
  391.     list-style: none; user-select: none;
  392. }
  393. details.n-faq-item summary::-webkit-details-marker { display: none; }
  394. .n-faq-icon {
  395.     width: 22px; height: 22px; border-radius: 50%;
  396.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  397.     display: flex; align-items: center; justify-content: center;
  398.     font-size: 14px; color: var(--n-amber); flex-shrink: 0;
  399.     transition: transform .2s;
  400. }
  401. details[open].n-faq-item .n-faq-icon { transform: rotate(45deg); }
  402. .n-faq-answer { padding: 0 0 18px; font-size: .88rem; color: var(--n-muted); line-height: 1.7; }
  404. /* ── CTA ─────────────────────────────────────────────────────────────────────── */
  405. .n-cta-final { padding: 96px 0; text-align: center; background: var(--n-cream-2); border-top: 1px solid var(--n-border); }
  406. .n-cta-final h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; color: var(--n-dark); letter-spacing: -.025em; margin-bottom: 16px; }
  407. .n-cta-final h2 em { font-style: italic; color: var(--n-amber); }
  408. .n-cta-final p { max-width: 52ch; margin: 0 auto 32px; color: var(--n-muted); font-size: 1rem; line-height: 1.7; }
  409. .n-btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; background: var(--n-dark); color: #fff; border: none; border-radius: var(--n-radius-sm); font-size: .92rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .18s, transform .18s; font-family: var(--n-font); }
  410. .n-btn-primary:hover { background: var(--n-amber); color: #fff; transform: translateY(-1px); }
  411. .n-btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; background: transparent; color: var(--n-dark); border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm); font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--n-font); }
  412. .n-btn-secondary:hover { border-color: var(--n-dark); transform: translateY(-1px); color: var(--n-dark); }
  414. /* ── Billing cycle toggle buttons ───────────────────────────────────────────── */
  415. .n-cycle-btn {
  416.     flex: 1; padding: 8px 10px; border: 1.5px solid var(--n-border-md);
  417.     border-radius: 8px; background: var(--n-cream); color: var(--n-muted);
  418.     font-family: var(--n-font); font-size: .82rem; font-weight: 600;
  419.     cursor: pointer; transition: all .18s; line-height: 1.3;
  420. }
  421. .n-cycle-btn.active {
  422.     background: var(--n-dark); color: #fff; border-color: var(--n-dark);
  423. }
  424. .n-cycle-btn:hover:not(.active) { border-color: var(--n-amber); color: var(--n-amber); }
  426. /* ── Three-column counter row ────────────────────────────────────────────────── */
  427. .n-counter-row { flex-wrap: wrap; }
  428. #mlCounterWrap  { min-width: 100%; margin-top: 8px; }
  429. @media (min-width: 420px) { #mlCounterWrap { min-width: unset; flex: 1; margin-top: 0; } }
  431. /* ── Scroll reveal ───────────────────────────────────────────────────────────── */
  432. .reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
  433. .reveal.visible { opacity: 1; transform: none; }
  435. /* ── Responsive ──────────────────────────────────────────────────────────────── */
  436. @media (max-width: 980px) {
  437.     .n-calc-box { padding: 28px 20px; }
  438.     .n-faq-layout { grid-template-columns: 1fr; gap: 32px; }
  439. }
  440. @media (max-width: 680px) {
  441.     .n-pricing-grid { grid-template-columns: 1fr; }
  442.     .n-pricing-card.n-plan-featured { margin-top: 0; }
  443. }
  444. </style>
  446. <!-- ── HERO ─────────────────────────────────────────────────────────────────── -->
  447. <section class="n-pricing-hero">
  448.     <div class="n-wrap">
  449.         <span class="n-eyebrow trn" data-trn-key="_PRC_EYEBROW_">Pricing</span>
  450.         <h1><span class="trn" data-trn-key="_H_PRICING_H2_">Software subscription pricing for</span> <em class="n-em trn" data-trn-key="_H_PRICING_H2_EM_">industrial operations.</em></h1>
  451.         <p class="n-lead trn" data-trn-key="_PRC_LEAD_">Start free for up to 50 users. HoneyBee software runs your core business workflows. Edge+, IoT, hardware, and local AI deployments are scoped and quoted separately per project.</p>
  452.         <div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;margin-bottom:28px;">
  453.             <div style="flex:1;min-width:240px;background:rgba(61,107,82,.06);border:1px solid rgba(61,107,82,.2);border-radius:10px;padding:18px 22px;">
  454.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3D6B52;margin-bottom:6px">Option 1</div>
  455.                 <div style="font-weight:700;color:#1A1D2E;margin-bottom:4px;font-size:.95rem">Software subscription</div>
  456.                 <div style="font-size:.85rem;color:#6B6E7F;line-height:1.6">Start free — upgrade to Team when you're ready. No hardware required.</div>
  457.             </div>
  458.             <div style="flex:1;min-width:240px;background:rgba(192,125,42,.06);border:1px solid rgba(192,125,42,.2);border-radius:10px;padding:18px 22px;">
  459.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C07D2A;margin-bottom:6px">Option 2</div>
  460.                 <div style="font-weight:700;color:#1A1D2E;margin-bottom:4px;font-size:.95rem">Software + Edge+ deployment</div>
  461.                 <div style="font-size:.85rem;color:#6B6E7F;line-height:1.6">Add site data, IoT, and local infrastructure. Scoped and quoted per project separately.</div>
  462.             </div>
  463.         </div>
  464.         <div class="n-trigger-note">
  465.             <span class="n-trigger-icon">ⓘ</span>
  466.             <p>
  467.                 <strong class="trn" data-trn-key="_PRC_TRIGGER_TITLE_">The conversion trigger.</strong>
  468.                 <span class="trn" data-trn-key="_PRC_TRIGGER_DESC_">The first time any single user's storage passes 10 MB, the whole workspace moves to the Team plan. No surprise invoices — we notify you in advance, and you can delete data or upgrade on your terms.</span>
  469.                 <br><br>
  470.                 <strong style="color:var(--n-amber)">⚡ Early-adopter rate:</strong>
  471.                 <span>Any Free workspace that converts — voluntarily or via the storage trigger — is locked in at the launch price of <strong>€7.99/user · €19.99/admin</strong> permanently, even after the launch window closes.</span>
  472.             </p>
  473.         </div>
  474.     </div>
  475. </section>
  477. <!-- ── PRICING CARDS ─────────────────────────────────────────────────────────── -->
  478. <section class="n-pricing-section">
  479.     <div class="n-pricing-grid">
  480.         {% for packageDetail in packageDetails %}{% if packageDetail.hidden is not defined or not packageDetail.hidden %}
  481.             <div class="n-pricing-card pricing-card
  482.                 {% if packageDetail.freeFlag == '1' %}n-plan-free
  483.                 {% elseif packageDetail.featured is defined and packageDetail.featured %}n-plan-featured
  484.                 {% endif %}">
  486.                 {% if packageDetail.freeFlag == '1' %}
  487.                     <span class="n-plan-tag free-tag trn" data-trn-key="_H_PLAN_FREE_TAG_">Free forever*</span>
  488.                 {% elseif packageDetail.tag is defined and packageDetail.tag %}
  489.                     <span class="n-plan-tag popular">{{ packageDetail.tag }}</span>
  490.                 {% endif %}
  492.                 <p class="n-pc-name">{{ packageDetail.packageName }}</p>
  493.                 <p class="n-pc-badge">{{ packageDetail.description is defined and packageDetail.description ? packageDetail.description : packageDetail.badge }}</p>
  495.                 {% if packageDetail.freeFlag == '1' %}
  496.                     <div class="n-pc-price">€0 <small>/ forever</small></div>
  497.                     <div class="n-pc-price-sec">10 MB storage per user · up to {{ packageDetail.maxUser }} users</div>
  498.                     <div class="n-pc-billing">*Upgrades automatically once any user crosses 10 MB</div>
  499.                 {% elseif packageDetail.contactSalesFlag == '1' %}
  500.                     <div class="n-pc-price" style="font-size:2rem;">Custom</div>
  501.                     <div class="n-pc-price-sec">Quote based on scope</div>
  502.                     <div class="n-pc-billing">Includes development hours for your specific workflows</div>
  503.                 {% else %}
  504.                     {% if packageDetail.earlyAdopter is defined and packageDetail.earlyAdopter %}
  505.                         {# ── Early-adopter / launch offer pricing ── #}
  506.                         <div class="n-pc-early-badge">Launch offer</div>
  507.                         <div class="n-pc-regular-price">
  508.                             €{{ packageDetail.euRegularUserPrice.monthlyPrice }}/user · €{{ packageDetail.euRegularAdminPrice.monthlyPrice }}/admin
  509.                         </div>
  510.                         <div class="n-pc-price">
  511.                             €{{ packageDetail.euPerUserPrice.monthlyPrice }}
  512.                             <small>/ user / month</small>
  513.                         </div>
  514.                         <div class="n-pc-price-sec">+ €{{ packageDetail.euPerAdminPrice.monthlyPrice }} / admin / month</div>
  515.                         <div class="n-pc-lock-note">{{ packageDetail.earlyAdopterNote }}</div>
  516.                     {% else %}
  517.                         <div class="n-pc-price">
  518.                             €{{ packageDetail.euPerUserPrice.monthlyPrice }}
  519.                             <small>/ user / month</small>
  520.                         </div>
  521.                         <div class="n-pc-price-sec">+ €{{ packageDetail.euPerAdminPrice.monthlyPrice }} / admin / month</div>
  522.                         <div class="n-pc-billing">Structure: 4 users + 1 admin per block · unlimited storage</div>
  523.                     {% endif %}
  524.                 {% endif %}
  526.                 <hr class="n-pc-divider divider-first">
  527.                 <ul class="n-pc-features">
  528.                     {% for data in packageDetail.features %}
  529.                         <li>{{ data.feature }}</li>
  530.                     {% endfor %}
  531.                 </ul>
  533.                 {% if packageDetail.contactSalesFlag == '1' %}
  534.                     <button class="n-pc-btn btn btn-primary trn" style="background:var(--n-muted-2);color:#fff;" data-trn-key="_H_PLAN_CONTACT_">Contact Sales</button>
  535.                 {% elseif packageDetail.freeFlag == '1' %}
  536.                     <button class="n-pc-btn btn btn-primary trn" data-trn-key="_H_PLAN_START_FREE_">Start free</button>
  537.                 {% else %}
  538.                     <button class="n-pc-btn btn btn-primary">{{ packageDetail.planShortName }}</button>
  539.                 {% endif %}
  541.                 {# ── Hidden data fields (JS hooks — DO NOT REMOVE OR RENAME) ── #}
  542.                 <input type="hidden" class="maxAdminUser"    value="{{ packageDetail.maxAdmin }}">
  543.                 <input type="hidden" class="minAdminUser"    value="{{ packageDetail.minAdmin }}">
  544.                 <input type="hidden" class="maxUser"         value="{{ packageDetail.maxUser }}">
  545.                 <input type="hidden" class="minUser"         value="{{ packageDetail.minUser }}">
  546.                 <input type="hidden" class="perUserPrice"    value="{{ packageDetail.perUserPrice.monthlyPrice }}">
  547.                 <input type="hidden" class="perAdminPrice"   value="{{ packageDetail.perAdminPrice.monthlyPrice }}">
  548.                 <input type="hidden" class="contactSales"    value="{{ packageDetail.contactSalesFlag }}">
  549.                 <input type="hidden" class="packageId"       value="{{ packageDetail.id }}">
  550.                 {# EU price fields used by cart JS #}
  551.                 <input type="hidden" class="euBasePrice"       value="{% if packageDetail.euBasePrice is defined %}{{ packageDetail.euBasePrice.monthlyPrice }}{% else %}{{ packageDetail.basePrice.monthlyPrice }}{% endif %}">
  552.                 <input type="hidden" class="euPerUserPrice"   value="{% if packageDetail.euPerUserPrice is defined %}{{ packageDetail.euPerUserPrice.monthlyPrice }}{% else %}{{ packageDetail.perUserPrice.monthlyPrice }}{% endif %}">
  553.                 <input type="hidden" class="euPerAdminPrice"  value="{% if packageDetail.euPerAdminPrice is defined %}{{ packageDetail.euPerAdminPrice.monthlyPrice }}{% else %}{{ packageDetail.perAdminPrice.monthlyPrice }}{% endif %}">
  554.                 <input type="hidden" class="euPerMlUserPrice" value="{% if packageDetail.euPerMlUserPrice is defined %}{{ packageDetail.euPerMlUserPrice.monthlyPrice }}{% else %}0{% endif %}">
  555.                 <input type="hidden" class="minMlUser"        value="{{ packageDetail.minMlUser is defined ? packageDetail.minMlUser : '0' }}">
  556.                 <input type="hidden" class="maxMlUser"        value="{{ packageDetail.maxMlUser is defined ? packageDetail.maxMlUser : '0' }}">
  557.                 <input type="hidden" class="usersPerAdminBlock" value="{{ packageDetail.usersPerAdminBlock is defined ? packageDetail.usersPerAdminBlock : '0' }}">
  558.                 {% if packageDetail.earlyAdopter is defined and packageDetail.earlyAdopter %}
  559.                 <input type="hidden" class="earlyAdopterFlag" value="1">
  560.                 {% endif %}
  561.             </div>
  562.         {% endif %}{% endfor %}
  563.     </div>
  565.     {# Hardware note — sits inside the white section so no cream seam #}
  566.     <div class="n-wrap" style="padding-top:32px;padding-bottom:0">
  567.         <div style="background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.22);border-radius:12px;padding:28px 32px;max-width:900px;margin:0 auto;">
  568.             <div style="font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C07D2A;margin-bottom:10px">Industrial &amp; Hardware Deployments</div>
  569.             <p style="font-family:'DM Sans',sans-serif;font-size:.95rem;color:#6B6E7F;line-height:1.75;margin:0 0 14px">
  570.                 Edge+, IoT, and infrastructure deployments are scoped and quoted separately per project — not included in the software subscription.
  571.             </p>
  572.             <ul style="font-family:'DM Sans',sans-serif;font-size:.9rem;color:#6B6E7F;line-height:1.75;margin:0;padding-left:20px;">
  573.                 <li>Edge+ data acquisition devices and gateways</li>
  574.                 <li>Industrial meters, sensors, and PLC integrations</li>
  575.                 <li>Local server and GPU infrastructure for on-premise AI/ML</li>
  576.                 <li>Network setup, commissioning, and site deployment</li>
  577.                 <li>Payment by bank transfer via formal quotation and invoice</li>
  578.             </ul>
  579.         </div>
  580.         <div class="n-wrap" style="padding-top:28px;padding-bottom:0">
  581.             <div style="max-width:900px;margin:0 auto;">
  582.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C07D2A;margin-bottom:14px">Edge+ Deployment Types</div>
  583.                 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;">
  584.                     <div style="background:#fff;border:1px solid rgba(26,29,46,.08);border-radius:10px;padding:16px 18px;">
  585.                         <div style="font-weight:700;font-size:.88rem;color:#1A1D2E;margin-bottom:4px">Energy monitoring &amp; billing</div>
  586.                         <div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">Meters and sensors connected to billing, O&amp;M, and reporting workflows.</div>
  587.                     </div>
  588.                     <div style="background:#fff;border:1px solid rgba(26,29,46,.08);border-radius:10px;padding:16px 18px;">
  589.                         <div style="font-weight:700;font-size:.88rem;color:#1A1D2E;margin-bottom:4px">Site operations</div>
  590.                         <div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">PLC, SCADA, and production data connected to the HoneyBee platform.</div>
  591.                     </div>
  592.                     <div style="background:#fff;border:1px solid rgba(26,29,46,.08);border-radius:10px;padding:16px 18px;">
  593.                         <div style="font-weight:700;font-size:.88rem;color:#1A1D2E;margin-bottom:4px">Mobile &amp; remote assets</div>
  594.                         <div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">GPS, cellular, and satellite-connected assets feeding operational data.</div>
  595.                     </div>
  596.                     <div style="background:#fff;border:1px solid rgba(26,29,46,.08);border-radius:10px;padding:16px 18px;">
  597.                         <div style="font-weight:700;font-size:.88rem;color:#1A1D2E;margin-bottom:4px">Multi-site industrial</div>
  598.                         <div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">Warehouse, factory, and process monitoring across distributed locations.</div>
  599.                     </div>
  600.                     <div style="background:#fff;border:1px solid rgba(26,29,46,.08);border-radius:10px;padding:16px 18px;">
  601.                         <div style="font-weight:700;font-size:.88rem;color:#1A1D2E;margin-bottom:4px">Local AI/ML inference</div>
  602.                         <div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">Private GPU server and on-premise LLM — nothing leaves your building.</div>
  603.                     </div>
  604.                 </div>
  605.             </div>
  606.         </div>
  607.     </div>
  608. </section>
  610. <!-- ── PLAN SUMMARY CART ─────────────────────────────────────────────────────── -->
  611. <div id="selectedPlanSummary" class="n-plan-summary-wrap">
  612.     <div class="n-plan-summary">
  613.         <div class="n-ps-header"><h4>Configure Your Plan</h4></div>
  614.         <div id="selectedPlanName"  class="n-ps-name"></div>
  615.         <div id="selectedPlanPrice" class="n-ps-price"></div>
  617.         <div class="n-ps-row" style="margin-top:20px;">
  618.             <div class="n-ps-col"><small>Min Users</small><strong id="selectedPlanMinUser">—</strong></div>
  619.             <div class="n-ps-col"><small>Max Users</small><strong id="selectedPlanMaxUser">—</strong></div>
  620.         </div>
  621.         <div class="n-ps-row">
  622.             <div class="n-ps-col"><small>Min Admins</small><strong id="selectedPlanMinAdminUser">—</strong></div>
  623.             <div class="n-ps-col"><small>Max Admins</small><strong id="selectedPlanAdminUser">—</strong></div>
  624.         </div>
  626.         <p class="n-ps-label">Company</p>
  627.         <div style="margin-bottom:18px;" id="companyFieldWrap">
  628.             {% if session[UserConstants.USER_ID] is defined and companies is defined and companies|length > 0 %}
  629.                 {# ── Logged in with companies: standard selector ── #}
  630.                 <select id="companySelect" class="form-control" style="border-radius:8px;border:1.5px solid var(--n-border-md);font-family:'DM Sans',sans-serif;">
  631.                     <option value="0">Select a company</option>
  632.                     {% for data in companies %}
  633.                     <option value="{{ data.appId }}">{{ data.name }}</option>
  634.                     {% endfor %}
  635.                 </select>
  636.             {% elseif session[UserConstants.USER_ID] is defined %}
  637.                 {# ── Logged in but no companies yet ── #}
  638.                 <input type="text" id="companyNameInput"
  639.                     placeholder="Enter your company name"
  640.                     style="width:100%;padding:10px 14px;border:1.5px solid var(--n-border-md);border-radius:8px;font-size:.9rem;font-family:'DM Sans',sans-serif;background:var(--n-cream);color:var(--n-dark);outline:none;box-sizing:border-box;transition:border-color .2s"
  641.                     oninput="this.style.borderColor='#C07D2A'">
  642.                 <input type="hidden" id="guestMode" value="new_company">
  643.                 <p style="font-size:.78rem;color:var(--n-muted);margin-top:6px;line-height:1.5">
  644.                     No workspace found. Enter a name and we'll set it up as you proceed.
  645.                     <a href="{{ url('create_company') }}" style="color:var(--n-amber);font-weight:600">Create workspace first →</a>
  646.                 </p>
  647.             {% else %}
  648.                 {# ── Guest / not logged in ── #}
  649.                 <input type="text" id="companyNameInput"
  650.                     placeholder="Enter your company name"
  651.                     style="width:100%;padding:10px 14px;border:1.5px solid var(--n-border-md);border-radius:8px;font-size:.9rem;font-family:'DM Sans',sans-serif;background:var(--n-cream);color:var(--n-dark);outline:none;box-sizing:border-box;transition:border-color .2s"
  652.                     oninput="this.style.borderColor='#C07D2A'">
  653.                 <input type="hidden" id="guestMode" value="guest">
  654.                 <p style="font-size:.78rem;color:var(--n-muted);margin-top:6px;line-height:1.5;display:flex;align-items:flex-start;gap:5px">
  655.                     <i class="fa-solid fa-lock" style="color:var(--n-amber);font-size:10px;margin-top:2px;flex-shrink:0"></i>
  656.                     Your plan selection will be saved. You'll be prompted to sign in or create an account to continue.
  657.                 </p>
  658.             {% endif %}
  659.         </div>
  661.         {# ── Billing cycle toggle ── #}
  662.         <div id="billingCycleWrap" style="display:none;margin-bottom:18px;">
  663.             <p class="n-ps-label" style="margin-bottom:8px;">Billing Cycle</p>
  664.             <div style="display:flex;gap:8px;">
  665.                 <button type="button" id="cycleMonthly" class="n-cycle-btn active">Monthly</button>
  666.                 <button type="button" id="cycleYearly"  class="n-cycle-btn">Yearly <span style="font-size:.7rem;color:var(--n-sage);font-weight:700;">−20%</span></button>
  667.             </div>
  668.         </div>
  670.         <div class="n-counter-row">
  671.             <div class="n-counter">
  672.                 <label>Select Users</label>
  673.                 <div class="n-counter-ctrl">
  674.                     <button type="button" id="decreaseUser">−</button>
  675.                     <span id="userCount">1</span>
  676.                     <button type="button" id="increaseUser">+</button>
  677.                 </div>
  678.             </div>
  679.             <div class="n-counter">
  680.                 <label>Select Admins</label>
  681.                 <div class="n-counter-ctrl">
  682.                     <button type="button" id="decreaseAdmin">−</button>
  683.                     <span id="adminCount">1</span>
  684.                     <button type="button" id="increaseAdmin">+</button>
  685.                 </div>
  686.             </div>
  687.             <div class="n-counter" id="mlCounterWrap" style="display:none;">
  688.                 <label>ML / AI Users</label>
  689.                 <div class="n-counter-ctrl">
  690.                     <button type="button" id="decreaseMl">−</button>
  691.                     <span id="mlCount">0</span>
  692.                     <button type="button" id="increaseMl">+</button>
  693.                 </div>
  694.             </div>
  695.         </div>
  697.         {# ── Admin ratio notice ── #}
  698.         <div id="adminRatioNotice" style="display:none;font-size:.78rem;color:var(--n-amber);margin-bottom:12px;padding:8px 12px;background:var(--n-amber-dim);border:1px solid rgba(192,125,42,.2);border-radius:6px;line-height:1.5;">
  699.             <span id="adminRatioText"></span>
  700.         </div>
  702.         <div class="n-ps-total-row">
  703.             <span class="n-ps-total-label" id="totalCycleLabel">Monthly Total</span>
  704.             <span id="cartTotal" class="n-ps-total-val">€0.00</span>
  705.         </div>
  706.         <button id="payButton" class="n-pay-btn">Proceed to SaaS Subscription</button>
  707.     </div>
  708. </div>
  710. <!-- ── CALCULATOR / WORKED EXAMPLES ─────────────────────────────────────────── -->
  711. <section class="n-calc-section">
  712.     <div class="n-wrap">
  713.         <div class="n-calc-box">
  714.             <div class="n-calc-head">
  715.                 <span class="n-eyebrow">Worked examples</span>
  716.                 <h2>What your <em>team</em><br>actually pays.</h2>
  717.                 <p>Because the Team plan uses a user + admin structure, here's what real teams pay once they cross the free-tier threshold. The blended rate is the total divided by headcount — we show it so you can compare with flat per-user competitors.</p>
  718.             </div>
  720.             <div class="n-calc-body open" id="calcBody">
  721.                 <div class="n-calc-table-wrap">
  722.                     <table class="n-calc-table worked_example_table">
  723.                         <thead>
  724.                             <tr>
  725.                                 <th>Team size</th>
  726.                                 <th>Users</th>
  727.                                 <th>Admins</th>
  728.                                 <th>User cost</th>
  729.                                 <th>Admin cost</th>
  730.                                 <th>Monthly total</th>
  731.                                 <th>Blended rate</th>
  732.                             </tr>
  733.                         </thead>
  734.                         <tbody id="workedExampleTbody">
  735.                             {# rows injected by buildWorkedExamples() below #}
  736.                         </tbody>
  737.                     </table>
  738.                 </div>
  739.                 <div class="n-admin-explainer">
  740.                     <span class="marker">Why admins?</span>
  741.                     <p id="adminExplainerText">Admins have write access to configuration, approvals, and cross-entity data — the roles that carry operational risk. The 4-users-to-1-admin ratio reflects what actually works in mid-market businesses: one approver per small team, not a flat hierarchy where everyone is equal. Blended rate at the 10-person tier: <strong id="blendedRateDisplay">€10.39/person</strong>.</p>
  742.                 </div>
  744.                 <script>
  745.                 (function () {
  746.                     /* ── 1. Read user/admin prices from the paid plan card ────────── */
  747.                     var userPrice  = null;
  748.                     var adminPrice = null;
  750.                     document.querySelectorAll('.n-pricing-card').forEach(function (card) {
  751.                         var isSales = card.querySelector('.contactSales');
  752.                         var isFree  = card.querySelector('.euPerUserPrice');
  753.                         if (isSales && isSales.value === '1') return;          // skip enterprise
  754.                         if (!isFree) return;                                    // guard
  755.                         var up = parseFloat(isFree.value);
  756.                         var ap = card.querySelector('.euPerAdminPrice') ? parseFloat(card.querySelector('.euPerAdminPrice').value) : 0;
  757.                         if (up > 0 && userPrice === null) {                    // first paid plan wins
  758.                             userPrice  = up;
  759.                             adminPrice = ap;
  760.                         }
  761.                     });
  763.                     /* If no paid plan found in DOM, table will not render */
  764.                     if (userPrice  === null || adminPrice === null) return;
  766.                     /* ── 2. Define team-size scenarios (4-user : 1-admin ratio) ──── */
  767.                     var scenarios = [
  768.                         { total: 10  },
  769.                         { total: 25  },
  770.                         { total: 50  },
  771.                         { total: 100 },
  772.                         { total: 250 },
  773.                     ];
  775.                     /* ── 3. Helper: format number as €1,234 ──────────────────────── */
  776.                     function eur(n) {
  777.                         return '\u20AC' + n.toLocaleString('en-US');
  778.                     }
  780.                     /* ── 4. Build rows ───────────────────────────────────────────── */
  781.                     var tbody = document.getElementById('workedExampleTbody');
  782.                     if (!tbody) return;
  783.                     tbody.innerHTML = '';
  785.                     var blendedRate = null;
  787.                     scenarios.forEach(function (s) {
  788.                         /* 4 users per 1 admin — round admins, users = remainder */
  789.                         var admins = Math.max(1, Math.round(s.total / 5));
  790.                         var users  = s.total - admins;
  791.                         var uCost  = users  * userPrice;
  792.                         var aCost  = admins * adminPrice;
  793.                         var total  = uCost + aCost;
  794.                         var blend  = (total / s.total).toFixed(2);
  795.                         if (blendedRate === null) blendedRate = blend; /* store first for explainer */
  797.                         var tr = document.createElement('tr');
  798.                         tr.innerHTML =
  799.                             '<td>' + s.total + ' people</td>' +
  800.                             '<td>' + users   + '</td>' +
  801.                             '<td>' + admins  + '</td>' +
  802.                             '<td>' + eur(uCost) + '</td>' +
  803.                             '<td>' + eur(aCost) + '</td>' +
  804.                             '<td class="n-total">'   + eur(total) + '</td>' +
  805.                             '<td class="n-blended">\u20AC' + blend + '/person</td>';
  806.                         tbody.appendChild(tr);
  807.                     });
  809.                     /* ── 5. Update explainer with live blended rate ───────────────── */
  810.                     var blendDisplay = document.getElementById('blendedRateDisplay');
  811.                     if (blendDisplay && blendedRate !== null) {
  812.                         blendDisplay.textContent = '\u20AC' + blendedRate + '/person';
  813.                     }
  814.                 }());
  815.                 </script>
  816.             </div>
  818.             {# ── Comparison table — inside same card, toggle to reveal ── #}
  819.             <div style="border-top:1px solid var(--n-border-md);margin-top:32px;padding-top:32px;">
  820.                 <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:0;">
  821.                     <div>
  822.                         <span class="n-eyebrow trn" data-trn-key="_PRC_CMP_EYEBROW_">Compare plans</span>
  823.                         <h3 style="font-family:'Montserrat',sans-serif;font-size:1.25rem;font-weight:800;color:var(--n-dark);letter-spacing:-.02em;margin-top:4px;">
  824.                             <span class="trn" data-trn-key="_PRC_CMP_H2_">Exactly what's in</span> <em style="font-style:italic;color:var(--n-amber);" class="trn" data-trn-key="_PRC_CMP_H2_EM_">each plan.</em>
  825.                         </h3>
  826.                     </div>
  827.                     <button id="toggleButtonPrice" class="n-calc-toggle-btn" onclick="toggleDetails()">
  828.                         <span class="trn" data-trn-key="_PRC_CMP_BTN_SHOW_">Show full comparison</span> <span class="arrow">↓</span>
  829.                     </button>
  830.                 </div>
  832.                 {# ── Resolve Team plan prices dynamically from packageDetails ─── #}
  833.                 {% set _teamUserPrice = '' %}
  834.                 {% set _teamRegularUserPrice = '' %}
  835.                 {% set _teamIsEarlyAdopter = false %}
  836.                 {% for pd in packageDetails %}
  837.                     {% if pd.freeFlag is defined and pd.freeFlag != '1' and pd.contactSalesFlag is defined and pd.contactSalesFlag != '1' and pd.euPerUserPrice is defined and pd.euPerUserPrice.monthlyPrice > 0 and _teamUserPrice == '' %}
  838.                         {% set _teamUserPrice = pd.euPerUserPrice.monthlyPrice %}
  839.                         {% if pd.earlyAdopter is defined and pd.earlyAdopter %}
  840.                             {% set _teamIsEarlyAdopter = true %}
  841.                             {% set _teamRegularUserPrice = pd.euRegularUserPrice.monthlyPrice %}
  842.                         {% endif %}
  843.                     {% endif %}
  844.                 {% endfor %}
  845.                 <div id="featureTableWrap" style="display:none;margin-top:24px;">
  846.                     <div class="n-compare-wrap">
  847.                         <table class="n-cmp-table">
  848.                             <thead>
  849.                                 <tr class="n-plan-row">
  850.                                     <th style="width:38%;"></th>
  851.                                     <th>
  852.                                         <div class="n-cmp-plan-name">Free</div>
  853.                                         <div class="n-cmp-plan-price">€0</div>
  854.                                         <div class="n-cmp-plan-sub">free forever</div>
  855.                                     </th>
  856.                                     <th style="background:rgba(26,29,46,.04);">
  857.                                         <div class="n-cmp-plan-name" style="color:var(--n-amber);">Team</div>
  858.                                         {% if _teamIsEarlyAdopter %}
  859.                                             <div style="font-size:.68rem;color:var(--n-muted-2);text-decoration:line-through;line-height:1.2;margin-bottom:2px;">€{{ _teamRegularUserPrice }}/user</div>
  860.                                         {% endif %}
  861.                                         <div class="n-cmp-plan-price">€{{ _teamUserPrice }}</div>
  862.                                         <div class="n-cmp-plan-sub">/ user / month{% if _teamIsEarlyAdopter %} · ⚡ launch{% endif %}</div>
  863.                                     </th>
  864.                                     <th>
  865.                                         <div class="n-cmp-plan-name">Enterprise</div>
  866.                                         <div class="n-cmp-plan-price" style="font-size:1.1rem;">Custom</div>
  867.                                         <div class="n-cmp-plan-sub">contact sales</div>
  868.                                     </th>
  869.                                 </tr>
  870.                                 <tr>
  871.                                     <th style="width:38%;">Feature</th>
  872.                                     <th>Free</th>
  873.                                     <th style="background:rgba(26,29,46,.04);">Team</th>
  874.                                     <th>Enterprise</th>
  875.                                 </tr>
  876.                             </thead>
  877.                             <tbody>
  878.                                 <tr class="n-sh"><td colspan="4">Users &amp; storage</td></tr>
  879.                                 <tr><td>User limit</td><td>Up to 50</td><td>Unlimited</td><td>Unlimited</td></tr>
  880.                                 <tr><td>Storage per user</td><td>10 MB</td><td>Unlimited</td><td>Unlimited</td></tr>
  881.                                 <tr><td>Multi-company entities</td><td class="n-dash">—</td><td>Up to 5</td><td>Unlimited</td></tr>
  882.                                 <tr><td>Data retention</td><td>12 months</td><td>Unlimited</td><td>Unlimited</td></tr>
  883.                                 <tr><td>API access</td><td class="n-dash">—</td><td class="n-partial">Read-only</td><td class="n-check">✓</td></tr>
  885.                                 <tr class="n-sh"><td colspan="4">Six systems (all included)</td></tr>
  886.                                 <tr><td>Sales &amp; CRM with Kanban pipelines</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  887.                                 <tr><td>Projects with WBS, RACI, EVM costing</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  888.                                 <tr><td>Finance with bank rec, loan/EMI, expenses</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  889.                                 <tr><td>Cloud + IoT with InfluxDB dashboards</td><td class="n-dash">—</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  890.                                 <tr><td>Admin Command Center</td><td class="n-dash">—</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  891.                                 <tr><td>AI &amp; Reporting (email classifier, Spotlight)</td><td class="n-partial">Limited</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  893.                                 <tr class="n-sh"><td colspan="4">Germany-specific</td></tr>
  894.                                 <tr><td>DATEV-ready export (SKR03/04 compatible)</td><td class="n-dash">—</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  895.                                 <tr><td>SKR03 / SKR04 chart of accounts</td><td class="n-dash">—</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  896.                                 <tr><td>Berater + Mandant number mapping</td><td class="n-dash">—</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  898.                                 <tr class="n-sh"><td colspan="4">Mobile (Beezeness)</td></tr>
  899.                                 <tr><td>iOS + Android app</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  900.                                 <tr><td>QR-based employee onboarding</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  901.                                 <tr><td>Biometric login + offline clock-in</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  903.                                 <tr class="n-sh"><td colspan="4">Deployment &amp; support</td></tr>
  904.                                 <tr><td>EU cloud hosting</td><td class="n-check">✓</td><td class="n-check">✓</td><td class="n-check">✓</td></tr>
  905.                                 <tr><td>Native LLM Server (on-premise AI)</td><td class="n-dash">—</td><td class="n-partial">Add-on</td><td class="n-check">✓</td></tr>
  906.                                 <tr><td>On-premise deployment</td><td class="n-dash">—</td><td class="n-dash">—</td><td class="n-check">✓</td></tr>
  907.                                 <tr><td>Custom development hours</td><td class="n-dash">—</td><td class="n-dash">—</td><td class="n-check">Included</td></tr>
  908.                                 <tr><td>Migration support</td><td>Self-serve</td><td>3 days included</td><td>Full implementation</td></tr>
  909.                                 <tr><td>Support channel</td><td>Community + email</td><td>Priority chat</td><td>Dedicated manager</td></tr>
  910.                             </tbody>
  911.                         </table>
  912.                     </div>
  913.                     <div style="text-align:center;margin-top:20px;">
  914.                         <button class="n-calc-toggle-btn" onclick="hideTables()">
  915.                             <span class="trn" data-trn-key="_PRC_CMP_BTN_HIDE_">Hide comparison</span> <span class="arrow" style="transform:rotate(180deg);display:inline-block;">↓</span>
  916.                         </button>
  917.                     </div>
  918.                 </div>
  919.             </div>
  921.         </div>
  922.     </div>
  923. </section>
  925. <!-- ── FAQ ───────────────────────────────────────────────────────────────────── -->
  926. <section class="n-faq-section reveal">
  927.     <div class="n-wrap">
  928.         <div class="n-faq-layout">
  929.             <div class="n-faq-sidebar">
  930.                 <span class="n-eyebrow trn" data-trn-key="_PRC_FAQ_EYEBROW_">Common questions</span>
  931.                 <h2 style="margin-top:12px;"><span class="trn" data-trn-key="_PRC_FAQ_H2_">Before you sign up,</span> <em class="trn" data-trn-key="_PRC_FAQ_H2_EM_">the real answers.</em></h2>
  932.                 <p style="margin-top:14px;">Not here? <a href="#">Ask us directly</a>.</p>
  933.             </div>
  934.             <div class="n-faq-list">
  936.                 <details class="n-faq-item">
  937.                     <summary><span class="trn" data-trn-key="_PRC_FAQ_Q1_">What exactly counts toward the 10 MB storage?</span> <span class="n-faq-icon">+</span></summary>
  938.                     <div class="n-faq-answer">File attachments on invoices, expenses, documents, and mobile receipt captures. Transactional database rows (invoices, leads, ledger entries) don't count — you could process thousands of invoices and stay under the limit if nobody uploads heavy PDFs or photos.</div>
  939.                 </details>
  941.                 <details class="n-faq-item">
  942.                     <summary><span class="trn" data-trn-key="_PRC_FAQ_Q2_">What happens on the day a user crosses 10 MB?</span> <span class="n-faq-icon">+</span></summary>
  943.                     <div class="n-faq-answer">You get an email warning before, at, and after the threshold. Nothing breaks. You have a grace window to decide — upgrade to Team, delete old files, or do nothing (in which case your data is kept but writes are paused until you choose).</div>
  944.                 </details>
  946.                 <details class="n-faq-item">
  947.                     <summary><span class="trn" data-trn-key="_PRC_FAQ_Q3_">How does the admin ratio work in practice?</span> <span class="n-faq-icon">+</span></summary>
  948.                     <div class="n-faq-answer">You pick the mix. A 10-person team might be 8 users + 2 admins (€88/month) or 7 users + 3 admins (€102/month) depending on your organization. The 4-to-1 ratio is the most common mid-market pattern, not a hard rule.</div>
  949.                 </details>
  951.                 <details class="n-faq-item">
  952.                     <summary>Can we go back to Free if our storage drops? <span class="n-faq-icon">+</span></summary>
  953.                     <div class="n-faq-answer">Yes. Annual Team subscribers stay on the paid tier for the contract period, but monthly subscribers who get back under 10 MB per user can drop to Free at the next billing cycle.</div>
  954.                 </details>
  956.                 <details class="n-faq-item">
  957.                     <summary>What's included in Enterprise customization? <span class="n-faq-icon">+</span></summary>
  958.                     <div class="n-faq-answer">A fixed allocation of development hours per year for custom modules, workflow automations, integrations (your specific SAP, Salesforce, or legacy system), and branded reporting. Scope is agreed before work starts.</div>
  959.                 </details>
  961.                 <details class="n-faq-item">
  962.                     <summary>Where is my data hosted? <span class="n-faq-icon">+</span></summary>
  963.                     <div class="n-faq-answer">Free and Team customers: EU cloud (Frankfurt region). Enterprise: your choice of private cloud or on-premise deployment. Data never moves between regions without explicit permission. The Native LLM Server option means AI inference runs entirely on your hardware — nothing leaves your building.</div>
  964.                 </details>
  966.                 <details class="n-faq-item">
  967.                     <summary>What happens to my data if I leave? <span class="n-faq-icon">+</span></summary>
  968.                     <div class="n-faq-answer">Full export any time — during or after cancellation. CSV, JSON, or SQL. DATEV customers get a clean DATEV-format export on exit. No retention fees, no lock-in.</div>
  969.                 </details>
  971.             </div>
  972.         </div>
  973.     </div>
  974. </section>
  976. <!-- ── FINAL CTA ─────────────────────────────────────────────────────────────── -->
  977. <section class="n-cta-final">
  978.     <div class="n-wrap">
  979.         <h2>Ready to connect <em>your operations?</em></h2>
  980.         <p>Start free for up to 50 users and use HoneyBee on real work. Edge+, infrastructure, and project deployments are scoped separately — we will match you with the right approach.</p>
  981.         <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
  982.             <a href="{{ url('honeybee_contact') }}" class="n-btn-primary">Request Project Solution</a>
  983.             <a href="{{ path('quote_request', {plan: 'enterprise'}) }}" class="n-btn-secondary">Contact Sales</a>
  984.         </div>
  985.     </div>
  986. </section>
  988. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  990. <script>
  991.     /* ── Feature table toggle ── */
  992.     function toggleDetails() {
  993.         var wrap = document.getElementById('featureTableWrap');
  994.         var btn  = document.getElementById('toggleButtonPrice');
  995.         wrap.style.display = 'block';
  996.         btn.style.display  = 'none';
  997.         wrap.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  998.     }
  999.     function hideTables() {
  1000.         var wrap = document.getElementById('featureTableWrap');
  1001.         var btn  = document.getElementById('toggleButtonPrice');
  1002.         wrap.style.display = 'none';
  1003.         btn.style.display  = 'inline-flex';
  1004.         btn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  1005.     }
  1007.     /* ── Scroll reveal ── */
  1008.     (function(){
  1009.         var obs = new IntersectionObserver(function(entries){
  1010.             entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('visible'); obs.unobserve(e.target); } });
  1011.         },{ threshold: 0.10 });
  1012.         document.querySelectorAll('.reveal').forEach(function(el){ obs.observe(el); });
  1013.     })();
  1015.     /* ── Plan selection + cart ── */
  1016.     document.addEventListener('DOMContentLoaded', function () {
  1018.         const YEARLY_DISCOUNT = 0.20; // 20% off for yearly billing
  1020.         let selectedPlan = null;
  1021.         let basePrice = 0, perUserPrice = 0, perAdminPrice = 0, perMlUserPrice = 0;
  1022.         let minUser = 0, maxUserLimit = 0, minAdmin = 0, maxAdminLimit = 0;
  1023.         let minMlUser = 0, maxMlUserLimit = 0, usersPerAdminBlock = 0;
  1024.         let currentUsers = 0, currentAdmins = 0, currentMlUsers = 0;
  1025.         let billingCycle = 'monthly';
  1027.         const cartTotal        = document.getElementById('cartTotal');
  1028.         const increaseUserBtn  = document.getElementById('increaseUser');
  1029.         const decreaseUserBtn  = document.getElementById('decreaseUser');
  1030.         const increaseAdminBtn = document.getElementById('increaseAdmin');
  1031.         const decreaseAdminBtn = document.getElementById('decreaseAdmin');
  1032.         const increaseMlBtn    = document.getElementById('increaseMl');
  1033.         const decreaseMlBtn    = document.getElementById('decreaseMl');
  1034.         const payButton        = document.getElementById('payButton');
  1035.         const companySelect    = document.getElementById('companySelect');
  1036.         const companyNameInput = document.getElementById('companyNameInput');
  1037.         const guestModeField   = document.getElementById('guestMode');
  1038.         const isOfflineMode    = guestModeField !== null;
  1039.         const mlCounterWrap    = document.getElementById('mlCounterWrap');
  1040.         const billingCycleWrap = document.getElementById('billingCycleWrap');
  1041.         const cycleMonthly     = document.getElementById('cycleMonthly');
  1042.         const cycleYearly      = document.getElementById('cycleYearly');
  1043.         const adminRatioNotice = document.getElementById('adminRatioNotice');
  1044.         const adminRatioText   = document.getElementById('adminRatioText');
  1045.         const totalCycleLabel  = document.getElementById('totalCycleLabel');
  1047.         /* ── Billing cycle toggle ── */
  1048.         if (cycleMonthly) cycleMonthly.addEventListener('click', function() {
  1049.             billingCycle = 'monthly';
  1050.             cycleMonthly.classList.add('active');
  1051.             cycleYearly.classList.remove('active');
  1052.             if (totalCycleLabel) totalCycleLabel.innerText = 'Monthly Total';
  1053.             calculateTotal(); updateButtons();
  1054.         });
  1055.         if (cycleYearly) cycleYearly.addEventListener('click', function() {
  1056.             billingCycle = 'yearly';
  1057.             cycleYearly.classList.add('active');
  1058.             cycleMonthly.classList.remove('active');
  1059.             if (totalCycleLabel) totalCycleLabel.innerText = 'Yearly Total';
  1060.             calculateTotal(); updateButtons();
  1061.         });
  1063.         function validateCompanySelection() {
  1064.             if (!selectedPlan) return;
  1065.             if (selectedPlan.contactSales === 1) { payButton.disabled = false; return; }
  1066.             if (isOfflineMode) {
  1067.                 payButton.disabled = !companyNameInput || companyNameInput.value.trim() === '';
  1068.             } else {
  1069.                 payButton.disabled = !companySelect || parseInt(companySelect.value || 0) === 0;
  1070.             }
  1071.         }
  1072.         if (companySelect)    companySelect.addEventListener('change', validateCompanySelection);
  1073.         if (companyNameInput) companyNameInput.addEventListener('input', validateCompanySelection);
  1075.         /* Compute the minimum admin count required for current user count */
  1076.         function computeRequiredAdmins() {
  1077.             if (!usersPerAdminBlock || usersPerAdminBlock <= 0) return minAdmin;
  1078.             let extraUsers = Math.max(0, currentUsers - minUser);
  1079.             return minAdmin + Math.floor(extraUsers / usersPerAdminBlock);
  1080.         }
  1082.         function updateAdminRatioNotice() {
  1083.             if (!adminRatioNotice || !adminRatioText) return;
  1084.             let required = computeRequiredAdmins();
  1085.             if (required > minAdmin && currentAdmins < required) {
  1086.                 adminRatioText.innerText = 'ⓘ Minimum ' + required + ' admin(s) required for ' + currentUsers + ' users (1 admin per ' + usersPerAdminBlock + ' extra users).';
  1087.                 adminRatioNotice.style.display = 'block';
  1088.             } else {
  1089.                 adminRatioNotice.style.display = 'none';
  1090.             }
  1091.         }
  1093.         function calculateTotal() {
  1094.             if (!selectedPlan || selectedPlan.contactSales === 1) return;
  1095.             let extraUsers  = Math.max(0, currentUsers  - minUser);
  1096.             let extraAdmins = Math.max(0, currentAdmins - minAdmin);
  1097.             let monthlyBase = basePrice
  1098.                 + (extraUsers  * perUserPrice)
  1099.                 + (extraAdmins * perAdminPrice)
  1100.                 + (currentMlUsers * perMlUserPrice);
  1101.             let total = billingCycle === 'yearly'
  1102.                 ? monthlyBase * 12 * (1 - YEARLY_DISCOUNT)
  1103.                 : monthlyBase;
  1104.             cartTotal.innerText    = '€' + total.toFixed(2);
  1105.             selectedPlan.total     = total;
  1106.             selectedPlan.users     = currentUsers;
  1107.             selectedPlan.admins    = currentAdmins;
  1108.             selectedPlan.mlUsers   = currentMlUsers;
  1109.             selectedPlan.billingCycle = billingCycle;
  1110.             validateCompanySelection();
  1111.         }
  1113.         function updateButtons() {
  1114.             if (!selectedPlan) {
  1115.                 increaseUserBtn.disabled = true;  decreaseUserBtn.disabled = true;
  1116.                 increaseAdminBtn.disabled = true; decreaseAdminBtn.disabled = true;
  1117.                 if (increaseMlBtn) { increaseMlBtn.disabled = true; decreaseMlBtn.disabled = true; }
  1118.                 cartTotal.innerText = '';
  1119.                 return;
  1120.             }
  1121.             let requiredAdmins    = computeRequiredAdmins();
  1122.             let effectiveMinAdmin = Math.max(minAdmin, requiredAdmins);
  1124.             /* User counters — enabled for ALL plans including Enterprise */
  1125.             decreaseUserBtn.disabled  = currentUsers <= minUser;
  1126.             increaseUserBtn.disabled  = maxUserLimit !== -1 && currentUsers >= maxUserLimit;
  1128.             /* Admin counters — lower bound is the ratio-required minimum */
  1129.             decreaseAdminBtn.disabled = currentAdmins <= effectiveMinAdmin;
  1130.             increaseAdminBtn.disabled = maxAdminLimit !== -1 && currentAdmins >= maxAdminLimit;
  1132.             /* ML counters */
  1133.             if (increaseMlBtn) {
  1134.                 decreaseMlBtn.disabled = currentMlUsers <= minMlUser;
  1135.                 increaseMlBtn.disabled = maxMlUserLimit === 0
  1136.                     || (maxMlUserLimit !== -1 && currentMlUsers >= maxMlUserLimit);
  1137.             }
  1138.             updateAdminRatioNotice();
  1139.         }
  1141.         document.querySelectorAll('.pricing-card .btn').forEach(function(button) {
  1142.             button.addEventListener('click', function(e) {
  1143.                 e.preventDefault(); e.stopPropagation();
  1144.                 const card = this.closest('.pricing-card');
  1145.                 const planName = card.querySelector('.n-pc-name')?.innerText || '';
  1147.                 /* Read plan config from hidden data fields */
  1148.                 basePrice          = parseFloat(card.querySelector('.euBasePrice')?.value || 0);
  1149.                 perUserPrice       = parseFloat(card.querySelector('.euPerUserPrice')?.value  || card.querySelector('.perUserPrice')?.value  || 0);
  1150.                 perAdminPrice      = parseFloat(card.querySelector('.euPerAdminPrice')?.value || card.querySelector('.perAdminPrice')?.value || 0);
  1151.                 perMlUserPrice     = parseFloat(card.querySelector('.euPerMlUserPrice')?.value || 0);
  1152.                 minUser            = parseInt(card.querySelector('.minUser')?.value       || 0);
  1153.                 maxUserLimit       = parseInt(card.querySelector('.maxUser')?.value       || 0);
  1154.                 minAdmin           = parseInt(card.querySelector('.minAdminUser')?.value  || 0);
  1155.                 maxAdminLimit      = parseInt(card.querySelector('.maxAdminUser')?.value  || 0);
  1156.                 minMlUser          = parseInt(card.querySelector('.minMlUser')?.value     || 0);
  1157.                 maxMlUserLimit     = parseInt(card.querySelector('.maxMlUser')?.value     || 0);
  1158.                 usersPerAdminBlock = parseInt(card.querySelector('.usersPerAdminBlock')?.value || 0);
  1159.                 currentUsers       = minUser;
  1160.                 currentAdmins      = minAdmin;
  1161.                 currentMlUsers     = minMlUser;
  1163.                 const contactSalesFlag = parseInt(card.querySelector('.contactSales')?.value || 0);
  1164.                 const packageId        = card.querySelector('.packageId')?.value || 0;
  1166.                 selectedPlan = { name: planName, currency: 'eur', contactSales: contactSalesFlag, packageId: packageId };
  1168.                 document.getElementById('selectedPlanName').innerText        = planName;
  1169.                 const isEarlyAdopter = !!card.querySelector('.earlyAdopterFlag');
  1170.                 const priceLabel = contactSalesFlag === 1
  1171.                     ? 'Custom quote'
  1172.                     : (perUserPrice > 0
  1173.                         ? '€' + perUserPrice.toFixed(2) + ' / user / month' + (isEarlyAdopter ? '  ⚡ launch offer' : '')
  1174.                         : 'Free');
  1175.                 document.getElementById('selectedPlanPrice').innerText        = priceLabel;
  1176.                 document.getElementById('selectedPlanMinUser').innerText      = minUser;
  1177.                 document.getElementById('selectedPlanMaxUser').innerText      = maxUserLimit  === -1 ? 'Unlimited' : maxUserLimit;
  1178.                 document.getElementById('selectedPlanMinAdminUser').innerText = minAdmin;
  1179.                 document.getElementById('selectedPlanAdminUser').innerText    = maxAdminLimit === -1 ? 'Unlimited' : maxAdminLimit;
  1180.                 document.getElementById('userCount').innerText                = currentUsers;
  1181.                 document.getElementById('adminCount').innerText               = currentAdmins;
  1182.                 if (document.getElementById('mlCount')) document.getElementById('mlCount').innerText = currentMlUsers;
  1184.                 /* Show/hide billing cycle toggle (hide for fully-free plans) */
  1185.                 let isFree = contactSalesFlag !== 1 && parseFloat(perUserPrice) === 0 && parseFloat(perAdminPrice) === 0 && parseFloat(basePrice) === 0;
  1186.                 if (billingCycleWrap) billingCycleWrap.style.display = isFree ? 'none' : 'block';
  1188.                 /* Show/hide ML counter (hide when package has no ML seats) */
  1189.                 if (mlCounterWrap) mlCounterWrap.style.display = (maxMlUserLimit === 0) ? 'none' : 'flex';
  1191.                 /* Reset to monthly on plan change */
  1192.                 billingCycle = 'monthly';
  1193.                 if (cycleMonthly) { cycleMonthly.classList.add('active'); cycleYearly.classList.remove('active'); }
  1194.                 if (totalCycleLabel) totalCycleLabel.innerText = 'Monthly Total';
  1196.                 if (contactSalesFlag === 1) {
  1197.                     payButton.innerText  = 'Contact Sales';
  1198.                     payButton.disabled   = false;
  1199.                     cartTotal.innerText  = '';
  1200.                     payButton.onclick    = function() {
  1201.                         var params = new URLSearchParams({
  1202.                             plan:          'enterprise',
  1203.                             normal_users:  currentUsers,
  1204.                             admin_users:   currentAdmins,
  1205.                             ml_users:      currentMlUsers,
  1206.                             billing_cycle: billingCycle,
  1207.                         });
  1208.                         var company = companyNameInput ? companyNameInput.value.trim() : '';
  1209.                         if (company) params.set('company_name', company);
  1210.                         window.location.href = '{{ path('quote_request') }}?' + params.toString();
  1211.                     };
  1212.                 } else {
  1213.                     payButton.innerText = isOfflineMode ? 'Save & Continue →' : 'Proceed to SaaS Subscription';
  1214.                     payButton.onclick   = function() {
  1215.                         if (!selectedPlan) { alert('Please select a plan first!'); return; }
  1216.                         if (isOfflineMode) {
  1217.                             var companyName = companyNameInput ? companyNameInput.value.trim() : '';
  1218.                             if (!companyName) {
  1219.                                 companyNameInput && (companyNameInput.style.borderColor = '#B04030');
  1220.                                 alert('Please enter your company name to continue.');
  1221.                                 return;
  1222.                             }
  1223.                             localStorage.setItem('checkoutPackage', JSON.stringify({
  1224.                                 name:         selectedPlan.name,
  1225.                                 price:        selectedPlan.total,
  1226.                                 users:        selectedPlan.users,
  1227.                                 admins:       selectedPlan.admins,
  1228.                                 mlUsers:      selectedPlan.mlUsers,
  1229.                                 billingCycle: selectedPlan.billingCycle,
  1230.                                 currency:     selectedPlan.currency,
  1231.                                 packageId:    selectedPlan.packageId,
  1232.                                 companyName:  companyName,
  1233.                                 guestMode:    guestModeField.value
  1234.                             }));
  1235.                             window.location.href = '{{ url('create_company') }}';
  1236.                             return;
  1237.                         }
  1238.                         const selectedAppId = companySelect ? parseInt(companySelect.value || 0) : 0;
  1239.                         if (selectedAppId === 0) { alert('Please select a company first!'); return; }
  1240.                         localStorage.setItem('checkoutPackage', JSON.stringify({
  1241.                             name:         selectedPlan.name,
  1242.                             price:        selectedPlan.total,
  1243.                             users:        selectedPlan.users,
  1244.                             admins:       selectedPlan.admins,
  1245.                             mlUsers:      selectedPlan.mlUsers,
  1246.                             billingCycle: selectedPlan.billingCycle,
  1247.                             currency:     selectedPlan.currency,
  1248.                             appId:        selectedAppId,
  1249.                             packageId:    selectedPlan.packageId
  1250.                         }));
  1251.                         window.location.href = '{{ path('honeybee_payment_method') }}';
  1252.                     };
  1253.                     calculateTotal(); updateButtons();
  1254.                 }
  1256.                 const summaryWrap = document.getElementById('selectedPlanSummary');
  1257.                 summaryWrap.classList.add('visible');
  1258.                 document.querySelectorAll('.pricing-card').forEach(c => c.classList.remove('active-card'));
  1259.                 card.classList.add('active-card');
  1260.                 summaryWrap.scrollIntoView({ behavior: 'smooth', block: 'center' });
  1262.                 updateButtons();
  1263.                 validateCompanySelection();
  1264.             });
  1265.         });
  1267.         /* ── User counter ── */
  1268.         increaseUserBtn.addEventListener('click', function() {
  1269.             if (!selectedPlan) return;
  1270.             if (maxUserLimit === -1 || currentUsers < maxUserLimit) {
  1271.                 currentUsers++;
  1272.                 document.getElementById('userCount').innerText = currentUsers;
  1273.                 /* Auto-bump admins if ratio requires it */
  1274.                 let required = computeRequiredAdmins();
  1275.                 if (currentAdmins < required) {
  1276.                     currentAdmins = required;
  1277.                     document.getElementById('adminCount').innerText = currentAdmins;
  1278.                 }
  1279.                 calculateTotal(); updateButtons();
  1280.             }
  1281.         });
  1282.         decreaseUserBtn.addEventListener('click', function() {
  1283.             if (!selectedPlan || currentUsers <= minUser) return;
  1284.             currentUsers--;
  1285.             document.getElementById('userCount').innerText = currentUsers;
  1286.             calculateTotal(); updateButtons();
  1287.         });
  1289.         /* ── Admin counter ── */
  1290.         increaseAdminBtn.addEventListener('click', function() {
  1291.             if (!selectedPlan) return;
  1292.             if (maxAdminLimit === -1 || currentAdmins < maxAdminLimit) {
  1293.                 currentAdmins++;
  1294.                 document.getElementById('adminCount').innerText = currentAdmins;
  1295.                 calculateTotal(); updateButtons();
  1296.             }
  1297.         });
  1298.         decreaseAdminBtn.addEventListener('click', function() {
  1299.             if (!selectedPlan) return;
  1300.             let effectiveMin = Math.max(minAdmin, computeRequiredAdmins());
  1301.             if (currentAdmins > effectiveMin) {
  1302.                 currentAdmins--;
  1303.                 document.getElementById('adminCount').innerText = currentAdmins;
  1304.                 calculateTotal(); updateButtons();
  1305.             }
  1306.         });
  1308.         /* ── ML / AI User counter ── */
  1309.         if (increaseMlBtn) increaseMlBtn.addEventListener('click', function() {
  1310.             if (!selectedPlan) return;
  1311.             if (maxMlUserLimit === -1 || currentMlUsers < maxMlUserLimit) {
  1312.                 currentMlUsers++;
  1313.                 document.getElementById('mlCount').innerText = currentMlUsers;
  1314.                 calculateTotal(); updateButtons();
  1315.             }
  1316.         });
  1317.         if (decreaseMlBtn) decreaseMlBtn.addEventListener('click', function() {
  1318.             if (!selectedPlan || currentMlUsers <= minMlUser) return;
  1319.             currentMlUsers--;
  1320.             document.getElementById('mlCount').innerText = currentMlUsers;
  1321.             calculateTotal(); updateButtons();
  1322.         });
  1324.     });
  1325. </script>