<!--
=================================================================
  RESERVE UNIT — reserve-unit.html
  URL: /get-a-quote/reserve-unit?dealId=XXX&size=XX

  WHAT THIS PAGE DOES:
  Final confirmation page before £10 deposit payment.
  Reached by clicking "Reserve a X sq ft unit now" on
  the Reserve Now page (/get-a-quote/reserve-now).

  Shows:
  - Quote summary (size, site, pricing) + unit image
  - Confirm move in date (pre-filled, editable)
  - Confirm personal details (pre-filled from HubSpot contact)
  - Address fields (manual entry)
  - £10 deposit payment via Stripe Payment Element, with a
    saved-card shortcut when the contact already has one on file

  URL PARAMETERS:
    dealId = HubSpot Deal record ID

  HOW DATA IS LOADED:
  On page load JS calls /hs/serverless/get-quote?dealId=XXX
  which returns deal properties, contact details and site name.
  All fields pre-filled from the response.

  PRE-FILLED FROM HUBSPOT:
  Contact: firstname, lastname, email, phone, address, city,
           zip, country
  Deal:    selected_size, sm_estimated_start_date, storage_type,
           sm_offer_rate, sm_standard_rate, sm_discount_percentage,
           sm_quote_duration_weeks

  ON PAYMENT SUCCESS:
  Stripe confirms the £10 deposit (new card via handlePayment() +
  submitDepositPayment(), or an existing saved card via
  payWithSavedCard()), then /hs/serverless/confirm-reservation is
  called with the confirmed contact/address details, the move-in
  date, and the deal's pricing fields — that function is
  responsible for writing all of it back to HubSpot. The page then
  redirects to reservation-confirmation regardless of whether that
  HubSpot write succeeds, since the payment itself already went
  through by that point.

  CHANGE — TITLE (SALUTATION) NOW ACTUALLY SENT:
  The Title select has existed in the form since the start, but
  was never read into _formSnapshot or included in any payload
  sent to confirm-reservation.js. Confirmed as the root cause of
  the client-reported bug where salutation wasn't mapping to
  either HubSpot or RS3, since the value never left the browser at
  all. Now collected in all three snapshot blocks and included in
  both confirm-reservation calls (saved card and new card paths).
  confirm-reservation.js accepts and uses this field — writes it
  to HubSpot's salutation property and to RS3 via UpdateCustomerName.

  CHANGES — MAX RESERVATION DAYS ALERT:
  - RS3's Sites/GetFullSiteById returns reservationValidDays: the
    maximum number of days from today a reservation can be made
    for that site (confirmed by Mark — distinct from
    unitAllocationDays, which is a separate internal RS3
    allocation behavior with no customer-facing effect).
  - get-quote.js now returns `siteHsId` (the Site's HubSpot object
    ID). Once populatePage() runs, a separate call to
    /hs/serverless/get-reservation-limit fetches the LIVE
    reservationValidDays from RS3 (via the site's rs3_site_id,
    numeric — NOT the alphanumeric sm_site_id used elsewhere for
    pricing/customer calls), syncs it into the
    sm_reservation_valid_days site property if it's changed, and
    refreshes updateBanner() with the real value. Kept as its own
    function rather than folded into get-quote.js, since get-quote
    is also called by reserve-now.html, which never needs this
    check — this avoids an extra RS3 call and HubSpot PATCH firing
    on a page that doesn't use the result.
  - If the selected move-in date is more than reservationValidDays
    days from today, the green "valid for" banner is replaced with
    a red alert, the date field is marked invalid, and payment
    submission (both new-card and saved-card paths) is blocked
    until the date is corrected.
  - Fails safe: reservationValidDays starts null and the check only
    fires once it's a real number, so a slow/failed fetch never
    blocks a legitimate booking — it just means the limit check
    simply isn't active yet for that page view.

  PORTAL ID: 147378793
=================================================================
--><!doctype html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reserve Your Unit — Get a Quote</title>

  <style>
    /* ── Reset & Base ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --brand:      #d30072;
      --brand-dk:   #a8005a;
      --green:      #97d700;
      --text:       #1a1a1a;
      --text-muted: #6b7280;
      --bg:         #ffffff;
      --bg-surface: #f9fafb;
      --border:     #e5e7eb;
      --border-md:  #d1d5db;
      --radius-sm:  6px;
      --radius-md:  10px;
      --radius-lg:  14px;
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      font-family: var(--font);
      font-size: 15px;
      color: var(--text);
      background: #ffffff;
      min-height: 100vh;
    }

    /* ── Staging banner ────────────────────────────────────────
       TO GO LIVE: change display:block to display:none
    ──────────────────────────────────────────────────────────── */
    .env-banner {
      background: #fde8f0;
      border-bottom: 1px solid #f4afc9;
      text-align: center;
      padding: 7px 16px;
      font-size: 12px;
      color: #8b1a47;
      font-weight: 500;
      letter-spacing: 0.04em;
      display: block;
    }

    /* ── Portal wrapper ─────────────────────────────────────── */
    .portal { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }

    /* ── Nav bar ────────────────────────────────────────────────
       Return to quote left, Exit quote right.
    ──────────────────────────────────────────────────────────── */
    .quote-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
    }
    .quote-nav a {
      font-size: 13px;
      color: var(--brand);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 500;
    }
    .quote-nav a:hover { text-decoration: underline; }

    /* ── Page heading ───────────────────────────────────────────
       "Hi [firstname]"
    ──────────────────────────────────────────────────────────── */
    .page-heading {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: var(--text);
      margin-bottom: 20px;
    }
    .page-heading .name { color: var(--green); font-weight: 600; }

    /* ── Quote summary strip ────────────────────────────────────
       Compact two-column layout showing pricing + unit image.
       Matches the top of their Reserve Unit page.
    ──────────────────────────────────────────────────────────── */
    .quote-summary {
      display: flex;
      gap: 0;
      border: 1px solid var(--border-md);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: 28px;
      background: var(--bg);
    }

    /* Left — pricing info */
    .summary-left {
      flex: 1;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .summary-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 8px;
      text-align: center;
    }
    .summary-offer {
      font-size: 17px;
      color: var(--text);
      text-align: center;
      margin-bottom: 4px;
    }
    .summary-offer .highlight { color: var(--green); font-weight: 700; }
    .summary-rate {
      font-size: 26px;
      font-weight: 700;
      color: var(--brand);
      text-align: center;
      margin-bottom: 2px;
    }
    .summary-standard {
      font-size: 13px;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 12px;
    }
    .summary-details {
      font-size: 13px;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.6;
    }
    .summary-details em { color: var(--brand); font-style: italic; }

    /* Right — unit image/video */
    .summary-right {
      flex: 1;
      position: relative;
      min-height: 240px;
      background: #f0f0f5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #unitImage {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      position: relative;
      z-index: 1;
      transition: opacity 0.3s ease;
    }
    #unitVideo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: absolute;
      top: 50%; left: 0;
      transform: translateY(-50%);
      background: #f0f0f5;
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .play-video {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: var(--brand);
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      z-index: 4;
      transition: opacity 0.3s ease;
    }
    .play-icon {
      width: 44px; height: 44px;
      background: var(--brand);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(211,0,114,0.4);
    }
    .play-icon::after {
      content: "";
      display: block;
      width: 0; height: 0;
      border-style: solid;
      border-width: 7px 0 7px 12px;
      border-color: transparent transparent transparent #fff;
      margin-left: 3px;
    }

    /* ── Section headings ───────────────────────────────────────
       Centred black headings matching their page style.
    ──────────────────────────────────────────────────────────── */
    .section-heading {
      font-size: 22px;
      font-weight: 400;
      color: var(--text);
      text-align: center;
      margin: 28px 0 20px;
    }

    /* ── Info banner ────────────────────────────────────────────
       Green banner beneath "Confirm your move in date". Shows how
       many days away the currently-selected move-in date is.
       Replaced by .date-limit-alert instead when that date exceeds
       the site's reservationValidDays — see updateBanner().
    ──────────────────────────────────────────────────────────── */
    .info-banner {
      background: #eaf7cc;
      border: 1px solid #c3e88d;
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      font-size: 13px;
      color: #3a6b00;
      margin-bottom: 20px;
      text-align: center;
    }

    /* ── Date limit alert ───────────────────────────────────────
       Shown instead of the green info-banner when the selected
       move-in date exceeds the site's reservationValidDays
       (max days in advance a reservation can be made, per RS3).
    ──────────────────────────────────────────────────────────── */
    .date-limit-alert {
      display: none;
      background: #fde8ef;
      border: 1px solid #d63384;
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      font-size: 13px;
      color: #8b1a47;
      margin-bottom: 20px;
      text-align: center;
      line-height: 1.5;
    }

    /* ── Form container ─────────────────────────────────────────
       White card holding all form sections.
    ──────────────────────────────────────────────────────────── */
    .form-container {
      max-width: 600px;
      margin: 0 auto;
    }

    /* ── Form groups ────────────────────────────────────────────
       Each field has label, input and optional hint/error.
    ──────────────────────────────────────────────────────────── */
    .form-group { margin-bottom: 18px; }
    .form-group label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 5px;
    }
    .form-group label .required { color: var(--brand); margin-left: 2px; }
    .form-group input,
    .form-group select {
      width: 100%;
      padding: 9px 12px;
      border: 1px solid var(--border-md);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font);
      color: var(--text);
      background: var(--bg);
      transition: border-color 0.15s;
      appearance: none;
    }
    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(211,0,114,0.08);
    }
    .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
    .form-group .error-msg { font-size: 12px; color: #e53e3e; margin-top: 4px; display: none; }
    .form-group.has-error input,
    .form-group.has-error select { border-color: #e53e3e; }
    .form-group.has-error .error-msg { display: block; }

    /* Custom chevron for selects */
    .select-wrap { position: relative; }
    .select-wrap::after {
      content: '';
      position: absolute;
      right: 12px; top: 50%;
      transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--text-muted);
      pointer-events: none;
    }

    /* ── Two column row ─────────────────────────────────────────
       Used for title/firstname/surname and other paired fields.
    ──────────────────────────────────────────────────────────── */
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .form-row-3 {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      gap: 14px;
    }

    /* ── Address section ────────────────────────────────────────
       Manual address fields — no postcode lookup.
    ──────────────────────────────────────────────────────────── */
    .address-section {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px;
      margin-bottom: 18px;
    }
    .address-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 16px;
    }

    /* ── Payment section ────────────────────────────────────────
       £10 deposit via Stripe Payment Element (mounted into
       #stripe-deposit-element by handlePayment()). A saved-card
       shortcut renders above this when the contact has one on
       file — see renderSavedCards().
    ──────────────────────────────────────────────────────────── */
    .payment-section {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px;
      margin-top: 24px;
      text-align: center;
    }
    .payment-label {
      font-size: 15px;
      color: var(--text);
      margin-bottom: 14px;
    }
    .btn-pay {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--brand);
      color: #fff;
      border: none;
      padding: 13px 32px;
      border-radius: var(--radius-sm);
      font-size: 15px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-pay:hover { background: var(--brand-dk); }
    .btn-pay:disabled { background: var(--border-md); cursor: not-allowed; }

    /* ── Loading / error states ─────────────────────────────────
       Shown while get-quote fetch is in progress or fails.
    ──────────────────────────────────────────────────────────── */
    .loading-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .loading-dots { display: inline-flex; gap: 5px; align-items: center; }
    .loading-dots span {
      width: 6px; height: 6px;
      background: var(--brand);
      border-radius: 50%;
      animation: dot-pulse 1.2s ease-in-out infinite;
    }
    .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
    .loading-dots span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes dot-pulse {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .error-state { text-align: center; padding: 60px 20px; color: var(--text-muted); display: none; }
    .error-state a { color: var(--brand); }

    /* ── Help bar ───────────────────────────────────────────── */
    .help-bar {
      text-align: center;
      padding: 28px 0;
      border-top: 1px solid var(--border);
      margin-top: 28px;
    }
    .help-bar p { font-size: 14px; color: var(--text); margin-bottom: 4px; }
    .help-bar a { color: var(--brand); text-decoration: none; font-weight: 700; }
    .help-bar a:hover { text-decoration: underline; }

    /* ── Feefo badge ────────────────────────────────────────── */
    .feefo-badge { text-align: center; padding: 16px 0 28px; }
    .feefo-stars { color: #f5a623; font-size: 20px; letter-spacing: 2px; }
    .feefo-text  { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
    .feefo-logo  { font-size: 22px; font-weight: 700; color: #1a3c5e; display: inline; }
    .feefo-row   { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }

    @media (max-width: 600px) {
      .quote-summary { flex-direction: column; }
      .form-row, .form-row-3 { grid-template-columns: 1fr; }
      .section-heading { font-size: 18px; }
    }
  </style>

  <!-- Loqate loader (account: READY11121) — loaded at PAGE LOAD, exactly
       like personal-details.html. Loading it late (deferred/injected after
       the page's load events) leaves sensor.js half-initialised (pca.fieldMode
       and the capture APIs never attach), which is why a deferred load didn't
       work. Load it normally so pca initialises fully; the re-scan after the
       form is revealed (see rssLoqateRescan, called from populatePage) handles
       the fact that #AddressSearch starts hidden. -->
  <script>(function(n,t,i,r){var u,f;n[i]=n[i]||{},n[i].initial={accountCode:"READY11121",host:"READY11121.pcapredict.com"},n[i].on=n[i].on||function(){(n[i].onq=n[i].onq||[]).push(arguments)},u=t.createElement("script"),u.async=!0,u.src=r,f=t.getElementsByTagName("script")[0],f.parentNode.insertBefore(u,f)})(window,document,"pca","//READY11121.pcapredict.com/js/sensor.js")</script>

  <!--
    Loqate urlRestriction override (kept from personal-details): the served
    sensor.js doesn't reflect the dashboard allowlist, so we add this origin
    client-side. Only affects the "render here" gate, not server-side auth.
    Safe to remove once Loqate serves the domain correctly.
  -->
  <script>
  (function() {
    var TARGET_KEY = 'JR28-HU29-EH65-WK99';

    function patchAndLoad() {
      if (!(window.pca && pca.platform && typeof pca.platform.setProductList === 'function' && pca.platform.productList)) {
        return false;
      }
      try {
        var pl = JSON.parse(JSON.stringify(pca.platform.productList));
        var entry = pl[TARGET_KEY] && pl[TARGET_KEY].PLATFORM_CAPTUREPLUS;
        if (entry && entry.restrictions) {
          var origin = window.location.origin + '/';
          var alreadyThere = entry.restrictions.some(function(r) {
            return r.Key === 'urlRestriction' && r.Value.indexOf(origin) !== -1;
          });
          if (!alreadyThere) {
            entry.restrictions.push({
              Key: 'urlRestriction',
              Value: JSON.stringify({ comparerMethod: 'StartsWith', variable: 'Url', value: origin })
            });
            console.info('[Loqate override] added', origin, 'to', TARGET_KEY, 'urlRestriction list');
          }
        }
        pca.platform.setProductList(pl);
        if (typeof pca.load === 'function') pca.load();
      } catch (e) {
        console.error('[Loqate override] failed to patch productList:', e);
      }
      return true;
    }

    // Run the override at page load (like personal-details).
    if (!patchAndLoad()) {
      var attempts = 0;
      var iv = setInterval(function() {
        attempts++;
        if (patchAndLoad() || attempts > 100) clearInterval(iv); // ~5s max wait
      }, 50);
    }

    // Light re-scan the page calls after it reveals the address form.
    // pca is fully initialised (loaded at page load), so this just asks
    // Loqate to re-scan for the now-visible #AddressSearch field. No re-load
    // of sensor.js — only pca.load() to re-detect fields.
    window.rssLoqateRescan = function() {
      try { if (window.pca && typeof pca.load === 'function') pca.load(); }
      catch (e) { console.error('[Loqate] rescan failed:', e); }
    };
  })();
  </script>

  <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <meta property="og:description" content="">
    <meta property="og:title" content="Reserve Unit">
    <meta name="twitter:description" content="">
    <meta name="twitter:title" content="Reserve Unit">

    
    <style>
a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px}
</style>

    
    <link rel="canonical" href="https://rss-portal.xyz/get-a-quote/reserve-unit">

<!-- Google Tag Manager -->
  <script>!function(){"use strict";function l(e){for(var t=e,r=0,n=document.cookie.split(";");r<n.length;r++){var o=n[r].split("=");if(o[0].trim()===t)return o[1]}}function s(e){return localStorage.getItem(e)}function u(e){return window[e]}function A(e,t){e=document.querySelector(e);return t?null==e?void 0:e.getAttribute(t):null==e?void 0:e.textContent}var e=window,t=document,r="script",n="dataLayer",o="https://sst.readysteadystore.com",a="https://load.sst.readysteadystore.com",i="36anjhkgfgdh",c="dpdo183=AQBaITMmRSQ7XTBRNk0eV1pKVkADBVUYDQUDHxQfDQsMHRQSCBkNRAsLCg%3D%3D",g="cookie",v="_sbp",E="",d=!1;try{var d=!!g&&(m=navigator.userAgent,!!(m=new RegExp("Version/([0-9._]+)(.*Mobile)?.*Safari.*").exec(m)))&&16.4<=parseFloat(m[1]),f="stapeUserId"===g,I=d&&!f?function(e,t,r){void 0===t&&(t="");var n={cookie:l,localStorage:s,jsVariable:u,cssSelector:A},t=Array.isArray(t)?t:[t];if(e&&n[e])for(var o=n[e],a=0,i=t;a<i.length;a++){var c=i[a],c=r?o(c,r):o(c);if(c)return c}else console.warn("invalid uid source",e)}(g,v,E):void 0;d=d&&(!!I||f)}catch(e){console.error(e)}var m=e,g=(m[n]=m[n]||[],m[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}),t.getElementsByTagName(r)[0]),v=I?"&bi="+encodeURIComponent(I):"",E=t.createElement(r),f=(d&&(i=8<i.length?i.replace(/([a-z]{8}$)/,"kp$1"):"kp"+i),!d&&a?a:o);E.async=!0,E.src=f+"/"+i+".js?"+c+v,null!=(e=g.parentNode)&&e.insertBefore(E,g)}();</script>
  <!-- End Google Tag Manager -->
<meta property="og:url" content="https://rss-portal.xyz/get-a-quote/reserve-unit">
<meta name="twitter:card" content="summary">
<meta http-equiv="content-language" content="en">


<meta name="generator" content="HubSpot"></head>

<body>

  
  <div class="env-banner">STAGING ENVIRONMENT — NOT FOR PRODUCTION USE</div>
  

  <div class="portal">

    
    <nav class="quote-nav">
      <a href="/get-a-quote/reserve-now?hsLang=en" id="backToQuoteLink">‹ Return to quote</a>
      <a href="/get-a-quote?hsLang=en" id="exitQuoteLink">✕ Exit quote</a>
    </nav>

    
    <div class="loading-state" id="loadingState">
      <div class="loading-dots"><span></span><span></span><span></span></div>
    </div>

    
    <div class="error-state" id="errorState">
      <p>Sorry, we couldn't load your quote.</p>
      <p><a href="/get-a-quote?hsLang=en">Start again</a> or call us on <a href="tel:08003213211">0800 321 3211</a>.</p>
    </div>

    
    <div id="pageContent" style="visibility:hidden;">

      
      <p class="page-heading">Hi <span class="name" id="contactFirstName">there</span></p>

      
      <div class="quote-summary">

        <div class="summary-left">
          <p class="summary-subtitle" id="summarySubtitle">— sq ft at —</p>
          <p class="summary-offer">
            You get <span class="highlight" id="summaryDiscount">—</span> off
            for <span class="highlight" id="summaryDuration">—</span>
          </p>
          <p class="summary-rate" id="summaryOfferRate">—</p>
          <p class="summary-standard">and then <span id="summaryStandardRate">—</span> per week (inc. VAT)</p>
          <div class="summary-details">
            <p>Your quote is for a <em id="summarySize">—</em> sq ft storage unit</p>
            <p>Moving in on <span id="summaryStartDate">—</span></p>
          </div>
        </div>

        <div class="summary-right">
          <img src="" id="unitImage" alt="Storage unit render">
          <video id="unitVideo" preload="none">
            <source id="unitVideoSource" src="" type="video/mp4">
          </video>
          <a href="javascript:void(0)" class="play-video" id="playVideoBtn" onclick="openVideo()">
            <span class="play-icon"></span>
            Play Video
          </a>
        </div>

      </div>

      <div class="form-container">

        
        <h2 class="section-heading">Confirm your move in date</h2>

        <div class="info-banner" id="validForBanner">—</div>
        <div class="date-limit-alert" id="dateLimitAlert"></div>

        <div class="form-group" id="group-move-in-date">
          <label for="moveInDate">Confirm your move in date <span class="required">*</span></label>
          <input type="date" id="moveInDate" name="move_in_date" required>
          <p class="form-hint">You are not tied into this date, and you can change at any time. An estimate will do.</p>
          <p class="error-msg">Please select a date.</p>
        </div>

        
        <h2 class="section-heading">Confirm your personal details</h2>

        
        <div class="form-group" id="group-storage-type">
          <label for="storageType">What type of storage do you need? <span class="required">*</span></label>
          <div class="select-wrap">
            <select id="storageType" name="storage_type" required>
              <option value="" disabled>Select type</option>
              <option value="residential">Residential</option>
              <option value="commercial">Commercial</option>
              <option value="student">Student</option>
            </select>
          </div>
          <p class="form-hint">This will help us tailor the quote for your needs.</p>
          <p class="error-msg">Please select a storage type.</p>
        </div>

        
        <div class="form-row-3">
          <div class="form-group">
            <label for="title">Title</label>
            <div class="select-wrap">
              <select id="title" name="title">
                <option value=""></option>
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Miss">Miss</option>
                <option value="Ms">Ms</option>
                <option value="Dr">Dr</option>
                <option value="Prof">Prof</option>
              </select>
            </div>
          </div>
          <div class="form-group" id="group-firstname">
            <label for="firstName">First name(s) <span class="required">*</span></label>
            <input type="text" id="firstName" name="firstname" required autocomplete="given-name">
            <p class="error-msg">Please enter your first name.</p>
          </div>
          <div class="form-group" id="group-lastname">
            <label for="lastName">Surname / family name <span class="required">*</span></label>
            <input type="text" id="lastName" name="lastname" required autocomplete="family-name">
            <p class="error-msg">Please enter your surname.</p>
          </div>
        </div>

        
        <div class="form-group">
          <label for="preferredName">Preferred name if different:</label>
          <input type="text" id="preferredName" name="preferred_name" autocomplete="nickname">
        </div>

        
        <div class="form-row">
          <div class="form-group" id="group-email">
            <label for="email">Email address <span class="required">*</span></label>
            <input type="email" id="email" name="email" required autocomplete="email">
            <p class="error-msg">Please enter a valid email.</p>
          </div>
          <div class="form-group" id="group-phone">
            <label for="phone">Telephone Number <span class="required">*</span></label>
            <input type="tel" id="phone" name="phone" required autocomplete="tel">
            <p class="error-msg">Please enter your phone number.</p>
          </div>
        </div>

        
        <div class="address-section">
          <p class="address-title">Address</p>

          
          <div class="form-group">
            <label for="AddressSearch">Search for your address</label>
            <input type="text" id="AddressSearch" placeholder="Start typing your address or Postcode..." autocomplete="new-address-search">
          </div>

          <div class="form-row">
            <div class="form-group" id="group-address1">
              <label for="AddressLine1">Address Line 1 <span class="required">*</span></label>
              <input type="text" id="AddressLine1" name="address1" required autocomplete="new-AddressLine1">
              <p class="error-msg">Please enter your address.</p>
            </div>
            <div class="form-group">
              <label for="AddressLine2">Address Line 2</label>
              <input type="text" id="AddressLine2" name="address2" autocomplete="new-AddressLine2">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="AddressLine3">Address Line 3</label>
              <input type="text" id="AddressLine3" name="address3" autocomplete="new-AddressLine3">
            </div>
            <div class="form-group" id="group-town">
              <label for="AddressTown">Town <span class="required">*</span></label>
              <input type="text" id="AddressTown" name="town" required autocomplete="new-AddressTown">
              <p class="error-msg">Please enter your town.</p>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="AddressCounty">County</label>
              <input type="text" id="AddressCounty" name="county" autocomplete="new-AddressCounty">
            </div>
            <div class="form-group" id="group-postcode">
              <label for="Postcode">Postcode <span class="required">*</span></label>
              <input type="text" id="Postcode" name="postcode" required autocomplete="new-Postcode">
              <p class="error-msg">Please enter your postcode.</p>
            </div>
          </div>

          <div class="form-group">
            <label for="country">Country</label>
            <div class="select-wrap">
              <select id="AddressCountry" name="country" autocomplete="new-address-country"></select>
            </div>
          </div>

        </div>

        
        <div class="payment-section" id="paymentSection">
          <p class="payment-label">Make Payment for <strong id="depositLabel">£10.00</strong></p>
          <p id="paymentDisabledHint" style="display:none;font-size:13px;color:#8b1a47;margin-bottom:14px;">
            Please complete all required fields above before you can pay.
          </p>
          <div id="payment-alert-error" style="display:none;background:#fde8ef;border:1px solid #d63384;color:#8b1a47;
                      padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:14px;text-align:left;"></div>
          <div id="payment-alert-success" style="display:none;background:#dcfce7;border:1px solid #16a34a;color:#14532d;
                      padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:14px;"></div>
          <div id="stripe-deposit-element" style="margin-bottom:16px;min-height:44px;text-align:left;"></div>
          <div id="deposit-loading" style="display:none;font-size:13px;color:#6b7280;margin-bottom:12px;">Setting up payment…</div>
          <button class="btn-pay" id="btnPay" onclick="handlePayment()" disabled>Pay with a new card</button>
          <button class="btn-pay" id="btnConfirmPay" style="display:none;" onclick="submitDepositPayment()">Complete payment</button>
        </div>

      </div>

    </div>

    <div class="help-bar">
      <p>Need help with your quote?</p>
      <p>Call us for FREE on <a href="tel:08003213211">0800 321 3211 📞</a></p>
    </div>

    <div class="feefo-badge">
      <div class="feefo-row">
        <span class="feefo-stars">★★★★<span style="display:inline-block;width:0.5em;overflow:hidden;">★</span></span>
        <span class="feefo-logo">feefo<sup style="font-size:10px;">○○</sup></span>
      </div>
      <div class="feefo-text">
        <strong>4.6</strong> out of 5.0 stars &nbsp;|&nbsp; 325 Independent Customer Reviews
      </div>
    </div>

  </div>

  <div data-global-resource-path="customer-portal/footer.html"><!--
=================================================================
  PORTAL FOOTER PARTIAL — footer.html
  Type: Template partial (not a full page template)

  WHAT THIS FILE DOES:
  Shared footer included on every portal page.
  Contains three sections:
  1. Green "Self Storage For Everyone" bar
  2. Purple locations grid — pulls active sites from CRM
  3. Dark footer — logo, accreditations, support/services/legal links
  4. Copyright bar — company info + payment icons

  HOW TO INCLUDE IN A PAGE TEMPLATE:
  Add this line at the bottom of any page template,
  just before standard_footer_includes :


  SITES DATA:
  The locations grid is populated client-side from the
  get-sites serverless function (RS3 active/showInPricingPortal
  flags cross-referenced with the Sites custom object), so the
  same partial works unchanged in every HubSpot account.
  Results are cached in sessionStorage for the visit.

  UPDATING THE FOOTER:
  Because this is a shared partial, any change made here
  automatically applies to all pages that include it.
  No need to update each page template individually.
=================================================================
-->

<style>
  .footer-tagline {
    background: #4a9e1a;
    color: #fff;
    text-align: center;
    padding: 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .footer-locations {
    background: #6b2d8b;
    padding: 32px 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .footer-locations h3 {
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 16px;
    max-width: 960px;
    margin: 0 auto;
  }
  .location-item {
    color: #e8d5f5;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    transition: color 0.15s;
  }
  .location-item:hover { color: #fff; }

  .footer-main {
    background: #1a1a1a;
    padding: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .footer-main-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: 32px;
  }

  .footer-logo {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .footer-logo img {
    max-width: 140px;
    height: auto;
  }

  .footer-col h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer-col ul li {
    margin-bottom: 8px;
  }
  .footer-col ul li a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
  }
  .footer-col ul li a:hover { color: #fff; }

  .footer-hours-title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 6px;
  }
  .footer-hours-text {
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.7;
  }

  .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 12px;
  }
  .footer-social a {
    color: #9ca3af;
    font-size: 13px;
    text-decoration: none;
    width: 28px;
    height: 28px;
    border: 1px solid #4b5563;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
  }
  .footer-social a:hover { color: #fff; border-color: #9ca3af; }

  .footer-copyright {
    background: #111;
    padding: 14px 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .footer-copyright-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .footer-copyright p {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.5;
  }

  .payment-icons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .payment-badge {
    background: #1f2937;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #374151;
    letter-spacing: 0.03em;
  }

  @media (max-width: 768px) {
    .footer-main-inner { grid-template-columns: 1fr 1fr; }
    .footer-locations { padding: 24px 20px; }
    .footer-main { padding: 32px 20px; }
    .footer-copyright { padding: 14px 20px; }
  }
  @media (max-width: 480px) {
    .footer-main-inner { grid-template-columns: 1fr; }
    .locations-grid { grid-template-columns: repeat(2, 1fr); }
  }
</style>


<div class="footer-tagline">
  Self Storage For Everyone
</div>


<div class="footer-locations">
  <h3>Locations</h3>
  <div class="locations-grid" id="footer-locations-grid"></div>
</div>


<div class="footer-main">
  <div class="footer-main-inner">

    <div class="footer-logo">
      <div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
        <img src="https://www.readysteadystore.com/wp-content/themes/storefront-child-theme-master/assets/images/rss-logo.svg" alt="Ready Steady Store" style="max-width:130px;height:auto;">
        <img src="https://www.readysteadystore.com/wp-content/themes/storefront-child-theme-master/assets/images/carbon-neutral.png?v=2025-01" alt="Carbon Neutral Britain" style="max-width:90px;height:auto;">
        <img src="https://www.readysteadystore.com/wp-content/themes/storefront-child-theme-master/assets/images/tick-box-logo-compressed-s.png" alt="Tick Box" style="max-width:110px;height:auto;">
        <img src="https://www.readysteadystore.com/wp-content/themes/storefront-child-theme-master/assets/images/ssa_logo_new.png" alt="Self Storage Association UK" style="max-width:110px;height:auto;">
        <img src="https://www.readysteadystore.com/wp-content/themes/storefront-child-theme-master/assets/images/cyber-essentials.png" alt="Cyber Essentials Certified" style="max-width:80px;height:auto;">
      </div>
    </div>

    <div class="footer-col">
      <h4>Support</h4>
      <ul>
        <li><a href="tel:08003213211">0800 321 3211</a></li>
        <li><a href="https://www.readysteadystore.com/help-and-advice/phone-us/" target="_blank">Contact us</a></li>
        <li><a href="https://www.readysteadystore.com/help-and-advice/" target="_blank">Help and advice</a></li>
        <li><a href="https://www.readysteadystore.com/help-and-advice/" target="_blank">Self Storage FAQs</a></li>
        <li><a href="https://www.readysteadystore.com/how-our-self-storage-works/" target="_blank">How our self storage works</a></li>
        <li><a href="https://www.readysteadystore.com/blog/business/storage-auctions/" target="_blank">Storage Auctions Information</a></li>
        <li><a href="https://www.readysteadystore.com/blog/self-storage/self-storage-prices-how-much-does-storage-cost/" target="_blank">Self Storage Prices Explained</a></li>
      </ul>
      <p class="footer-hours-title">Customer Services Opening Hours:</p>
      <p class="footer-hours-text">
        Mon – Fri: 8am to 9pm<br>
        Saturday: 8am to 6:30pm<br>
        Sunday: 9am to 6pm
      </p>
      <div class="footer-social">
        <a href="https://www.facebook.com/readysteadystore" target="_blank" title="Facebook">f</a>
        <a href="https://twitter.com/ReadyStore" target="_blank" title="X / Twitter">𝕏</a>
        <a href="https://www.linkedin.com/company/ready-steady-store-ltd/" target="_blank" title="LinkedIn">in</a>
        <a href="https://www.instagram.com/readystore" target="_blank" title="Instagram">Ⓥ</a>
      </div>
    </div>

    <div class="footer-col">
      <h4>Services</h4>
      <ul>
        <li><a href="https://www.readysteadystore.com/self-storage/" target="_blank">Store Finder</a></li>
        <li><a href="https://www.readysteadystore.com/help-and-advice/size-estimator/" target="_blank">Size Estimator</a></li>
        <li><a href="https://www.readysteadystore.com/extra-services/van-hire/" target="_blank">Van services</a></li>
        <li><a href="https://www.readysteadystore.com/extra-services/insurance-cover/" target="_blank">Self storage contents protection plan</a></li>
        <li><a href="https://www.readysteadystore.com/help-and-advice/refer-a-friend/" target="_blank">Refer a friend</a></li>
        <li><a href="https://www.readysteadystore.com/blog/" target="_blank">Blog</a></li>
        <li><a href="https://www.readysteadystore.com/case-studies/" target="_blank">Case Studies</a></li>
        <li><a href="https://www.readysteadystore.com/about-us/" target="_blank">About us</a></li>
        <li><a href="https://www.readysteadystore.com/join-our-team/" target="_blank">Join our Team</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h4>Legal</h4>
      <ul>
        <li><a href="https://www.readysteadystore.com/terms-conditions/" target="_blank">Terms and conditions</a></li>
        <li><a href="https://www.readysteadystore.com/terms-conditions/data-privacy-notice/" target="_blank">Data Privacy Notice</a></li>
        <li><a href="https://www.readysteadystore.com/terms-conditions/website-cookie-policy/" target="_blank">Website cookie policy</a></li>
      </ul>
    </div>

  </div>
</div>


<div class="footer-copyright">
  <div class="footer-copyright-inner">
    <p>
      Copyright 2006 – 2026 Ready Steady Store Limited.<br>
      Registered in England no. 05631335. 37 Duke Street, London, W1U 1LN
    </p>
    <div class="payment-icons">
      <span class="payment-badge">AMEX</span>
      <span class="payment-badge">PayPal</span>
      <span class="payment-badge">VISA</span>
      <span class="payment-badge">MC</span>
      <span class="payment-badge">Stripe</span>
    </div>
  </div>
</div>

<script>
  (function () {
    var grid = document.getElementById('footer-locations-grid');
    if (!grid) return;
    function renderFooterSites(sites) {
      grid.innerHTML = '';
      sites.forEach(function (s) {
        var a = document.createElement('a');
        a.href = '/get-a-quote';
        a.className = 'location-item';
        a.textContent = s.name;
        grid.appendChild(a);
      });
    }
    var cached = null;
    try { cached = JSON.parse(sessionStorage.getItem('rssPortalSites') || 'null'); } catch (e) {}
    if (cached && cached.length) { renderFooterSites(cached); return; }
    fetch('/hs/serverless/get-sites')
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var sites = (data && data.success && data.sites) || [];
        sites.sort(function (a, b) { return (a.name || '').localeCompare(b.name || ''); });
        if (!sites.length) return;
        try { sessionStorage.setItem('rssPortalSites', JSON.stringify(sites)); } catch (e) {}
        renderFooterSites(sites);
      })
      .catch(function () {});
  })();
</script></div>

  <script src="/hs/hsstatic/jquery-libs/static-1.4/jquery/jquery-1.11.2.js"></script>
<script src="/hs/hsstatic/jquery-libs/static-1.4/jquery-migrate/jquery-migrate-1.2.1.js"></script>
<script>hsjQuery = window['jQuery'];</script>
<!-- HubSpot performance collection script -->
<script defer src="/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js"></script>

<!-- Start of HubSpot Analytics Code -->
<script type="text/javascript">
var _hsq = _hsq || [];
_hsq.push(["setContentType", "standard-page"]);
_hsq.push(["setCanonicalUrl", "https:\/\/rss-portal.xyz\/get-a-quote\/reserve-unit"]);
_hsq.push(["setPageId", "442341995707"]);
_hsq.push(["setContentMetadata", {
    "contentPageId": 442341995707,
    "legacyPageId": "442341995707",
    "contentFolderId": null,
    "contentGroupId": null,
    "abTestId": null,
    "languageVariantId": 442341995707,
    "languageCode": "en",
    
    
}]);
</script>

<script type="text/javascript" id="hs-script-loader" async defer src="/hs/scriptloader/148955142.js"></script>
<!-- End of HubSpot Analytics Code -->


<script type="text/javascript">
var hsVars = {
    render_id: "0d8f254b-132a-4f41-9c84-3576771242a9",
    ticks: 1788795409813,
    page_id: 442341995707,
    
    content_group_id: 0,
    portal_id: 148955142,
    app_hs_base_url: "https://app-eu1.hubspot.com",
    cp_hs_base_url: "https://cp-eu1.hubspot.com",
    language: "en",
    analytics_page_type: "standard-page",
    scp_content_type: "",
    
    analytics_page_id: "442341995707",
    category_id: 1,
    folder_id: 0,
    is_hubspot_user: false
}
</script>


<script defer src="/hs/hsstatic/HubspotToolsMenu/static-1.640/js/index.js"></script>


  <script>
    // ================================================================
    // RESERVE UNIT PAGE — DATA FETCH + FORM PRE-FILL
    //
    // WHAT THIS DOES:
    // 1. Reads dealId from URL params
    // 2. Calls /hs/serverless/get-quote?dealId=XXX
    // 3. Pre-fills quote summary strip with pricing/size/site
    // 4. Pre-fills personal details from contact properties
    // 5. Pre-fills move in date from sm_estimated_start_date
    // 6. Shows valid for banner (days until move-in), or a red
    //    alert instead if the date exceeds the site's
    //    reservationValidDays (max days in advance allowed) —
    //    fetched separately via get-reservation-limit.js
    // 7. Sets unit image/video from size
    //
    // ON PAYMENT SUCCESS:
    // handlePayment()/submitDepositPayment() (new card) or
    // payWithSavedCard() (saved card) confirm the £10 Stripe
    // deposit, then call /hs/serverless/confirm-reservation with
    // the confirmed contact/address fields, move-in date, and deal
    // pricing — that function writes everything back to HubSpot.
    // The page redirects to reservation-confirmation either way,
    // since the payment itself has already succeeded by that point.
    // ================================================================

    // ── Stripe payment state ───────────────────────────────────────
    
    
    var STRIPE_PK             = 'pk_test_51MH1p7BEZcgPjZfZcInX8Wot160QcKEtGcaNAn87eaHOkuSbwJZIHLUZi7tEMGZd6RxYTJiQ3iR5rZltarA3X1KL00TuGD2aYC';
    var depositStripeInstance = null;
    var depositElements       = null;
    var _dealId       = null;
    var _contactId    = null;
    var _smCustomerId = null;
    var _smQuoteGuid  = null;
    var _smSiteId     = null;
    var _dealSize     = null;
    var _standardRate = null;
    var _offerRate    = null;
    var _offerWeeks   = null;
    var _smSizeCode   = null;
    var _smStripeCustomerId = null;
    var _formSnapshot = {};

    // ── Max reservation days state ──────────────────────────────────
    // reservationValidDays comes from RS3's GetFullSiteById (via a
    // separate call to get-reservation-limit.js). Null until that
    // resolves, which means the limit check simply never fires —
    // fails safe rather than blocking bookings on missing data.
    var _reservationValidDays = null;
    var _dateExceedsLimit     = false;
    // Separate from _dateExceedsLimit: true when a date was actually
    // entered but it's invalid or in the past. Kept distinct because
    // it's a different condition (bad input vs. too far in the
    // future) and conflating them under one flag made a past date
    // silently clear the error state instead of raising one — see
    // updateBanner() below.
    var _dateInvalid = false;

    // ── Asset config ───────────────────────────────────────────────
    var sizesWithAssets = [9, 12, 15, 25, 40, 50, 75, 100, 125, 150, 175, 200, 250, 300];
    var assetMap        = { 160: 150, 12: 125, 300: 125 };
    var BASE_IMG_URL    = 'https://www.readysteadystore.com/_static/resources/units/img/Unit';
    var BASE_VID_URL    = 'https://www.readysteadystore.com/_static/resources/units/video/Unit';

    // ── DOM refs ───────────────────────────────────────────────────
    var unitImage    = document.getElementById('unitImage');
    var unitVideo    = document.getElementById('unitVideo');
    var unitVideoSrc = document.getElementById('unitVideoSource');
    var playVideoBtn = document.getElementById('playVideoBtn');

    // ── Country list ─────────────────────────────────────────────
    // Same full ~195-country list used on personal-details.html and
    // your-requirements.html, UK/Ireland pinned to the top since
    // they're the large majority of this business's customers, then
    // alphabetical. Previously this page only offered UK/Ireland/
    // Other, so anyone outside those two lost their real country
    // entirely. Option values are the full country name (matching
    // c[1], not the ISO code c[0]) — same convention as those other
    // pages, so this stays compatible with everything already
    // storing/reading contact.country as a full name throughout this
    // project (post-quote.js, confirm-reservation.js's own
    // toIsoCountryCode() conversion, etc).
    var COUNTRIES = [
      ["GB","United Kingdom","44"],
      ["IE","Ireland","353"],
      ["AF","Afghanistan","93"],
      ["AL","Albania","355"],
      ["DZ","Algeria","213"],
      ["AD","Andorra","376"],
      ["AO","Angola","244"],
      ["AG","Antigua and Barbuda","1268"],
      ["AR","Argentina","54"],
      ["AM","Armenia","374"],
      ["AU","Australia","61"],
      ["AT","Austria","43"],
      ["AZ","Azerbaijan","994"],
      ["BS","Bahamas","1242"],
      ["BH","Bahrain","973"],
      ["BD","Bangladesh","880"],
      ["BB","Barbados","1246"],
      ["BY","Belarus","375"],
      ["BE","Belgium","32"],
      ["BZ","Belize","501"],
      ["BJ","Benin","229"],
      ["BT","Bhutan","975"],
      ["BO","Bolivia","591"],
      ["BA","Bosnia and Herzegovina","387"],
      ["BW","Botswana","267"],
      ["BR","Brazil","55"],
      ["BN","Brunei","673"],
      ["BG","Bulgaria","359"],
      ["BF","Burkina Faso","226"],
      ["BI","Burundi","257"],
      ["KH","Cambodia","855"],
      ["CM","Cameroon","237"],
      ["CA","Canada","1"],
      ["CV","Cape Verde","238"],
      ["CF","Central African Republic","236"],
      ["TD","Chad","235"],
      ["CL","Chile","56"],
      ["CN","China","86"],
      ["CO","Colombia","57"],
      ["KM","Comoros","269"],
      ["CG","Congo","242"],
      ["CD","Congo (DRC)","243"],
      ["CR","Costa Rica","506"],
      ["HR","Croatia","385"],
      ["CU","Cuba","53"],
      ["CY","Cyprus","357"],
      ["CZ","Czech Republic","420"],
      ["DK","Denmark","45"],
      ["DJ","Djibouti","253"],
      ["DM","Dominica","1767"],
      ["DO","Dominican Republic","1809"],
      ["EC","Ecuador","593"],
      ["EG","Egypt","20"],
      ["SV","El Salvador","503"],
      ["GQ","Equatorial Guinea","240"],
      ["ER","Eritrea","291"],
      ["EE","Estonia","372"],
      ["SZ","Eswatini","268"],
      ["ET","Ethiopia","251"],
      ["FJ","Fiji","679"],
      ["FI","Finland","358"],
      ["FR","France","33"],
      ["GA","Gabon","241"],
      ["GM","Gambia","220"],
      ["GE","Georgia","995"],
      ["DE","Germany","49"],
      ["GH","Ghana","233"],
      ["GR","Greece","30"],
      ["GD","Grenada","1473"],
      ["GT","Guatemala","502"],
      ["GN","Guinea","224"],
      ["GW","Guinea-Bissau","245"],
      ["GY","Guyana","592"],
      ["HT","Haiti","509"],
      ["HN","Honduras","504"],
      ["HK","Hong Kong","852"],
      ["HU","Hungary","36"],
      ["IS","Iceland","354"],
      ["IN","India","91"],
      ["ID","Indonesia","62"],
      ["IR","Iran","98"],
      ["IQ","Iraq","964"],
      ["IL","Israel","972"],
      ["IT","Italy","39"],
      ["JM","Jamaica","1876"],
      ["JP","Japan","81"],
      ["JO","Jordan","962"],
      ["KZ","Kazakhstan","7"],
      ["KE","Kenya","254"],
      ["KI","Kiribati","686"],
      ["KW","Kuwait","965"],
      ["KG","Kyrgyzstan","996"],
      ["LA","Laos","856"],
      ["LV","Latvia","371"],
      ["LB","Lebanon","961"],
      ["LS","Lesotho","266"],
      ["LR","Liberia","231"],
      ["LY","Libya","218"],
      ["LI","Liechtenstein","423"],
      ["LT","Lithuania","370"],
      ["LU","Luxembourg","352"],
      ["MO","Macau","853"],
      ["MG","Madagascar","261"],
      ["MW","Malawi","265"],
      ["MY","Malaysia","60"],
      ["MV","Maldives","960"],
      ["ML","Mali","223"],
      ["MT","Malta","356"],
      ["MH","Marshall Islands","692"],
      ["MR","Mauritania","222"],
      ["MU","Mauritius","230"],
      ["MX","Mexico","52"],
      ["FM","Micronesia","691"],
      ["MD","Moldova","373"],
      ["MC","Monaco","377"],
      ["MN","Mongolia","976"],
      ["ME","Montenegro","382"],
      ["MA","Morocco","212"],
      ["MZ","Mozambique","258"],
      ["MM","Myanmar","95"],
      ["NA","Namibia","264"],
      ["NR","Nauru","674"],
      ["NP","Nepal","977"],
      ["NL","Netherlands","31"],
      ["NZ","New Zealand","64"],
      ["NI","Nicaragua","505"],
      ["NE","Niger","227"],
      ["NG","Nigeria","234"],
      ["MK","North Macedonia","389"],
      ["NO","Norway","47"],
      ["OM","Oman","968"],
      ["PK","Pakistan","92"],
      ["PW","Palau","680"],
      ["PA","Panama","507"],
      ["PG","Papua New Guinea","675"],
      ["PY","Paraguay","595"],
      ["PE","Peru","51"],
      ["PH","Philippines","63"],
      ["PL","Poland","48"],
      ["PT","Portugal","351"],
      ["QA","Qatar","974"],
      ["RO","Romania","40"],
      ["RU","Russia","7"],
      ["RW","Rwanda","250"],
      ["KN","Saint Kitts and Nevis","1869"],
      ["LC","Saint Lucia","1758"],
      ["VC","Saint Vincent and the Grenadines","1784"],
      ["WS","Samoa","685"],
      ["SM","San Marino","378"],
      ["ST","Sao Tome and Principe","239"],
      ["SA","Saudi Arabia","966"],
      ["SN","Senegal","221"],
      ["RS","Serbia","381"],
      ["SC","Seychelles","248"],
      ["SL","Sierra Leone","232"],
      ["SG","Singapore","65"],
      ["SK","Slovakia","421"],
      ["SI","Slovenia","386"],
      ["SB","Solomon Islands","677"],
      ["SO","Somalia","252"],
      ["ZA","South Africa","27"],
      ["KR","South Korea","82"],
      ["SS","South Sudan","211"],
      ["ES","Spain","34"],
      ["LK","Sri Lanka","94"],
      ["SD","Sudan","249"],
      ["SR","Suriname","597"],
      ["SE","Sweden","46"],
      ["CH","Switzerland","41"],
      ["SY","Syria","963"],
      ["TW","Taiwan","886"],
      ["TJ","Tajikistan","992"],
      ["TZ","Tanzania","255"],
      ["TH","Thailand","66"],
      ["TL","Timor-Leste","670"],
      ["TG","Togo","228"],
      ["TO","Tonga","676"],
      ["TT","Trinidad and Tobago","1868"],
      ["TN","Tunisia","216"],
      ["TR","Turkey","90"],
      ["TM","Turkmenistan","993"],
      ["TV","Tuvalu","688"],
      ["UG","Uganda","256"],
      ["UA","Ukraine","380"],
      ["AE","United Arab Emirates","971"],
      ["US","United States","1"],
      ["UY","Uruguay","598"],
      ["UZ","Uzbekistan","998"],
      ["VU","Vanuatu","678"],
      ["VA","Vatican City","379"],
      ["VE","Venezuela","58"],
      ["VN","Vietnam","84"],
      ["YE","Yemen","967"],
      ["ZM","Zambia","260"],
      ["ZW","Zimbabwe","263"]
    ];

    function populateCountryDropdown(existing) {
      var select = document.getElementById('AddressCountry');
      COUNTRIES.forEach(function(c) {
        var opt = document.createElement('option');
        opt.value = c[1];
        opt.textContent = c[1];
        select.appendChild(opt);
      });
      select.value = existing || 'United Kingdom';
      // Fallback if a stored value doesn't match any option
      if (select.value !== (existing || 'United Kingdom')) {
        select.value = 'United Kingdom';
      }
    }
    // Called immediately, not inside populatePage() — the dropdown
    // needs its options in place before populatePage() tries to set
    // country.value from the contact's stored value, and populatePage
    // only runs later, async, once get-quote resolves.
    populateCountryDropdown();

    // ── Date formatter ─────────────────────────────────────────────
    function formatDate(str) {
      if (!str) return '—';
      var d = new Date(str);
      return isNaN(d) ? '—' : d.toLocaleDateString('en-GB', { day:'2-digit', month:'2-digit', year:'numeric' });
    }

    // ── Quote expiry — createdate + 7 days ─────────────────────────
    // NOTE: not currently called anywhere on this page — appears to
    // be leftover from an earlier version of the quote-expiry
    // display. Left in place rather than deleted in case something
    // elsewhere still depends on it, but worth confirming before
    // relying on it.
    function getExpiryDate(createdDateStr) {
      if (!createdDateStr) return null;
      var d = new Date(createdDateStr.split('T')[0] + 'T00:00:00');
      if (isNaN(d)) return null;
      d.setDate(d.getDate() + 7);
      return d;
    }

    // ── Valid for calculator ───────────────────────────────────────
    // Calculates days between today and the selected move in date.
    function getValidFor(moveInDateStr) {
      if (!moveInDateStr) return null;
      var moveIn = new Date(moveInDateStr.split('T')[0] + 'T00:00:00');
      if (isNaN(moveIn)) return null;
      var today = new Date();
      today.setHours(0, 0, 0, 0);
      var diff = Math.ceil((moveIn - today) / (1000 * 60 * 60 * 24));
      if (diff < 0) return null;
      if (diff === 0) return 'today';
      return diff + ' day' + (diff === 1 ? '' : 's');
    }

    // ── Days-from-today as a raw number ─────────────────────────────
    // Used for the reservationValidDays comparison — getValidFor()
    // above returns a formatted string, this returns the plain
    // integer needed to compare against the site's limit.
    function getDaysFromToday(moveInDateStr) {
      if (!moveInDateStr) return null;
      var moveIn = new Date(moveInDateStr.split('T')[0] + 'T00:00:00');
      if (isNaN(moveIn)) return null;
      var today = new Date();
      today.setHours(0, 0, 0, 0);
      return Math.ceil((moveIn - today) / (1000 * 60 * 60 * 24));
    }


    // ── Asset size resolver ────────────────────────────────────────
    function resolveAssetSize(size) {
      var s = parseInt(size, 10);
      if (sizesWithAssets.indexOf(s) !== -1) return s;
      return assetMap[s] || 125;
    }

    // ── Valid for banner / date limit alert ──────────────────────
    // Update banner based on selected move in date. If the date
    // exceeds the site's reservationValidDays, swap the green
    // "valid for" banner for a red alert instead, and flag the
    // date field + payment functions so they can block submission.
    // Top-level (not nested in populatePage) so it can be re-run
    // once get-reservation-limit.js resolves with the live value,
    // not just once on initial page load.
    function updateBanner() {
      var dateVal   = document.getElementById('moveInDate').value;
      var validFor  = getValidFor(dateVal);
      var bannerEl  = document.getElementById('validForBanner');
      var alertEl   = document.getElementById('dateLimitAlert');
      var dateGroup = document.getElementById('group-move-in-date');

      if (!validFor) {
        if (dateVal) {
          // A date was actually entered, but it's invalid or in the
          // past — this is a real error, not just "nothing selected
          // yet". Show it the same way as the max-reservation-days
          // alert: red, explicit, and blocking payment.
          _dateInvalid = true;
          bannerEl.style.display = 'none';
          alertEl.style.display  = 'block';
          alertEl.textContent    = 'Please select a valid move in date — it can\'t be in the past.';
          dateGroup.classList.add('has-error');
        } else {
          // Nothing entered yet — not an error state, just incomplete.
          _dateInvalid = false;
          bannerEl.style.display = 'block';
          bannerEl.textContent   = 'Please select a move in date.';
          alertEl.style.display  = 'none';
          dateGroup.classList.remove('has-error');
        }
        _dateExceedsLimit = false;
        updatePaymentButtonState();
        return;
      }

      _dateInvalid = false;
      var diffDays = getDaysFromToday(dateVal);

      if (_reservationValidDays != null && diffDays != null && diffDays > _reservationValidDays) {
        _dateExceedsLimit = true;
        bannerEl.style.display = 'none';
        alertEl.style.display  = 'block';
        alertEl.textContent =
          'This date is more than ' + _reservationValidDays + ' day' + (_reservationValidDays === 1 ? '' : 's') +
          ' away, which is the maximum we can accept reservations in advance for this site. ' +
          'Please choose an earlier date, or contact us to discuss your options.';
        dateGroup.classList.add('has-error');
      } else {
        _dateExceedsLimit = false;
        alertEl.style.display  = 'none';
        bannerEl.style.display = 'block';
        bannerEl.textContent   = 'Great news! Your move in date is in ' + validFor + '.';
        dateGroup.classList.remove('has-error');
      }

      updatePaymentButtonState();
    }

    // ── Payment gating ────────────────────────────────────────────
    // Fields required before ANY payment method (new card or saved
    // card) can be used. Mirrors the required fields already
    // validated on click in handlePayment()/payWithSavedCard(), plus
    // storageType — which is marked required in the HTML (asterisk +
    // error-msg) but wasn't actually included in either click-time
    // validation before, so it could never block payment despite
    // looking mandatory.
    var PAYMENT_REQUIRED_FIELD_IDS = [
      'moveInDate', 'storageType', 'firstName', 'lastName',
      'email', 'phone', 'AddressLine1', 'AddressTown', 'Postcode'
    ];

    function isPaymentFormComplete() {
      for (var i = 0; i < PAYMENT_REQUIRED_FIELD_IDS.length; i++) {
        var el = document.getElementById(PAYMENT_REQUIRED_FIELD_IDS[i]);
        if (!el || !el.value || !el.value.trim()) return false;
      }
      return true;
    }

    // Enables/disables every payment button (new-card + any rendered
    // saved-card buttons) based on form completeness and the date
    // limit check. Called on every relevant field change, after the
    // date banner updates, after initial pre-fill, and after saved
    // cards render (since those buttons are added to the DOM later,
    // asynchronously, and need their own initial state set).
    function updatePaymentButtonState() {
      var canPay = isPaymentFormComplete() && !_dateExceedsLimit && !_dateInvalid;

      var btnPay = document.getElementById('btnPay');
      if (btnPay) btnPay.disabled = !canPay;

      var btnConfirmPay = document.getElementById('btnConfirmPay');
      if (btnConfirmPay) btnConfirmPay.disabled = !canPay;

      document.querySelectorAll('.saved-card-btn').forEach(function(btn) {
        btn.disabled = !canPay;
      });

      var hint = document.getElementById('paymentDisabledHint');
      if (hint) hint.style.display = canPay ? 'none' : 'block';
    }

    // ── Populate page ───────────────────────────────────────────────
    // Pre-fills all fields from get-quote response.
    function populatePage(data) {
      var deal        = data.deal;
      var contact     = data.contact    || {};
      var siteName    = data.siteName   || '—';
      var size        = deal.size       || '—';
      var assetSize   = resolveAssetSize(size);

      // ── Page heading ────────────────────────────────────────────
      document.getElementById('contactFirstName').textContent = contact.firstname || 'there';

      // ── Store IDs for Stripe payment functions ───────────────────
      _dealId       = deal.id;
      _contactId    = data.contactId    || null;
      _smCustomerId = data.smCustomerId || null;
      _smQuoteGuid  = deal.smQuoteGuid  || null;
      _smSiteId     = data.smSiteId     || null;
      _dealSize     = deal.size         || null;
      _standardRate = deal.standardRate || null;
      _offerRate    = deal.offerRate    || null;
      _offerWeeks   = deal.offerDuration|| null;
      _smSizeCode   = data.smSizeCode   || null;
      _smStripeCustomerId = data.smStripeCustomerId || null;
      if (_contactId) { loadSavedCards(); }

      // ── Quote summary strip ──────────────────────────────────────
      document.getElementById('summarySubtitle').textContent   = size + ' sq ft at ' + siteName;
      document.getElementById('summaryDiscount').textContent   = deal.discountPercentage ? deal.discountPercentage + '%' : '—';
      document.getElementById('summaryDuration').textContent   = deal.offerDuration      ? deal.offerDuration + ' weeks'  : '—';
      document.getElementById('summaryOfferRate').textContent  = deal.offerRate          ? '£' + parseFloat(deal.offerRate).toFixed(2) + ' per week' : '—';
      document.getElementById('summaryStandardRate').textContent = deal.standardRate     ? '£' + parseFloat(deal.standardRate).toFixed(2) : '—';
      document.getElementById('summarySize').textContent       = size;
      document.getElementById('summaryStartDate').textContent  = formatDate(deal.startDate);

      // ── Unit image ───────────────────────────────────────────────
      unitImage.src = BASE_IMG_URL + assetSize + '_Full.jpg';

      // ── Valid for banner / date limit alert ───────────────────────
      // updateBanner() is top-level (defined above populatePage) so
      // it can be re-run once the live reservation limit resolves
      // from get-reservation-limit.js, not just on initial load.
      updateBanner();

      // Re-calculate banner whenever user changes the date
      document.getElementById('moveInDate').addEventListener('change', updateBanner);

      // ── Move in date ─────────────────────────────────────────────
      // Pre-fill with estimated start date from deal.
      if (deal.startDate) {
        document.getElementById('moveInDate').value = deal.startDate.split('T')[0];
      }

      // ── Personal details ─────────────────────────────────────────
      // Pre-fill from contact properties — all editable.
      document.getElementById('storageType').value  = deal.storageType  || '';
      document.getElementById('firstName').value    = contact.firstname || '';
      document.getElementById('lastName').value     = contact.lastname  || '';
      document.getElementById('email').value        = contact.email     || '';
      document.getElementById('phone').value        = contact.phone     || '';

      // ── Address ──────────────────────────────────────────────────
      // HubSpot contact has address (street), city, zip, country.
      // Pre-fill what we have — remaining fields left blank.
      document.getElementById('AddressLine1').value = contact.address || '';
      document.getElementById('AddressTown').value     = contact.city    || '';
      document.getElementById('Postcode').value = contact.zip     || '';
      document.getElementById('AddressCountry').value = contact.country || 'United Kingdom';
      if (document.getElementById('AddressCountry').value !== (contact.country || 'United Kingdom')) {
        document.getElementById('AddressCountry').value = 'United Kingdom';
      }
      document.getElementById('AddressCounty').value = contact.state || '';

      // ── Back to quote link ───────────────────────────────────────
      document.getElementById('backToQuoteLink').href =
        '/get-a-quote/reserve-now?dealId=' + (deal.id || '');

      // Show page, hide loading. #pageContent started visibility:hidden (so
      // Loqate's fieldPresent check could see the laid-out fields at load) —
      // flip it visible now.
      document.getElementById('loadingState').style.display = 'none';
      document.getElementById('pageContent').style.visibility = 'visible';

      // ── Re-scan for Loqate now the address form is fully visible ──
      try {
        if (typeof window.rssLoqateRescan === 'function') window.rssLoqateRescan();
      } catch (e) {
        console.error('[Loqate] rescan after content reveal failed:', e);
      }

      // Update page title
      document.title = 'Reserve ' + size + ' sq ft — Ready Steady Store ' + siteName;

      // Now that pre-filled values are in place, set the correct
      // initial payment-button state (enabled if HubSpot already had
      // everything required, disabled if the customer still needs to
      // fill something in).
      updatePaymentButtonState();
    }

    var _savedCards = [];

    function loadSavedCards() {
        fetch('/hs/serverless/get-saved-cards', {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ contactId: _contactId })
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            if (data.success && data.cards && data.cards.length > 0) {
                _savedCards = data.cards;
                renderSavedCards();
            }
        })
        .catch(function() {
            // Silently fail — user just sees new card option
        });
    }

    function renderSavedCards() {
        var section = document.getElementById('paymentSection');
        var html = '<p class="payment-label" style="margin-bottom:12px;">Pay with a saved card:</p>';
        _savedCards.forEach(function(card, i) {
            var brand = card.brand.charAt(0).toUpperCase() + card.brand.slice(1);
            html += '<button class="btn-pay saved-card-btn" style="margin-bottom:8px;width:100%;justify-content:space-between;" ' +
                'onclick="payWithSavedCard(\'' + card.pmId + '\')">' +
                '<span>' + brand + ' •••• ' + card.last4 + '</span>' +
                '<span style="font-size:13px;font-weight:400;">Expires ' + card.expiry + '</span>' +
                '</button>';
        });
        html += '<p style="text-align:center;font-size:13px;color:var(--text-muted);margin:12px 0;">or</p>';
        // Insert before existing payment label
        var existingLabel = section.querySelector('.payment-label');
        existingLabel.insertAdjacentHTML('beforebegin', html);
        // Remove the original "Make Payment for" label since saved cards have their own
        existingLabel.style.display = 'none';
        // New buttons just entered the DOM — give them the correct
        // initial disabled state rather than leaving them enabled
        // by default until the next field change.
        updatePaymentButtonState();
    }

    function payWithSavedCard(pmId) {
        if (_dateExceedsLimit) {
            showDepositError('Please choose a move-in date within the allowed booking window before continuing.');
            document.getElementById('moveInDate').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        var errors = [];
        var requiredFields = [
            { id: 'moveInDate',  groupId: 'group-move-in-date' },
            { id: 'storageType', groupId: 'group-storage-type' },
            { id: 'firstName',   groupId: 'group-firstname' },
            { id: 'lastName',    groupId: 'group-lastname' },
            { id: 'email',       groupId: 'group-email' },
            { id: 'phone',       groupId: 'group-phone' },
            { id: 'AddressLine1',    groupId: 'group-address1' },
            { id: 'AddressTown',        groupId: 'group-town' },
            { id: 'Postcode',    groupId: 'group-postcode' }
        ];
        requiredFields.forEach(function(f) {
            var el = document.getElementById(f.id);
            var group = document.getElementById(f.groupId);
            if (el && !el.value.trim()) {
                errors.push(f.id);
                if (group) group.classList.add('has-error');
            }
        });
        if (errors.length > 0) {
            showDepositError('Please fill in all required fields.');
            document.querySelector('.has-error').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        _formSnapshot = {
            title:      document.getElementById('title') ? document.getElementById('title').value : '',
            moveInDate: document.getElementById('moveInDate').value,
            firstName:  document.getElementById('firstName').value.trim(),
            lastName:   document.getElementById('lastName').value.trim(),
            email:      document.getElementById('email').value.trim(),
            phone:      document.getElementById('phone').value.trim(),
            address1:   document.getElementById('AddressLine1').value.trim(),
            address2:   document.getElementById('AddressLine2') ? document.getElementById('AddressLine2').value.trim() : '',
            town:       document.getElementById('AddressTown').value.trim(),
            county:     document.getElementById('AddressCounty') ? document.getElementById('AddressCounty').value.trim() : '',
            postcode:   document.getElementById('Postcode').value.trim(),
            country:    document.getElementById('AddressCountry') ? document.getElementById('AddressCountry').value : 'United Kingdom'
        };

        hideDepositAlerts();
        showDepositSuccess('Processing payment…');

        fetch('/hs/serverless/create-payment-intent', {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({
                dealId:           _dealId,
                contactId:        _contactId,
                moveInDate:       _formSnapshot.moveInDate,
                firstName:        _formSnapshot.firstName,
                lastName:         _formSnapshot.lastName,
                savedCardPmId:    pmId,
                stripeCustomerId: _smStripeCustomerId
            })
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            if (!data.success) throw new Error(data.error || 'Payment failed');
            if (!data.confirmed) throw new Error('Payment was not confirmed');

            showDepositSuccess('Payment successful! Confirming your reservation…');
            return fetch('/hs/serverless/confirm-reservation', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({
                    dealId:          _dealId,
                    contactId:       _contactId,
                    paymentIntentId: data.paymentIntentId,
                    title:           _formSnapshot.title,
                    moveInDate:      _formSnapshot.moveInDate,
                    firstName:       _formSnapshot.firstName,
                    lastName:        _formSnapshot.lastName,
                    phone:           _formSnapshot.phone,
                    address1:        _formSnapshot.address1,
                    town:            _formSnapshot.town,
                    county:          _formSnapshot.county,
                    postcode:        _formSnapshot.postcode,
                    country:         _formSnapshot.country,
                    smCustomerId:    _smCustomerId,
                    smQuoteGuid:     _smQuoteGuid,
                    smSiteId:        _smSiteId,
                    dealSize:        _dealSize,
                    standardRate:    _standardRate,
                    offerRate:       _offerRate,
                    offerWeeks:      _offerWeeks,
                    smSizeCode:      _smSizeCode
                })
            });
        })
        .then(function() {
            window.location.href = '/get-a-quote/reservation-confirmation?dealId=' + (_dealId || '') + '&paid=1';
        })
        .catch(function(err) {
            hideDepositAlerts();
            showDepositError('Something went wrong. Please try again.');
            console.error('[payWithSavedCard]', err);
        });
    }

    function handlePayment() {

        if (_dateExceedsLimit) {
            showDepositError('Please choose a move-in date within the allowed booking window before continuing.');
            document.getElementById('moveInDate').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        // ── Validate required form fields ──────────────────────────
        var errors = [];
        var requiredFields = [
            { id: 'moveInDate',  groupId: 'group-move-in-date',  msg: 'Please select a move-in date.' },
            { id: 'storageType', groupId: 'group-storage-type',   msg: 'Please select a storage type.' },
            { id: 'firstName',   groupId: 'group-firstname',      msg: 'Please enter your first name.' },
            { id: 'lastName',    groupId: 'group-lastname',       msg: 'Please enter your surname.' },
            { id: 'email',       groupId: 'group-email',          msg: 'Please enter your email.' },
            { id: 'phone',       groupId: 'group-phone',          msg: 'Please enter your phone number.' },
            { id: 'AddressLine1',    groupId: 'group-address1',       msg: 'Please enter your address.' },
            { id: 'AddressTown',        groupId: 'group-town',           msg: 'Please enter your town.' },
            { id: 'Postcode',    groupId: 'group-postcode',       msg: 'Please enter your postcode.' }
        ];

        requiredFields.forEach(function(f) {
            var el = document.getElementById(f.id);
            var group = document.getElementById(f.groupId);
            if (el && !el.value.trim()) {
                errors.push(f.msg);
                if (group) group.classList.add('has-error');
            }
        });

        if (errors.length > 0) {
            showDepositError(errors[0]);
            // Scroll to first error
            var firstError = document.querySelector('.has-error');
            if (firstError) firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        hideDepositAlerts();

        // ── Snapshot form data for use after payment ───────────────
        _formSnapshot = {
            title:      document.getElementById('title') ? document.getElementById('title').value : '',
            moveInDate: document.getElementById('moveInDate').value,
            firstName:  document.getElementById('firstName').value.trim(),
            lastName:   document.getElementById('lastName').value.trim(),
            email:      document.getElementById('email').value.trim(),
            phone:      document.getElementById('phone').value.trim(),
            address1:   document.getElementById('AddressLine1').value.trim(),
            address2:   document.getElementById('AddressLine2') ? document.getElementById('AddressLine2').value.trim() : '',
            town:       document.getElementById('AddressTown').value.trim(),
            county:     document.getElementById('AddressCounty') ? document.getElementById('AddressCounty').value.trim() : '',
            postcode:   document.getElementById('Postcode').value.trim(),
            country:    document.getElementById('AddressCountry') ? document.getElementById('AddressCountry').value : 'United Kingdom'
        };

        // ── Disable button, show loading ───────────────────────────
        var btn = document.getElementById('btnPay');
        btn.disabled    = true;
        btn.textContent = 'Setting up…';
        document.getElementById('deposit-loading').style.display = 'block';
        document.getElementById('stripe-deposit-element').innerHTML = '';

        function doFetch() {
            fetch('/hs/serverless/create-payment-intent', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({
                    dealId:     _dealId,
                    contactId:  _contactId,
                    moveInDate: _formSnapshot.moveInDate,
                    firstName:  _formSnapshot.firstName,
                    lastName:   _formSnapshot.lastName
                })
            })
            .then(function(res) {
                if (!res.ok) throw new Error('HTTP ' + res.status);
                return res.json();
            })
            .then(function(data) {
                if (!data.clientSecret) throw new Error(data.error || 'No client secret returned');

                document.getElementById('deposit-loading').style.display = 'none';

                // Update deposit label with actual amount
                var pounds = (data.amount / 100).toFixed(2);
                document.getElementById('depositLabel').textContent = '£' + pounds;

                // Mount Stripe Payment Element
                depositStripeInstance = Stripe(data.publishableKey || STRIPE_PK);
                depositElements = depositStripeInstance.elements({
                    clientSecret: data.clientSecret,
                    appearance: {
                        theme: 'stripe',
                        variables: {
                            colorPrimary:    '#d30072',
                            colorBackground: '#ffffff',
                            colorText:       '#1a1a1a',
                            colorDanger:     '#dc2626',
                            fontFamily:      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
                            borderRadius:    '6px'
                        }
                    }
                });

                var paymentElement = depositElements.create('payment');
                paymentElement.mount('#stripe-deposit-element');

                paymentElement.on('ready', function() {
                    // Swap buttons: hide "Pay with a new card", show "Complete payment"
                    btn.style.display = 'none';
                    document.getElementById('btnConfirmPay').style.display = 'inline-flex';
                    updatePaymentButtonState();
                });
            })
            .catch(function(err) {
                document.getElementById('deposit-loading').style.display = 'none';
                btn.disabled    = false;
                btn.textContent = 'Pay with a new card';
                showDepositError('Could not set up payment. Please try again or call us on 0800 321 3211.');
                console.error('[create-payment-intent]', err);
            });
        }

        if (typeof Stripe !== 'undefined') {
            doFetch();
        } else {
            var s = document.createElement('script');
            s.src    = 'https://js.stripe.com/v3/';
            s.onload = doFetch;
            s.onerror = function() {
                document.getElementById('deposit-loading').style.display = 'none';
                document.getElementById('btnPay').disabled    = false;
                document.getElementById('btnPay').textContent = 'Pay with a new card';
                showDepositError('Could not load payment form. Please refresh and try again.');
            };
            document.head.appendChild(s);
        }
    }

    /* ── Step 2: called when "Complete payment" is clicked ──────────
       Confirms the Stripe payment. On success calls confirm-reservation
       to update HubSpot, then redirects to the confirmation page.
    ──────────────────────────────────────────────────────────────── */
    function submitDepositPayment() {
        var btn = document.getElementById('btnConfirmPay');
        btn.disabled    = true;
        btn.textContent = 'Processing…';
        hideDepositAlerts();

        // Re-snapshot right before submitting — the original snapshot
        // was taken back when "Pay with a new card" was first clicked.
        // If the customer edited a field since then (the form stays
        // fully visible/editable while the card element is mounted),
        // this ensures confirm-reservation gets whatever's actually on
        // screen now, not a possibly-stale earlier snapshot.
        _formSnapshot = {
            title:      document.getElementById('title') ? document.getElementById('title').value : '',
            moveInDate: document.getElementById('moveInDate').value,
            firstName:  document.getElementById('firstName').value.trim(),
            lastName:   document.getElementById('lastName').value.trim(),
            email:      document.getElementById('email').value.trim(),
            phone:      document.getElementById('phone').value.trim(),
            address1:   document.getElementById('AddressLine1').value.trim(),
            address2:   document.getElementById('AddressLine2') ? document.getElementById('AddressLine2').value.trim() : '',
            town:       document.getElementById('AddressTown').value.trim(),
            county:     document.getElementById('AddressCounty') ? document.getElementById('AddressCounty').value.trim() : '',
            postcode:   document.getElementById('Postcode').value.trim(),
            country:    document.getElementById('AddressCountry') ? document.getElementById('AddressCountry').value : 'United Kingdom'
        };

        depositStripeInstance.confirmPayment({
            elements: depositElements,
            confirmParams: {
                // Fallback URL if redirect is required (e.g. 3DS)
                return_url: window.location.origin + '/get-a-quote/reservation-confirmation?dealId=' + (_dealId || '')
            },
            redirect: 'if_required'
        })
        .then(function(result) {
            if (result.error) {
                btn.disabled    = false;
                btn.textContent = 'Complete payment';
                showDepositError(result.error.message || 'Payment failed. Please try again.');
                return;
            }

            // Payment succeeded — update HubSpot then redirect
            var pi = result.paymentIntent;
            showDepositSuccess('Payment successful! Confirming your reservation…');
            btn.textContent = 'Confirming…';

            fetch('/hs/serverless/confirm-reservation', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({
                    dealId:          _dealId,
                    contactId:       _contactId,
                    paymentIntentId: pi.id,
                    title:           _formSnapshot.title,
                    moveInDate:      _formSnapshot.moveInDate,
                    firstName:       _formSnapshot.firstName,
                    lastName:        _formSnapshot.lastName,
                    phone:           _formSnapshot.phone,
                    address1:        _formSnapshot.address1,
                    town:            _formSnapshot.town,
                    county:          _formSnapshot.county,
                    postcode:        _formSnapshot.postcode,
                    country:         _formSnapshot.country,
                    smCustomerId:    _smCustomerId,
                    smQuoteGuid:     _smQuoteGuid,
                    smSiteId:        _smSiteId,
                    dealSize:        _dealSize,
                    standardRate:    _standardRate,
                    offerRate:       _offerRate,
                    offerWeeks:      _offerWeeks,
                    smSizeCode:      _smSizeCode,
                })
            })
            .then(function() {
                // Redirect to confirmation page regardless of HubSpot update result
                window.location.href = '/get-a-quote/reservation-confirmation?dealId=' + (_dealId || '') + '&paid=1';
            })
            .catch(function() {
                // HubSpot update failed but payment succeeded — still redirect
                window.location.href = '/get-a-quote/reservation-confirmation?dealId=' + (_dealId || '') + '&paid=1';
            });
        })
        .catch(function(err) {
            btn.disabled    = false;
            btn.textContent = 'Complete payment';
            showDepositError('Something went wrong. Please try again.');
            console.error('[submitDepositPayment]', err);
        });
    }

    /* ── Helpers ─────────────────────────────────────────────────── */
    function showDepositError(msg) {
        var el = document.getElementById('payment-alert-error');
        el.textContent    = msg;
        el.style.display  = 'block';
    }
    function showDepositSuccess(msg) {
        var el = document.getElementById('payment-alert-success');
        el.textContent    = msg;
        el.style.display  = 'block';
    }
    function hideDepositAlerts() {
        document.getElementById('payment-alert-error').style.display   = 'none';
        document.getElementById('payment-alert-success').style.display = 'none';
    }

    // ── Video: open ─────────────────────────────────────────────────
    window.openVideo = function() {
      var size      = parseInt(document.getElementById('summarySize').textContent, 10);
      var assetSize = resolveAssetSize(size);
      unitVideoSrc.src = BASE_VID_URL + assetSize + '.mp4';
      unitVideo.load();
      unitVideo.addEventListener('canplay', function onCanPlay() {
        unitVideo.removeEventListener('canplay', onCanPlay);
        unitVideo.play();
        unitVideo.style.opacity          = '1';
        unitVideo.style.pointerEvents    = 'auto';
        unitImage.style.opacity          = '0';
        playVideoBtn.style.opacity       = '0';
        playVideoBtn.style.pointerEvents = 'none';
      });
    };

    // ── Video: close ────────────────────────────────────────────────
    var isClosing = false;
    function closeVideo() {
      if (isClosing) return;
      isClosing = true;
      unitVideo.pause();
      unitImage.style.opacity = '1';
      setTimeout(function() {
        unitVideo.style.opacity          = '0';
        unitVideo.style.pointerEvents    = 'none';
        unitVideo.currentTime            = 0;
        playVideoBtn.style.opacity       = '1';
        playVideoBtn.style.pointerEvents = 'auto';
        isClosing = false;
      }, 300);
    }
    unitVideo.addEventListener('timeupdate', function() {
      if (unitVideo.duration && unitVideo.currentTime >= unitVideo.duration - 1.5) {
        closeVideo();
      }
    });
    unitVideo.addEventListener('ended', closeVideo);

    // ── Main fetch ──────────────────────────────────────────────────
    // Reads dealId from URL, calls get-quote, populates page.
    var urlParams = new URLSearchParams(window.location.search);
    var dealId    = urlParams.get('dealId');

    if (!dealId) {
      document.getElementById('loadingState').style.display = 'none';
      document.getElementById('errorState').style.display   = 'block';
    } else {
      fetch('/hs/serverless/get-quote?dealId=' + dealId)
        .then(function(res) {
          if (!res.ok) throw new Error('HTTP ' + res.status);
          return res.json();
        })
        .then(function(data) {
          if (!data.success) throw new Error(data.error || 'Failed to load quote');
          populatePage(data);

          // ── Fetch the live reservation limit separately ──────────
          // Deliberately not awaited/blocking — the page is already
          // shown by populatePage() regardless of this call's
          // outcome. Once it resolves, refresh the banner/alert with
          // the real limit. If it fails or siteHsId is missing,
          // _reservationValidDays just stays null and the limit
          // check simply never fires — fails safe, doesn't block
          // page load or bookings on this being unavailable.
          if (data.siteHsId) {
            fetch('/hs/serverless/get-reservation-limit?siteHsId=' + data.siteHsId)
              .then(function(res) { return res.json(); })
              .then(function(limitData) {
                if (limitData && limitData.success) {
                  _reservationValidDays = limitData.reservationValidDays != null
                    ? parseInt(limitData.reservationValidDays, 10)
                    : null;
                  updateBanner();
                }
              })
              .catch(function(err) {
                console.error('get-reservation-limit error:', err);
              });
          }
        })
        .catch(function(err) {
          console.error('get-quote error:', err);
          document.getElementById('loadingState').style.display = 'none';
          document.getElementById('errorState').style.display   = 'block';
        });
    }

    // ── Clear error state on input, and re-check payment gating ─────
    document.querySelectorAll('input, select').forEach(function(el) {
      function recheck() {
        var group = el.closest('.form-group');
        if (group) group.classList.remove('has-error');
        updatePaymentButtonState();
      }
      el.addEventListener('input', recheck);
      el.addEventListener('change', recheck);
    });

    // ── Re-check the payment gate after Loqate autofills the address ──
    // Loqate populates the address fields by setting .value directly, which
    // does NOT fire 'input'/'change' — so the gate above never re-runs and the
    // Pay button stays disabled until the user manually edits a field. Hook
    // Loqate's populate event to re-validate (and clear error states) once it
    // fills the fields. Guarded so it's a no-op if pca isn't ready.
    try {
      if (window.pca && typeof pca.on === 'function') {
        pca.on('load', function (type, id, control) {
          if (control && typeof control.listen === 'function') {
            control.listen('populate', function () {
              // Loqate just filled the fields — clear any stale error state and
              // re-evaluate the payment gate so the button enables correctly.
              document.querySelectorAll('.form-group.has-error').forEach(function (g) {
                g.classList.remove('has-error');
              });
              if (typeof updatePaymentButtonState === 'function') updatePaymentButtonState();
            });
          }
        });
      }
    } catch (e) {
      console.error('[Loqate] populate re-validate hook failed:', e);
    }
  </script>


</body></html>