src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/tools/rooftop-estimate.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  2. {% include '@HoneybeeWeb/inc/_web_design_system.html.twig' %}
  3. {% include '@HoneybeeWeb/inc/_hb360_tags.html.twig' %}
  4. {% import '@HoneybeeWeb/inc/_hb360_tags.html.twig' as hb360 %}
  6. <style>
  7. .re-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
  8. .re-hero { background: var(--n-cream); padding: 120px 0 40px; }
  9. .re-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
  10. @media (max-width: 940px) { .re-grid { grid-template-columns: 1fr; } }
  11. .re-card { background: var(--n-white); border: 1px solid var(--n-border-md); border-radius: var(--n-radius); padding: 22px; box-shadow: var(--n-shadow-sm); }
  12. .re-map { width: 100%; height: 380px; border-radius: var(--n-radius-sm); border: 1px solid var(--n-border-md); background: var(--n-cream-2); }
  13. .re-search { width: 100%; padding: 12px 14px; border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm); font-size: 14px; font-family: var(--n-font); margin-bottom: 12px; }
  14. .re-field { margin-bottom: 14px; }
  15. .re-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--n-muted); margin-bottom: 6px; }
  16. .re-field input, .re-field select { width: 100%; padding: 11px 12px; border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm); font-size: 14px; font-family: var(--n-font); }
  17. .re-toggle { display: flex; gap: 0; border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm); overflow: hidden; }
  18. .re-toggle button { flex: 1; padding: 11px; background: var(--n-white); border: none; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--n-muted); font-family: var(--n-font); }
  19. .re-toggle button.active { background: var(--n-dark); color: #fff; }
  20. .re-area-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--n-amber-dim); color: var(--n-amber); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 100px; margin-bottom: 12px; }
  21. .re-headline { background: var(--n-dark); border-radius: var(--n-radius-sm); padding: 22px 20px; text-align: center; margin-bottom: 14px; }
  22. .re-headline .v { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 2.4rem; color: #fff; line-height: 1.05; }
  23. .re-headline .l { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); margin-top: 6px; }
  24. .re-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 14px; }
  25. .re-kpi { background: var(--n-cream); border: 1px solid var(--n-border); border-radius: var(--n-radius-sm); padding: 14px 16px; }
  26. .re-kpi .v { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.35rem; color: var(--n-dark); line-height: 1.1; }
  27. .re-kpi .l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--n-muted); margin: 4px 0 6px; }
  28. .re-note { font-size: 12px; color: var(--n-muted); line-height: 1.6; margin-top: 14px; padding: 12px 14px; background: var(--n-cream); border-radius: var(--n-radius-sm); border-left: 3px solid var(--n-amber); }
  29. .re-muted { color: var(--n-muted); font-size: 13px; }
  30. #re-results { display: none; }
  31. .re-spinner { display:none; font-size:13px; color:var(--n-amber); font-weight:600; }
  32. .re-advanced-toggle { background:none; border:none; color:var(--n-amber); font-weight:700; font-size:13px; cursor:pointer; padding:0; font-family:var(--n-font); }
  33. #re-advanced { display:none; margin-top:14px; border-top:1px dashed var(--n-border-md); padding-top:14px; }
  34. /* ── the visibly-locked full design (behind the signup wall, H1b) ── */
  35. .re-locked { position: relative; margin-top: 16px; border: 1.5px dashed var(--n-border-md); border-radius: var(--n-radius-sm); overflow: hidden; }
  36. /* Blurred BoQ sits BEHIND the overlay as a background layer; the overlay is in
  37.    normal flow so its content always fits — nothing clips. */
  38. .re-locked-blur { position: absolute; inset: 0; filter: blur(4px); pointer-events: none; user-select: none; padding: 16px; opacity: .55; overflow: hidden; }
  39. .re-locked-blur table { width: 100%; border-collapse: collapse; font-size: 13px; }
  40. .re-locked-blur td { padding: 8px 10px; border-bottom: 1px solid var(--n-border); color: var(--n-dark); }
  41. .re-locked-over { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,.6); padding: 24px 18px; text-align: center; }
  42. .re-locked-over .ttl { font-family:'Montserrat',sans-serif; font-weight: 900; font-size: 1.05rem; color: var(--n-dark); }
  43. .re-locked-teaser { font-size: 12.5px; color: var(--n-muted); line-height: 1.9; text-align: left; margin: 0; padding-left: 2px; list-style: none; }
  44. .re-locked-teaser li:before { content: '🔒 '; font-size: 12px; }
  45. /* Tidy stats table under the KPI cards (label · value · tag) */
  46. .re-meta { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 2px 0 10px; }
  47. .re-meta td { padding: 7px 4px; border-bottom: 1px solid var(--n-border); vertical-align: middle; }
  48. .re-meta tr:last-child td { border-bottom: none; }
  49. .re-meta .ml { color: var(--n-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; width: 1%; padding-right: 14px; }
  50. .re-meta .mv { color: var(--n-dark); font-weight: 600; }
  51. .re-meta .mt { text-align: right; white-space: nowrap; padding-left: 10px; }
  52. .re-legend { margin: 0 0 14px; }
  53. .re-legend summary { font-size: 12px; font-weight: 600; color: var(--n-muted); cursor: pointer; }
  54. .re-legend .hb360-legend { margin-top: 6px; }
  55. /* ── SDS0 · Solar Design Studio shell (additive — simple flow untouched) ── */
  56. #sds-editor { position: relative; }
  57. #sds-editor.sds-focused { position: fixed; inset: 0; z-index: 100000; background: var(--n-cream); display: flex; flex-direction: column; animation: sdsIn .18s ease; }
  58. @keyframes sdsIn { from { opacity: .55; transform: scale(.992); } to { opacity: 1; transform: none; } }
  59. body.sds-focused-body { overflow: hidden; }
  60. #sds-bar { display: none; }
  61. .sds-focused #sds-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--n-dark); color: #fff; flex-wrap: wrap; }
  62. .sds-focused .re-map { flex: 1; height: auto; border-radius: 0; border: none; }
  63. #sds-bar .sds-title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 14px; margin-right: 4px; white-space: nowrap; }
  64. #sds-bar .sds-sub { font-size: 12px; color: rgba(255,255,255,.55); }
  65. .sds-tbtn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--n-font); }
  66. .sds-tbtn:hover { background: rgba(255,255,255,.16); }
  67. .sds-tbtn.active { background: var(--n-amber); border-color: var(--n-amber); color: #fff; }
  68. .sds-tbtn:disabled { opacity: .35; cursor: default; }
  69. .sds-spacer { flex: 1; }
  70. #sds-panel { display: none; margin-top: 12px; }
  71. #sds-panel.sds-show { display: block; }
  72. body.sds-focused-body #sds-panel.sds-show { position: fixed; top: 58px; right: 14px; width: 322px; max-height: calc(100vh - 76px); overflow: auto; margin: 0; z-index: 100001; }
  73. .sds-panel-card { background: var(--n-white); border: 1px solid var(--n-border-md); border-radius: var(--n-radius-sm); box-shadow: var(--n-shadow-sm); padding: 12px 14px; }
  74. .sds-zrow { border: 1px solid var(--n-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; background: var(--n-white); }
  75. .sds-zrow.sel { border-color: var(--n-amber); box-shadow: 0 0 0 2px var(--n-amber-dim); }
  76. .sds-zrow .t { display: flex; align-items: center; gap: 8px; }
  77. .sds-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
  78. .sds-zname { font-weight: 700; font-size: 13px; color: var(--n-dark); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  79. .sds-zarea { font-size: 12px; color: var(--n-muted); white-space: nowrap; }
  80. .sds-ibtn { background: none; border: none; color: var(--n-muted); cursor: pointer; padding: 3px 5px; font-size: 13px; }
  81. .sds-ibtn:hover { color: var(--n-dark); }
  82. .sds-pill { display: inline-flex; gap: 5px; align-items: baseline; font-size: 12px; margin-top: 6px; background: var(--n-amber-dim); color: var(--n-amber); font-weight: 700; border-radius: 100px; padding: 3px 10px; }
  83. .sds-pill .q { font-weight: 600; font-size: 11.5px; opacity: .8; }
  84. .sds-props { border-top: 1px dashed var(--n-border-md); margin-top: 8px; padding-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; cursor: default; }
  85. .sds-props label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--n-muted); display: block; margin-bottom: 3px; }
  86. .sds-props input { width: 100%; padding: 6px 8px; border: 1px solid var(--n-border-md); border-radius: 6px; font-size: 12.5px; font-family: var(--n-font); }
  87. .sds-props .full { grid-column: 1 / -1; }
  88. .sds-azauto { background: none; border: none; color: var(--n-amber); font-weight: 700; font-size: 11.5px; cursor: pointer; padding: 0; text-transform: none; }
  89. .sds-hint { font-size: 12px; color: var(--n-muted); }
  90. .sds-total { border-top: 1px solid var(--n-border-md); margin-top: 6px; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--n-dark); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  91. .sds-settings { display: flex; gap: 8px; margin-top: 8px; }
  92. .sds-settings input { width: 100%; padding: 5px 7px; border: 1px solid var(--n-border-md); border-radius: 6px; font-size: 12px; font-family: var(--n-font); }
  93. .sds-note { font-size: 11.5px; color: var(--n-muted); margin-top: 6px; line-height: 1.5; }
  94. </style>
  96. <section class="re-hero">
  97.     <div class="re-wrap">
  98.         <div class="n-label">HoneyBee 360 · Instant Solar Estimate</div>
  99.         <h1 style="font-family:'Montserrat',sans-serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:900;color:var(--n-dark);letter-spacing:-.025em;line-height:1.08;margin:0 0 14px;max-width:20ch">
  100.             Your address + your bill → <em style="font-style:italic;color:var(--n-amber)">what solar would save you.</em>
  101.         </h1>
  102.         <p class="n-body" style="max-width:62ch;margin:0">Enter a site address and your monthly electricity bill. HoneyBee detects the roof, sizes the array with our PV engine, and shows the indicative system size, annual yield, bill saving and payback — with every figure honestly tagged for what is modelled and what still needs a site survey.</p>
  103.     </div>
  104. </section>
  106. <section style="background:var(--n-cream);padding:8px 0 100px">
  107.     <div class="re-wrap">
  108.         <div class="re-grid">
  110.             {# ── LEFT: address + bill + map ── #}
  111.             <div class="re-card">
  112.                 <div class="re-field">
  113.                     <label>Site address</label>
  114.                     <input id="re-search" class="re-search" style="margin-bottom:0" type="text" placeholder="🔍  e.g. Alexanderplatz, Berlin…">
  115.                 </div>
  116.                 <div class="re-field">
  117.                     <label>Monthly electricity bill (€)</label>
  118.                     <input id="re-bill" type="number" min="0" step="10" placeholder="e.g. 1400">
  119.                 </div>
  120.                 <button id="re-auto" class="n-btn n-btn-amber" style="width:100%;justify-content:center"><i class="fa-solid fa-bolt"></i> Get my instant estimate</button>
  121.                 <p id="re-auto-status" class="re-muted" style="margin:10px 0 0;display:none"></p>
  122.                 <p id="re-err" class="re-muted" style="color:#b4452f;margin-top:10px;display:none"></p>
  123.                 <span id="re-spin" class="re-spinner" style="display:none;margin-top:10px;text-align:center">Detecting roof &amp; modelling yield…</span>
  125.                 <div style="margin:16px 0 8px">
  126.                     {# SDS0: the studio wraps the SAME map element — focused mode is pure CSS
  127.                        repositioning, so the Maps instance survives and the simple flow is untouched.
  128.                        #sds-bar / #sds-panel stay empty+hidden unless sds-shell.js attaches. #}
  129.                     <div id="sds-editor">
  130.                         <div id="sds-bar"></div>
  131.                         <div id="re-map" class="re-map"></div>
  132.                     </div>
  133.                     <div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px;flex-wrap:wrap;gap:10px">
  134.                         <span id="re-area-pill" class="re-area-pill" style="display:none;margin-bottom:0"><i class="fa-solid fa-draw-polygon"></i> <span id="re-area-val">0</span> m² roof drawn</span>
  135.                         <div style="display:flex;gap:8px">
  136.                             {# inline SVG — no icon-font dependency in SDS surfaces (SDS-LIB addendum) #}
  137.                             <button id="sds-expand" class="n-btn n-btn-outline" style="padding:8px 16px;font-size:13px;display:none"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" style="vertical-align:-2px"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg> Expand editor</button>
  138.                             <button id="re-redraw" class="n-btn n-btn-outline" style="padding:8px 16px;font-size:13px;display:none"><i class="fa-solid fa-rotate-left"></i> Redraw</button>
  139.                             <button id="re-go" class="n-btn n-btn-outline" style="padding:8px 16px;font-size:13px">Estimate from drawn roof</button>
  140.                         </div>
  141.                     </div>
  142.                     <p class="re-muted" style="margin-top:8px"><i class="fa-solid fa-circle-info" style="color:var(--n-amber)"></i> No auto-match? Zoom to your roof and click each corner to trace the outline, then use “Estimate from drawn roof”.</p>
  143.                     <div id="sds-panel"></div>
  144.                     {# ── FUNNEL-3: the login-revealed DETAIL for an owned saved design
  145.                          (?mydesign=N — own-checked server-side). Figures are the stored
  146.                          studio pills, said so; the live economics panel above refreshes
  147.                          as you edit (the same indicative PVGIS-lite path — no tenant
  148.                          pricing internals exist on this surface, the deny-list law). ── #}
  149.                     {% if my_design is defined and my_design %}
  150.                     <div class="sds-panel-card" style="margin-top:12px;border-left:3px solid var(--n-amber)">
  151.                         <div style="font-weight:700;font-size:13.5px;margin-bottom:4px">
  152.                             Editing from your account: {{ my_design.title }}</div>
  153.                         <div style="font-size:12.5px;color:var(--n-muted);margin-bottom:8px">
  154.                             {% if my_design.address %}{{ my_design.address }} · {% endif %}
  155.                             {{ my_design.summary.zones }} zone{{ my_design.summary.zones == 1 ? '' : 's' }} ·
  156.                             {{ my_design.summary.modules|number_format(0, ',', '.') }} modules ·
  157.                             {{ my_design.summary.kwp|number_format(1, ',', '.') }} kWp
  158.                             {%- if my_design.summary.components > 0 %} · {{ my_design.summary.components }} component{{ my_design.summary.components == 1 ? '' : 's' }}{% endif %}
  159.                             <span style="opacity:.8">(as designed — the panel above updates live as you edit)</span>
  160.                         </div>
  161.                         <table style="width:100%;border-collapse:collapse;font-size:12px">
  162.                             <thead><tr>
  163.                                 <th style="text-align:left;color:var(--n-muted);padding:3px 6px 3px 0">Zone</th>
  164.                                 <th style="text-align:left;color:var(--n-muted);padding:3px 6px">Modules</th>
  165.                                 <th style="text-align:left;color:var(--n-muted);padding:3px 6px">kWp</th>
  166.                                 <th style="text-align:left;color:var(--n-muted);padding:3px 6px">Mount</th>
  167.                             </tr></thead>
  168.                             <tbody>
  169.                             {% for z in my_design.payload.zones %}
  170.                                 <tr>
  171.                                     <td style="padding:3px 6px 3px 0;border-top:1px dashed var(--n-border-md)">{{ z.name|default('Zone ' ~ loop.index) }}</td>
  172.                                     <td style="padding:3px 6px;border-top:1px dashed var(--n-border-md)">{{ z.shown.count|default('—') }}</td>
  173.                                     <td style="padding:3px 6px;border-top:1px dashed var(--n-border-md)">{{ z.shown.kwp is defined ? z.shown.kwp|number_format(1, ',', '.') : '—' }}</td>
  174.                                     <td style="padding:3px 6px;border-top:1px dashed var(--n-border-md)">{{ z.mountMode|default('south') }}{{ z.orientation is defined and z.orientation == 'landscape' ? ' · landscape' : '' }}</td>
  175.                                 </tr>
  176.                             {% endfor %}
  177.                             </tbody>
  178.                         </table>
  179.                         <div style="font-size:12px;color:var(--n-muted);margin-top:6px">
  180.                             Saving updates this design on your account ·
  181.                             <a href="{{ url('hb360_my_estimate') }}" style="color:var(--n-amber);font-weight:600">back to My designs</a>
  182.                         </div>
  183.                     </div>
  184.                     {% endif %}
  185.                     {# FUNNEL-1: the save-prompt CTA. Lives OUTSIDE #sds-panel (the shell owns that
  186.                        element's contents) and entirely in this twig + server files — the shell JS
  187.                        files are untouched. Shown only once the studio is active (sds-panel visible). #}
  188.                     <div id="sdsf-card" class="sds-panel-card" style="display:none;margin-top:12px">
  189.                         <div style="font-weight:700;font-size:13.5px;margin-bottom:4px">Save your design</div>
  190.                         <div style="font-size:12.5px;color:var(--n-muted);margin-bottom:10px">
  191.                             Keep this layout — it stays with this browser and attaches to your account
  192.                             the moment you sign in or create one.
  193.                         </div>
  194.                         <button id="sdsf-save" class="n-btn n-btn-amber" type="button" style="padding:7px 14px;font-size:13px">Save design</button>
  195.                         <div id="sdsf-msg" style="font-size:12.5px;margin-top:8px"></div>
  196.                         {# FUNNEL-2: Request an offer — revealed after a successful save. The consent
  197.                            copy NAMES the receiving company (fetched per country) and is ENTWURF-
  198.                            watermarked until counsel clears the final text. #}
  199.                         <div id="sdsf-offer" style="display:none;border-top:1px solid var(--n-border-md);margin-top:12px;padding-top:12px">
  200.                             <div style="font-weight:700;font-size:13.5px;margin-bottom:6px">Request an offer</div>
  201.                             <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
  202.                                 <input id="sdsf-name" type="text" placeholder="Your name *" style="padding:8px;border:1.5px solid var(--n-border-md);border-radius:6px;font-size:13px">
  203.                                 <input id="sdsf-email" type="email" placeholder="Email *" style="padding:8px;border:1.5px solid var(--n-border-md);border-radius:6px;font-size:13px">
  204.                                 <input id="sdsf-phone" type="text" placeholder="Phone (optional)" style="padding:8px;border:1.5px solid var(--n-border-md);border-radius:6px;font-size:13px">
  205.                                 <select id="sdsf-country" style="padding:8px;border:1.5px solid var(--n-border-md);border-radius:6px;font-size:13px">
  206.                                     <option value="">Country *</option>
  207.                                     <option value="DE">Germany</option><option value="BD">Bangladesh</option>
  208.                                     <option value="SG">Singapore</option><option value="AT">Austria</option>
  209.                                     <option value="CH">Switzerland</option><option value="NL">Netherlands</option>
  210.                                     <option value="BE">Belgium</option><option value="FR">France</option>
  211.                                     <option value="IT">Italy</option><option value="ES">Spain</option>
  212.                                     <option value="PL">Poland</option><option value="GB">United Kingdom</option>
  213.                                     <option value="IN">India</option><option value="US">United States</option>
  214.                                     <option value="__other">Other…</option>
  215.                                 </select>
  216.                             </div>
  217.                             <input id="sdsf-country-other" type="text" maxlength="2" placeholder="2-letter country code (e.g. PT)" style="display:none;margin-top:8px;padding:8px;border:1.5px solid var(--n-border-md);border-radius:6px;font-size:13px;width:100%">
  218.                             <textarea id="sdsf-message" placeholder="Anything the partner should know? (optional)" rows="2" style="margin-top:8px;width:100%;padding:8px;border:1.5px solid var(--n-border-md);border-radius:6px;font-size:13px"></textarea>
  219.                             <label style="display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:12px;color:var(--n-muted);cursor:pointer">
  220.                                 <input id="sdsf-consent" type="checkbox" style="margin-top:2px">
  221.                                 <span>
  222.                                     <span style="display:inline-block;background:#fff3cd;color:#8a6d1a;border:1px solid #e8d48a;border-radius:4px;padding:0 6px;font-weight:700;font-size:11.5px;letter-spacing:.5px;margin-right:4px">ENTWURF</span>
  223.                                     I agree that my roof design and my contact details are sent to
  224.                                     <b id="sdsf-target">the responsible solar partner for my country</b>
  225.                                     so they can prepare an offer and contact me. <span style="opacity:.8">(Draft consent text — legal review pending / Rechtstext in Prüfung.)</span>
  226.                                 </span>
  227.                             </label>
  228.                             <button id="sdsf-send" class="n-btn n-btn-amber" type="button" style="margin-top:10px;padding:7px 14px;font-size:13px">Request offer</button>
  229.                             <div id="sdsf-offer-msg" style="font-size:12.5px;margin-top:8px"></div>
  230.                         </div>
  231.                     </div>
  232.                 </div>
  234.                 <button class="re-advanced-toggle" id="re-advanced-btn" type="button">⚙ Advanced settings ▾</button>
  235.                 <div id="re-advanced">
  236.                     <div class="re-field">
  237.                         <label>Sizing mode</label>
  238.                         <div class="re-toggle">
  239.                             <button type="button" id="re-mode-roof" class="active">Fit the roof</button>
  240.                             <button type="button" id="re-mode-load">Match my usage</button>
  241.                         </div>
  242.                     </div>
  243.                     <div class="re-field">
  244.                         <label>Electricity tariff (€/kWh)</label>
  245.                         <input id="re-tariff" type="number" min="0.01" step="0.01" value="0.22">
  246.                     </div>
  247.                     <div class="re-field">
  248.                         <label>Roof type</label>
  249.                         <select id="re-rooftype">
  250.                             <option value="10">Flat roof (C&amp;I) — 10° tilt</option>
  251.                             <option value="30">Pitched roof — 30° tilt</option>
  252.                         </select>
  253.                     </div>
  254.                     <div class="re-field">
  255.                         <label>Monthly use (kWh) — overrides the bill if set</label>
  256.                         <input id="re-monthly" type="number" min="0" step="100" placeholder="optional, e.g. 25000">
  257.                     </div>
  258.                     <div class="re-field">
  259.                         <label>Roof area (m²) — manual, if the map is unavailable</label>
  260.                         <input id="re-manual-area" type="number" min="10" step="10" placeholder="e.g. 1200">
  261.                     </div>
  262.                 </div>
  263.             </div>
  265.             {# ── RIGHT: the tagged estimate + the locked full design ── #}
  266.             <div>
  267.                 <div id="re-results" class="re-card">
  268.                     <div class="re-headline">
  269.                         <div class="v" id="k-headline">—</div>
  270.                         <div class="l">estimated bill saving / year <span id="k-headline-tag"></span></div>
  271.                     </div>
  272.                     <div class="re-kpis">
  273.                         <div class="re-kpi"><div class="v" id="k-kwp">—</div><div class="l">System size (kWp)</div><span id="t-kwp"></span></div>
  274.                         <div class="re-kpi"><div class="v" id="k-gen">—</div><div class="l">Annual yield (kWh)</div><span id="t-gen"></span></div>
  275.                         <div class="re-kpi"><div class="v" id="k-capex">—</div><div class="l">Indicative CAPEX</div><span id="t-capex"></span></div>
  276.                         <div class="re-kpi"><div class="v" id="k-payback">—</div><div class="l">Simple payback</div><span id="t-payback"></span></div>
  277.                     </div>
  278.                     <table class="re-meta">
  279.                         <tr><td class="ml">Modules</td><td class="mv"><span id="k-panels">—</span> pcs</td><td class="mt"></td></tr>
  280.                         <tr><td class="ml">Roof area</td><td class="mv"><span id="k-area">—</span> m²</td><td class="mt"><span id="t-roof"></span></td></tr>
  281.                         <tr><td class="ml">CO₂ avoided</td><td class="mv"><span id="k-co2">—</span> t/yr</td><td class="mt"><span id="t-co2"></span></td></tr>
  282.                         <tr><td class="ml">Grid export</td><td class="mv"><span id="k-export">—</span> kWh/yr</td><td class="mt"><span id="t-export"></span></td></tr>
  283.                         <tr><td class="ml">Data sources</td><td class="mv" colspan="2"><span id="k-src">—</span></td></tr>
  284.                     </table>
  285.                     <details class="re-legend"><summary>What the tags mean</summary>{{ hb360.legend() }}</details>
  287.                     {# The visibly-locked full design — the HB360 signup wall (H1b) #}
  288.                     <div class="re-locked">
  289.                         <div class="re-locked-blur">
  290.                             <table>
  291.                                 <tr><td>PV modules</td><td style="text-align:right">◼◼◼ pcs</td><td style="text-align:right">€ ◼◼,◼◼◼</td></tr>
  292.                                 <tr><td>Grid inverters</td><td style="text-align:right">◼ pcs</td><td style="text-align:right">€ ◼,◼◼◼</td></tr>
  293.                                 <tr><td>Mounting structure</td><td style="text-align:right">◼◼◼ set</td><td style="text-align:right">€ ◼,◼◼◼</td></tr>
  294.                                 <tr><td>DC / AC cabling &amp; protection</td><td style="text-align:right">◼◼◼ m</td><td style="text-align:right">€ ◼,◼◼◼</td></tr>
  295.                                 <tr><td>Monthly generation profile</td><td style="text-align:right" colspan="2">▁▂▄▆█▇▆▄▂▁</td></tr>
  296.                             </table>
  297.                         </div>
  298.                         <div class="re-locked-over">
  299.                             <div class="ttl"><i class="fa-solid fa-lock" style="color:var(--n-amber)"></i> The full design is ready</div>
  300.                             <ul class="re-locked-teaser" id="re-locked-teaser"></ul>
  301.                             {# Logged-in applicants skip the wall; guests go to LOGIN (which offers
  302.                                signup) — the hb360_anon cookie routes them back to their saved
  303.                                estimate after auth, so no refRoute plumbing is needed. #}
  304.                             {% set _hbApplicant = app.session.get('userType') == 8 %}
  305.                             <a href="{{ _hbApplicant ? url('hb360_my_estimate') : url('user_login') }}" class="n-btn n-btn-amber" style="justify-content:center">See the full design &amp; save this <i class="fa-solid fa-arrow-right"></i></a>
  306.                             <div class="re-muted" style="font-size:12px" id="re-saved-note">Free account · your estimate is kept for you</div>
  307.                         </div>
  308.                     </div>
  310.                     <div class="re-note" id="re-disclaimer"></div>
  311.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="width:100%;justify-content:center;margin-top:14px">Book a HoneyCore Site Assessment <i class="fa-solid fa-arrow-right"></i></a>
  312.                     <p class="re-muted" style="text-align:center;margin-top:8px">From €499/site, credited against deployment.</p>
  313.                 </div>
  314.                 <div class="re-card" id="re-empty" style="text-align:center;color:var(--n-muted);font-size:14px;line-height:1.7">
  315.                     <i class="fa-solid fa-solar-panel" style="font-size:28px;color:var(--n-amber);display:block;margin-bottom:10px"></i>
  316.                     Enter an address and your monthly bill on the left —<br>your instant estimate appears here.
  317.                 </div>
  318.             </div>
  319.         </div>
  320.     </div>
  321. </section>
  323. <script>
  324. (function () {
  325.     var state = { area: 0, lat: 0, lng: 0, mode: 'roof', map: null, poly: null, manual: false };
  327.     var $ = function (id) { return document.getElementById(id); };
  328.     function setMode(m) {
  329.         state.mode = m;
  330.         $('re-mode-roof').classList.toggle('active', m === 'roof');
  331.         $('re-mode-load').classList.toggle('active', m === 'load');
  332.     }
  333.     $('re-mode-roof').onclick = function () { setMode('roof'); };
  334.     $('re-mode-load').onclick = function () { setMode('load'); };
  335.     $('re-advanced-btn').onclick = function () {
  336.         var a = $('re-advanced');
  337.         a.style.display = a.style.display === 'block' ? 'none' : 'block';
  338.     };
  339.     $('re-manual-area').oninput = function () { state.area = parseFloat(this.value) || 0; state.manual = true; reflectArea(); };
  340.     function reflectArea() {
  341.         if (state.area > 0) { $('re-area-pill').style.display = 'inline-flex'; $('re-area-val').textContent = Math.round(state.area).toLocaleString(); }
  342.     }
  344.     // ── Google Maps (draw-to-trace fallback). Defined globally for the API callback. ──
  345.     window.initRooftop = function () {
  346.         try {
  347.             var map = new google.maps.Map($('re-map'), { center: { lat: 48.40, lng: 9.99 }, zoom: 18, mapTypeId: 'satellite', tilt: 0, streetViewControl: false });
  348.             state.map = map;
  349.             try {
  350.                 if (google.maps.places && google.maps.places.Autocomplete) {
  351.                     var ac = new google.maps.places.Autocomplete($('re-search'));
  352.                     ac.bindTo('bounds', map);
  353.                     ac.addListener('place_changed', function () {
  354.                         var p = ac.getPlace();
  355.                         if (p.geometry) { map.setCenter(p.geometry.location); map.setZoom(20); }
  356.                     });
  357.                 }
  358.             } catch (acErr) { /* no autocomplete — typing a full address still works */ }
  359.             state.points = [];
  360.             state.poly = new google.maps.Polygon({ map: map, paths: [], fillColor: '#C07D2A', fillOpacity: .25, strokeColor: '#C07D2A', strokeWeight: 2, clickable: false });
  361.             var recompute = function () {
  362.                 state.poly.setPath(state.points);
  363.                 if (state.points.length >= 3) {
  364.                     state.area = google.maps.geometry.spherical.computeArea(state.poly.getPath());
  365.                     state.manual = false;
  366.                     var lat = 0, lng = 0;
  367.                     state.points.forEach(function (p) { lat += p.lat(); lng += p.lng(); });
  368.                     state.lat = lat / state.points.length; state.lng = lng / state.points.length;
  369.                     reflectArea();
  370.                 }
  371.             };
  372.             map.addListener('click', function (e) {
  373.                 // SDS0: while the studio owns the drawing (focused, or zones exist),
  374.                 // the simple one-polygon trace stands down.
  375.                 if (window.SDSShell && SDSShell.blocksSimpleTrace()) return;
  376.                 state.points.push(e.latLng); recompute(); $('re-redraw').style.display = 'inline-flex';
  377.             });
  378.             state.clearDraw = function () { state.points = []; state.poly.setPath([]); state.area = 0; $('re-area-pill').style.display = 'none'; };
  379.             $('re-redraw').onclick = state.clearDraw;
  380.             // SDS0 studio shell (optional asset — page fully works without it).
  381.             var sdsBridge = { simple: state, clearSimple: function () { state.clearDraw(); $('re-redraw').style.display = 'none'; } };
  382.             if (window.SDSShell) { SDSShell.attach(map, sdsBridge); } else { window.__SDS_PENDING = { map: map, bridge: sdsBridge }; }
  383.         } catch (e) {
  384.             $('re-map').innerHTML = '<div style="padding:40px;text-align:center;color:#6B6E7F">Map unavailable — use “Advanced settings → Roof area (manual)”.</div>';
  385.         }
  386.     };
  387.     window.gm_authFailure = function () {
  388.         $('re-map').innerHTML = '<div style="padding:40px;text-align:center;color:#6B6E7F">Map unavailable — use “Advanced settings → Roof area (manual)”.</div>';
  389.     };
  391.     function err(msg) { $('re-err').textContent = msg; $('re-err').style.display = 'block'; }
  392.     function commonParams() {
  393.         return {
  394.             mode: state.mode,
  395.             monthly_kwh: $('re-monthly').value || 0,
  396.             monthly_bill: $('re-bill').value || 0,
  397.             tariff: $('re-tariff').value || 0.22,
  398.             tilt: $('re-rooftype').value || 10
  399.         };
  400.     }
  402.     // A drawn outline is the user's explicit statement of the roof — it always
  403.     // wins over auto-detection. Typing a NEW address invalidates the old drawing.
  404.     $('re-search').addEventListener('input', function () {
  405.         if (state.points && state.points.length && state.clearDraw) { state.clearDraw(); $('re-redraw').style.display = 'none'; }
  406.         // A new address invalidates studio zones too (different site).
  407.         if (window.SDSShell && SDSShell.clearAllZones) { SDSShell.clearAllZones(); }
  408.     });
  410.     // ── Primary flow: address (+ bill) → auto roof → estimate ──
  411.     $('re-auto').onclick = function () {
  412.         var addr = ($('re-search').value || '').trim();
  413.         $('re-err').style.display = 'none'; $('re-auto-status').style.display = 'none';
  414.         // If the user traced the roof, use THAT — not the auto-detected footprint.
  415.         if (state.points && state.points.length >= 3 && state.area > 5) {
  416.             var s = $('re-auto-status'); s.style.display = 'block';
  417.             s.innerHTML = '<i class="fa-solid fa-draw-polygon" style="color:var(--n-amber)"></i> Using your drawn roof outline (' + Math.round(state.area).toLocaleString() + ' m²).';
  418.             estimateFromArea();
  419.             return;
  420.         }
  421.         if (!addr) { $('re-search').focus(); return; }
  422.         $('re-auto').disabled = true; $('re-auto').innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Detecting roof &amp; modelling…';
  423.         var p = commonParams(); p.address = addr;
  424.         fetch('{{ url('honeybee_rooftop_auto') }}', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams(p).toString() })
  425.             .then(function (r) { return r.json(); })
  426.             .then(function (d) {
  427.                 $('re-auto').disabled = false; $('re-auto').innerHTML = '<i class="fa-solid fa-bolt"></i> Get my instant estimate';
  428.                 if (d.ok) { render(d); return; }
  429.                 if (d.needs_manual && state.map && d.lat) {
  430.                     state.map.setCenter({ lat: d.lat, lng: d.lng }); state.map.setZoom(20);
  431.                     if (state.clearDraw) state.clearDraw();
  432.                     var s = $('re-auto-status'); s.style.display = 'block';
  433.                     s.innerHTML = '<i class="fa-solid fa-circle-info" style="color:var(--n-amber)"></i> ' + (d.error || 'Trace the roof on the map below.') + (d.formatted_address ? ' <b>' + d.formatted_address + '</b>' : '');
  434.                 } else {
  435.                     err(d.error || 'Could not auto-detect — trace the roof on the map.');
  436.                 }
  437.             })
  438.             .catch(function () { $('re-auto').disabled = false; $('re-auto').innerHTML = '<i class="fa-solid fa-bolt"></i> Get my instant estimate'; err('Network error — please try again.'); });
  439.     };
  441.     // ── Drawn / manual roof → estimate (shared by both buttons) ──
  442.     function estimateFromArea() {
  443.         $('re-err').style.display = 'none';
  444.         // SDS0: when studio zones exist they ARE the roof — use their SUM
  445.         // (with a single zone this equals the old single-polygon behavior).
  446.         var zs = window.SDSShell && SDSShell.estimateSource && SDSShell.estimateSource();
  447.         if (zs && zs.area > 5) { state.area = zs.area; state.lat = zs.lat; state.lng = zs.lng; state.manual = false; }
  448.         if (!state.area || state.area < 5) { err('Trace the roof on the map (or enter an area in Advanced settings) first.'); return; }
  449.         var lat = state.lat || 50, lng = state.lng || 9;
  450.         $('re-spin').style.display = 'block';
  451.         var p = commonParams();
  452.         p.lat = lat; p.lng = lng; p.area_m2 = state.area; p.roof_source = state.manual ? 'manual' : 'map';
  453.         fetch('{{ url('honeybee_rooftop_calc') }}', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams(p).toString() })
  454.             .then(function (r) { return r.json(); })
  455.             .then(function (d) {
  456.                 $('re-spin').style.display = 'none';
  457.                 if (!d.ok) { err(d.error || 'Could not calculate.'); return; }
  458.                 render(d);
  459.             })
  460.             .catch(function () { $('re-spin').style.display = 'none'; err('Network error — please try again.'); });
  461.     }
  462.     $('re-go').onclick = estimateFromArea;
  464.     function eur(n) { return '€' + Math.round(n).toLocaleString('de-DE'); }
  465.     function tag(el, fig) { if (fig) { $(el).innerHTML = hb360Tag(fig.tag, fig.basis); } }
  466.     function render(d) {
  467.         var f = d.figures || {};
  468.         $('k-headline').textContent = eur(d.annual_savings);
  469.         $('k-headline-tag').innerHTML = d.headline ? hb360Tag(d.headline.tag, (f.annual_savings || {}).basis) : '';
  470.         $('k-kwp').textContent = d.kwp.toLocaleString();
  471.         $('k-gen').textContent = Math.round(d.annual_gen_kwh).toLocaleString();
  472.         $('k-capex').textContent = eur(d.capex_eur);
  473.         $('k-payback').textContent = d.payback_years ? d.payback_years + ' yrs' : '—';
  474.         tag('t-kwp', f.system_kwp); tag('t-gen', f.annual_yield); tag('t-capex', f.capex); tag('t-payback', f.payback);
  475.         $('k-panels').textContent = d.panels.toLocaleString();
  476.         $('k-co2').textContent = d.co2_tonnes_yr; tag('t-co2', f.co2);
  477.         $('k-area').textContent = (d.area_m2 || 0).toLocaleString(); tag('t-roof', f.roof_area);
  478.         $('k-export').textContent = Math.round(d.export_kwh || 0).toLocaleString(); tag('t-export', f.grid_export);
  479.         $('k-src').textContent = (d.yield_source || '—') + (d.roof_source ? ' · roof via ' + d.roof_source : '');
  480.         var tz = $('re-locked-teaser'); tz.innerHTML = '';
  481.         ((d.locked && d.locked.teaser) || []).forEach(function (t) {
  482.             var li = document.createElement('li'); li.textContent = t; tz.appendChild(li);
  483.         });
  484.         $('re-disclaimer').textContent = (d.formatted_address ? '📍 ' + d.formatted_address + ' — ' : '') + d.disclaimer;
  485.         if (d.saved) { $('re-saved-note').innerHTML = '<i class="fa-solid fa-check" style="color:var(--n-amber)"></i> Estimate saved — it will be waiting for you after sign-in.'; }
  486.         $('re-empty').style.display = 'none';
  487.         $('re-results').style.display = 'block';
  488.         $('re-results').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  489.     }
  490. })();
  491. </script>
  492. {# ── SDS0 · Solar Design Studio shell (page-scoped assets, NOT in the gulp bundles).
  493.      sds-layout.js is SDS1's file — the shell probe-loads it and degrades gracefully
  494.      while it does not exist yet. ── #}
  495. {# SDS3: the PUBLIC studio stays TRANSIENT (no saveUrl — no new public write surface);
  496.    signInMsg renders the "sign in to save" hint in the panel. Persistence lives on the
  497.    tenant boxes at /solar-studio (session-gated). #}
  498. <script>window.SDS_BOOT = { layoutUrl: '{{ asset('honeybee_web_assets/js/sds-layout.js') }}?v=21', calcUrl: '{{ url('honeybee_rooftop_calc') }}', density: 0.18, usable: 0.75, signInMsg: 'Sign in to your HoneyBee ERP to save designs and generate priced proposals.' };</script>
  499. <script src="{{ asset('honeybee_web_assets/js/sds-shell.js') }}?v=30" defer onerror="console.warn('SDS shell unavailable — simple estimator only')"></script>
  500. {# ── FUNNEL-1: anonymous design save (CTA + wire live ONLY in this twig + server files;
  501.      the shell JS is untouched — the card consumes the shell's public exportDesign() seam).
  502.      Fully guarded: if the shell/seam is absent the card simply never shows. ── #}
  503. <script>
  504. (function () {
  505.     var saveUrl = '{{ url('honeybee_rooftop_design_save') }}';
  506.     var signUpUrl = '{{ path('sign_up', {'refRoute': 'hb360_my_estimate'}) }}';
  507.     var loginUrl = '{{ path('central_login') }}';
  508.     // FUNNEL-3: the signed-in applicant's owned design + account prefill (null for guests)
  509.     var MY_DESIGN = {{ my_design is defined and my_design ? my_design|json_encode|raw : 'null' }};
  510.     var PREFILL = {{ applicant is defined and applicant ? applicant|json_encode|raw : 'null' }};
  511.     var busy = false;
  512.     // load the owned design into the studio once the shell + engine are up (the same
  513.     // probe-wait the tenant studio uses; gives up silently — the page stays usable)
  514.     if (MY_DESIGN && MY_DESIGN.payload) {
  515.         var importTries = 0;
  516.         var importTimer = setInterval(function () {
  517.             importTries++;
  518.             var ready = window.SDSShell && typeof window.SDSShell.importDesign === 'function'
  519.                 && window.google && window.google.maps && window.SolarLayout;
  520.             if (ready || importTries > 40) {
  521.                 clearInterval(importTimer);
  522.                 if (ready) {
  523.                     try { window.SDSShell.importDesign(MY_DESIGN.payload); } catch (e) { /* page stays usable */ }
  524.                 }
  525.             }
  526.         }, 500);
  527.     }
  528.     function el(id) { return document.getElementById(id); }
  529.     function esc(s) { var d = document.createElement('div'); d.textContent = String(s == null ? '' : s); return d.innerHTML; }
  530.     function msg(html, isErr) {
  531.         var m = el('sdsf-msg');
  532.         if (m) { m.innerHTML = html; m.style.color = isErr ? '#b4452f' : 'var(--n-muted)'; m.style.fontWeight = isErr ? '600' : ''; }
  533.     }
  534.     // Show the card only while the studio is actually active (the shell toggles sds-show).
  535.     setInterval(function () {
  536.         var card = el('sdsf-card'), panel = el('sds-panel');
  537.         if (!card || !panel) { return; }
  538.         var active = panel.classList.contains('sds-show')
  539.             && window.SDSShell && typeof window.SDSShell.exportDesign === 'function';
  540.         card.style.display = active ? 'block' : 'none';
  541.     }, 800);
  542.     document.addEventListener('click', function (ev) {
  543.         if (!ev.target || ev.target.id !== 'sdsf-save' || busy) { return; }
  544.         if (!window.SDSShell || typeof window.SDSShell.exportDesign !== 'function') { return; }
  545.         var ex = window.SDSShell.exportDesign();
  546.         if (ex.error) { msg(esc(ex.error), true); return; }
  547.         busy = true;
  548.         msg('Saving…', false);
  549.         var addr = el('re-search') ? el('re-search').value : '';
  550.         fetch(saveUrl, {
  551.             method: 'POST',
  552.             headers: { 'Content-Type': 'application/json' },
  553.             body: JSON.stringify({ payload: ex.payload, address: addr,
  554.                 project_id: MY_DESIGN ? MY_DESIGN.id : 0 })
  555.         }).then(function (r) { return r.json().then(function (j) { return { status: r.status, j: j }; }); })
  556.           .then(function (res) {
  557.             busy = false;
  558.             var j = res.j || {};
  559.             if (j.ok && j.saved) {
  560.                 var s = j.saved.summary || {};
  561.                 if (MY_DESIGN && j.saved.project_id === MY_DESIGN.id) {
  562.                     msg('Design updated on your account — ' + esc(s.zones) + ' zone(s) · '
  563.                         + esc(s.modules) + ' modules · ' + esc(s.kwp) + ' kWp.', false);
  564.                 } else {
  565.                     msg('Design saved — ' + esc(s.zones) + ' zone(s) · ' + esc(s.modules) + ' modules · '
  566.                         + esc(s.kwp) + ' kWp (as designed in the studio).<br>'
  567.                         + '<a href="' + signUpUrl + '" style="color:var(--n-amber);font-weight:600">Create a free account</a> or '
  568.                         + '<a href="' + loginUrl + '" style="color:var(--n-amber);font-weight:600">sign in</a> to keep it '
  569.                         + 'and see it under “My Solar Estimates”.', false);
  570.                 }
  571.                 var off = el('sdsf-offer');
  572.                 if (off) { off.style.display = 'block'; }
  573.             } else {
  574.                 msg(esc(j.error || ('Could not save (HTTP ' + res.status + ') — please try again.')), true);
  575.             }
  576.         }).catch(function () {
  577.             busy = false;
  578.             msg('Could not reach the server — your design stays in this browser tab. Try again in a moment.', true);
  579.         });
  580.     });
  582.     // ── FUNNEL-2: Request an offer (outbox insert on the server; delivery is the cron's) ──
  583.     var targetUrl = '{{ url('honeybee_rooftop_offer_target') }}';
  584.     var offerUrl = '{{ url('honeybee_rooftop_request_offer') }}';
  585.     var offerBusy = false;
  586.     // FUNNEL-3: pre-fill the contact fields from the signed-in account (editable)
  587.     if (PREFILL) {
  588.         var pn = el('sdsf-name'), pe = el('sdsf-email');
  589.         if (pn && !pn.value && PREFILL.name) { pn.value = PREFILL.name; }
  590.         if (pe && !pe.value && PREFILL.email) { pe.value = PREFILL.email; }
  591.     }
  592.     function offerMsg(html, isErr) {
  593.         var m = el('sdsf-offer-msg');
  594.         if (m) { m.innerHTML = html; m.style.color = isErr ? '#b4452f' : 'var(--n-muted)'; m.style.fontWeight = isErr ? '600' : ''; }
  595.     }
  596.     function offerCountry() {
  597.         var sel = el('sdsf-country');
  598.         if (!sel) { return ''; }
  599.         if (sel.value === '__other') {
  600.             var o = el('sdsf-country-other');
  601.             return o ? o.value.trim().toUpperCase() : '';
  602.         }
  603.         return sel.value;
  604.     }
  605.     document.addEventListener('change', function (ev) {
  606.         if (!ev.target) { return; }
  607.         if (ev.target.id === 'sdsf-country') {
  608.             var other = el('sdsf-country-other');
  609.             if (other) { other.style.display = ev.target.value === '__other' ? 'block' : 'none'; }
  610.         }
  611.         if (ev.target.id === 'sdsf-country' || ev.target.id === 'sdsf-country-other') {
  612.             var cc = offerCountry();
  613.             var tgt = el('sdsf-target');
  614.             if (!tgt || !/^[A-Z]{2}$/.test(cc)) { return; }
  615.             fetch(targetUrl + '?country=' + encodeURIComponent(cc))
  616.                 .then(function (r) { return r.json(); })
  617.                 .then(function (j) {
  618.                     if (j.ok && j.company) { tgt.textContent = j.company; }
  619.                     else { tgt.textContent = 'the responsible solar partner for my country'; if (j.unrouted) { offerMsg(esc(j.error), false); } }
  620.                 }).catch(function () { /* preview is best-effort */ });
  621.         }
  622.     });
  623.     document.addEventListener('click', function (ev) {
  624.         if (!ev.target || ev.target.id !== 'sdsf-send' || offerBusy) { return; }
  625.         var cc = offerCountry();
  626.         var consent = el('sdsf-consent');
  627.         offerBusy = true;
  628.         offerMsg('Sending…', false);
  629.         fetch(offerUrl, {
  630.             method: 'POST',
  631.             headers: { 'Content-Type': 'application/json' },
  632.             body: JSON.stringify({
  633.                 name: el('sdsf-name') ? el('sdsf-name').value : '',
  634.                 email: el('sdsf-email') ? el('sdsf-email').value : '',
  635.                 phone: el('sdsf-phone') ? el('sdsf-phone').value : '',
  636.                 country: cc,
  637.                 message: el('sdsf-message') ? el('sdsf-message').value : '',
  638.                 consent: !!(consent && consent.checked),
  639.                 project_id: MY_DESIGN ? MY_DESIGN.id : 0
  640.             })
  641.         }).then(function (r) { return r.json().then(function (j) { return { status: r.status, j: j }; }); })
  642.           .then(function (res) {
  643.             offerBusy = false;
  644.             var j = res.j || {};
  645.             if (j.ok) {
  646.                 offerMsg('<b style="color:#1e7b34">Request received.</b> ' + esc(j.note || ''), false);
  647.             } else {
  648.                 offerMsg(esc(j.error || ('Could not send (HTTP ' + res.status + ').')), true);
  649.             }
  650.         }).catch(function () {
  651.             offerBusy = false;
  652.             offerMsg('Could not reach the server — please try again in a moment.', true);
  653.         });
  654.     });
  655. })();
  656. </script>
  657. <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ maps_key|default('AIzaSyBJxyUy8a_U2rSdIUApVDoK_dcvgGkoeDk') }}&libraries=places,geometry&callback=initRooftop&v=weekly"></script>
  659. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}