/* ==========================================================================
   Mobile Phone Insurance (mobile-only landing) — functional part

   Staging page:  https://tbc-phone-insurance.webflow.io/
   Live URL shape: https://<host>/?gid=<GUID>   (the GUID = GroupId, unique per client)

   Written following the same pattern as the Individual Medical Product page
   (Webflow.push wrapper, config block, auto test/prod detection, is--active
   toggling for the full-screen states, class-based states instead of inline
   styles where the design needs them). All markup/classes/ids below were
   verified directly against the real staging page via the live DOM.

   API (MobileInsurance, test host myprofile-api-test.remoteapi.ge):
     1) GetPolicyInfo   {GroupId}                    -> on page load
     2) GetPersonalInfo {personalNumber, firstName, lastName, birthDate}
                                                      -> ONLY when the birth date
                                                         is entered/changed and the
                                                         other three fields are filled.
                                                         Not on later edits of name /
                                                         surname / personal number and
                                                         not on submit.
     3) CreatePolicy    {...policy data + birthDate + IMEI list}
                                                      -> "გაგზავნა" when both
                                                         checkboxes are ticked. The server
                                                         validates name / surname / personal
                                                         number / birth date here and answers
                                                         with an error text -> matching
                                                         fields get is-error + banner.

   GetPolicyInfo.status:  1 -> show the form
                          2 -> show .s-policy-issued ("პოლისი გაფორმებულია")
                          anything else / not found / error -> .s-no-offer-found

   Map of DOM hooks actually present on the page (verified in the browser):
   ----------------------------------------------------------------------
   #loader.s-loading   (class is--active)       -> full-screen preloader
   .s-policy-issued    (class is--active)       -> status = 2 screen
   .s-data-received    (class is--active)       -> after a successful CreatePolicy
   .s-no-offer-found   (class is--active)       -> offer not found / invalid GUID
   .popup-load-info    (class is--active)       -> "მიმდინარეობს მონაცემების
                                                   გადამოწმება" overlay while
                                                   GetPersonalInfo / CreatePolicy
                                                   are in flight
   #inp-name / #inp-last-name / #inp-personal-id-number / #inp-mobile-number /
   #inp-date-birth                               -> personal fields (name, surname and
                                                    personal number are prefilled but editable;
                                                    the mobile is read-only (class is-readonly);
                                                    the birth
                                                    date is picked with the calendar —
                                                    tap the field, or an element with
                                                    [data-date-trigger] / .icon-calendar)
   #error-name / #error-last-name / #error-personal-id-number /
   #error-mobile-number / #error-date-birth      -> .feedback-error under each
   .list-mobile-phone > .mobile-phone-item       -> TEMPLATE for one phone; it is
                                                   cloned once per phoneDetails
                                                   entry (ids made unique per clone)
        .text-count                              -> "მობილური N"
        .text-name-phone                         -> phoneModel
        .text-name-phone-price                   -> price + ₾
        .text-name-phone-insurance               -> premium + ₾
        input (IMEI) + .feedback-error           -> IMEI code + its error
        a.button (დასკანერება)                   -> opens the camera scanner
   .text-total-price                             -> sum of all premiums
   .policy-popup__chb-wrap-2 (x2)                -> the two consent checkboxes
        div.c-policy-popup__chb__label-2         -> label text (gets .is-error)
        a.c-policy-popup__chb__label-link-2      -> 1st: personInfoUrl,
                                                    2nd: policyWordingUrl
                                                    (href/target only — the
                                                    visible text stays static)
   a.c-policy__cta                               -> "გაგზავნა" submit button
   .wrap-error-personal-number-date              -> red top banner (text div +
        a.close-btn-red-error)                      "მითითებული პირადი ნომერი და
                                                    დაბადების თარიღი არ ემთხვევა".
                                                    Hidden on start, shown on
                                                    GetPersonalInfo mismatch (and,
                                                    with a generic text, on other
                                                    request errors). × closes it.
                                                    (A .c-error-banner is created
                                                    only if this element is gone.)

   Classes this script ADDS (style them in Webflow if you want to override the
   small fallback CSS injected by this script):
     .is-error        on .form-input (red border) and on the checkbox label text
     .is-disable-btn  on the submit button while a request is in flight
   ========================================================================== */

var Webflow = Webflow || [];
Webflow.push(function () {

  // ------------------------------------------------------------------
  // Config
  // ------------------------------------------------------------------

  // Auto-detected: *.webflow.io staging, localhost and any host that has
  // "test" in its name (the spec example uses zoomproperty-test.tbci.ge)
  // => test API. Any other domain => production API.
  const host = window.location.hostname;
  const isTest =
    host.endsWith('.webflow.io') ||
    host === 'localhost' ||
    host === '127.0.0.1' ||
    /(^|[.-])test([.-]|$)/i.test(host);
  const isProduction = !isTest;

  const API_BASE_TEST = 'https://myprofile-api-test.remoteapi.ge/myprofileportal/api/MobileInsurance';
  // TODO: test URL above is from the spec; prod URL below is inferred by the
  // same test -> prod domain swap used on the other projects — verify before go-live.
  const API_BASE_PROD = 'https://myprofile-api-prod.remoteapi.ge/myprofileportal/api/MobileInsurance';
  const API_BASE = isProduction ? API_BASE_PROD : API_BASE_TEST;

  const URL_POLICY_INFO = API_BASE + '/GetPolicyInfo';
  const URL_PERSONAL_INFO = API_BASE + '/GetPersonalInfo';
  const URL_CREATE_POLICY = API_BASE + '/CreatePolicy';

  // Lazy-loaded only when the user taps "დასკანერება" and the browser has no
  // native BarcodeDetector (iOS Safari, Firefox). ~330 KB, loaded once.
  const ZXING_URL = 'https://cdn.jsdelivr.net/npm/@zxing/library@0.21.3/umd/index.min.js';
  // Preferred decoder on those browsers: zxing-wasm (the C++ ZXing compiled to WebAssembly,
  // ~1 MB). It reads dense / tiny barcodes (e.g. the IMEI on an iPhone box label) that the
  // JS port above cannot. If it fails to load, the JS port is used instead.
  const ZXING_WASM_JS = 'https://cdn.jsdelivr.net/npm/zxing-wasm@3.1.3/dist/iife/reader/index.js';
  const ZXING_WASM_DIR = 'https://cdn.jsdelivr.net/npm/zxing-wasm@3.1.3/dist/reader/';

  // Which fields the client may NOT edit (confirmed by the client): the phone
  // number and the phone/price data. The name, surname and personal number come
  // prefilled from GetPolicyInfo (the shop operator may have made a typo) but
  // the customer can correct them; the birth date and IMEI are filled in by the
  // customer. A locked field that came back empty stays editable.
  const LOCKED_FIELDS = ['#inp-mobile-number'];

  const CURRENCY = '₾';

  // Texts that are NOT in the design (taken from the spec screenshots where
  // possible, the rest are plain Georgian placeholders — confirm with the client).
  const TXT = {
    mismatch: 'მითითებული პირადი ნომერი და დაბადების თარიღი არ ემთხვევა',
    genericError: 'დაფიქსირდა შეცდომა, გთხოვთ სცადოთ თავიდან',
    scanHint: 'მიმართეთ კამერა IMEI შტრიხკოდზე 15–20 სმ მანძილიდან',
    scanFar: 'ტელეფონი ოდნავ მოაშორეთ, რომ კამერამ ფოკუსი აიღოს',
    noCamera: 'კამერაზე წვდომა ვერ მოხერხდა. შეიყვანეთ IMEI ხელით',
    close: 'დახურვა',
    photo: 'ფოტოთი წაკითხვა',                // (wording from the client's reference app)
    photoBusy: 'სურათი მუშავდება...',        // (wording from the client's reference app)
    photoFail: 'IMEI შტრიხკოდი ვერ ამოვიცანით. გადაიღეთ უფრო ახლოდან ან შეიყვანეთ ხელით',
  };

  // Console logging: set to false to silence everything except warnings.
  const DEBUG = true;
  const log = (...args) => { if (DEBUG) console.log('[phone-page]', ...args); };

  const GUID_RE = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i;

  // ------------------------------------------------------------------
  // State
  // ------------------------------------------------------------------

  const state = {
    groupId: '',
    policy: null,        // GetPolicyInfo payload (unwrapped)
    phones: [],          // [{ data, el, input, error }]
    verifiedKey: null,   // values for which GetPersonalInfo already succeeded
    failedKey: null,     // values for which GetPersonalInfo already failed
    failedInfo: null,    // what exactly was wrong ({message, fields})
    verifying: false,
    verifyPromise: null,
    submitting: false,
  };

  const $ = (sel, root) => (root || document).querySelector(sel);
  const $$ = (sel, root) => Array.from((root || document).querySelectorAll(sel));

  // The phone block in the Designer is only a template — take it out of the
  // DOM right away so "Phone 0 / 0 ₾" never flashes, keep a pristine clone.
  const phoneList = $('.list-mobile-phone');
  const phoneTemplate = phoneList && $('.mobile-phone-item', phoneList)
    ? $('.mobile-phone-item', phoneList).cloneNode(true)
    : null;
  if (phoneList) phoneList.innerHTML = '';

  // ------------------------------------------------------------------
  // Full-screen states
  // ------------------------------------------------------------------

  // Browser chrome colour (iPhone status bar / bottom toolbar). Two things are needed so the
  // current background reaches under them instead of the bars showing a different colour:
  //  1) viewport-fit=cover — lets fixed full-screen layers extend under the bars;
  //  2) <html> background + <meta name="theme-color"> = background of the screen that is
  //     on top right now (loader / policy issued / data received / no offer / the form).
  const SCREEN_SELECTORS = ['#loader', '.s-loading', '.s-policy-issued', '.s-data-received', '.s-no-offer-found'];

  function extendIntoSafeArea() {
    let m = $('meta[name="viewport"]');
    if (!m) { m = document.createElement('meta'); m.name = 'viewport'; m.content = 'width=device-width, initial-scale=1'; document.head.appendChild(m); }
    if (!/viewport-fit\s*=/.test(m.content)) m.content = m.content.replace(/[,\s]+$/, '') + ', viewport-fit=cover';
  }

  function opaqueBackground(el) {
    // (stops before <body>/<html>: those carry the colour this script writes itself)
    for (let e = el; e && e.nodeType === 1 && e !== document.body && e !== document.documentElement; e = e.parentElement) {
      const c = getComputedStyle(e).backgroundColor;
      if (c && c !== 'transparent' && !/rgba\([^)]*,\s*0\)$/.test(c)) return c;
    }
    return '#fff';
  }

  // The colour comes from the screen that is on top right now (the block with .is--active),
  // and is written to <html> AND <body> (iOS samples one or the other depending on the
  // version) plus the theme-color meta. !important beats the classes set in Webflow.
  function syncChromeColor() {
    const active = SCREEN_SELECTORS.map(sel => $(sel)).find(el => el && el.classList.contains('is--active'));
    const color = opaqueBackground(active || $('.c-page-wrapper') || document.body);
    [document.documentElement, document.body].forEach(el => el.style.setProperty('background-color', color, 'important'));
    // While a full-screen state is on top, everything else on the page is hidden (see the CSS).
    // On some iPhones the strip under the bottom toolbar is drawn from the PAGE, not from the
    // fixed full-screen layer — without this the form (and its button) shows through there.
    document.documentElement.classList.toggle('phone-screen-active', !!active);
    let t = $('meta[name="theme-color"]');
    if (!t) { t = document.createElement('meta'); t.name = 'theme-color'; document.head.appendChild(t); }
    t.content = color;
    if (color !== syncChromeColor.last) {
      syncChromeColor.last = color;
      log('chrome colour (status bar / toolbar):', color, active ? '(' + (active.id ? '#' + active.id : '.' + active.classList[0]) + ')' : '(page)');
    }
  }

  // Re-sync whenever a screen is switched by ANY code (this script, Webflow interactions, ...)
  // and once more after the CSS transitions / the first paint, so it never stays stale.
  let chromeTimer = null;
  function syncChromeColorSoon() {
    syncChromeColor();
    requestAnimationFrame(syncChromeColor);
    clearTimeout(chromeTimer);
    chromeTimer = setTimeout(syncChromeColor, 400);
  }
  function watchChromeColor() {
    if (typeof MutationObserver === 'function') {
      const mo = new MutationObserver(syncChromeColorSoon);
      SCREEN_SELECTORS.map(sel => $(sel)).filter(Boolean).forEach(el => mo.observe(el, { attributes: true, attributeFilter: ['class', 'style'] }));
    }
    window.addEventListener('pageshow', syncChromeColorSoon);   // back/forward cache
    document.addEventListener('visibilitychange', () => { if (!document.hidden) syncChromeColorSoon(); });
    window.addEventListener('load', syncChromeColorSoon);
  }

  function setLoading(show) {
    log('preloader (#loader):', show ? 'ON' : 'OFF');
    const el = $('#loader') || $('.s-loading');
    if (el) el.classList.toggle('is--active', show);
    syncChromeColorSoon();
  }

  function setPopupLoading(show) {
    log('overlay (.popup-load-info):', show ? 'ON' : 'OFF');
    const el = $('.popup-load-info');
    if (el) el.classList.toggle('is--active', show);
  }

  function showScreen(selector) {
    log('SHOW SCREEN', selector, $(selector) ? '' : '(element not found!)');
    const el = $(selector);
    if (el) {
      el.classList.remove('none');
      el.classList.add('is--active');
    }
    document.body.style.overflow = 'hidden'; // block page scroll behind the screen
    syncChromeColorSoon();
  }

  // The page wrapper (.c-page-wrapper) is hidden by default in the Designer (display:none) so
  // nothing flashes while the data loads. It is revealed only when the form is ready
  // (policy status 1). The full-screen states (loader / issued / received / no offer) are
  // separate blocks and work without it. The class is--active is tried first (in case the
  // Designer styles .c-page-wrapper.is--active); if the wrapper is still display:none after
  // that, an inline display:block is set.
  function showPage() {
    const w = $('.c-page-wrapper');
    if (!w) return;
    w.classList.add('is--active');
    if (getComputedStyle(w).display === 'none') w.style.display = 'block';
    log('page wrapper (.c-page-wrapper): SHOWN, display =', getComputedStyle(w).display);
    syncChromeColorSoon();
  }

  const showNoOffer = () => showScreen('.s-no-offer-found');
  const showPolicyIssued = () => showScreen('.s-policy-issued');
  const showDataReceived = () => showScreen('.s-data-received');

  // ------------------------------------------------------------------
  // HTTP helper
  // ------------------------------------------------------------------

  // Reads the body as text first: some responses are empty or plain text
  // (seen on the other TBC endpoints), so never call resp.json() blindly.
  async function postJson(url, body) {
    const name = url.split('/').pop();
    log('→ POST', name, body);
    const resp = await fetch(url, {
      method: 'POST',
      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    const text = await resp.text();
    let data = null;
    if (text) {
      try { data = JSON.parse(text); } catch (e) { data = null; }
    }
    log('← ' + name, 'HTTP ' + resp.status, resp.ok ? 'ok' : 'NOT ok', data !== null ? '(JSON)' : text ? '(not JSON)' : '(empty body)');
    return { ok: resp.ok, status: resp.status, data: data, text: text };
  }

  // ------------------------------------------------------------------
  // 1) GetPolicyInfo on page load
  // ------------------------------------------------------------------

  function getGroupId() {
    // Link shape: https://<host>/?gid=<GUID>
    const v = new URLSearchParams(window.location.search).get('gid');
    return v && GUID_RE.test(v) ? v.match(GUID_RE)[0] : '';
    // DISABLED for now — GUID in the path, https://<host>/<GUID> (as in the spec). It needs a
    // rewrite on the client's side (Webflow answers 404 on such paths). To enable it, uncomment
    // and put these two lines BEFORE the query lookup above (or after it, as a fallback):
    // const m = window.location.pathname.match(GUID_RE);
    // return m ? m[0] : '';
  }

  // The doc shows a flat object; the other TBC project turned out to wrap the
  // real payload in {policyInfo:{...}}. Accept both so a wrapper can't break it.
  function unwrapPolicy(data) {
    if (!data || typeof data !== 'object') return null;
    if (data.isSuccess === false) return null;
    if (data.policyInfo && typeof data.policyInfo === 'object') return data.policyInfo;
    return data;
  }

  async function loadPolicy() {
    state.groupId = getGroupId();
    log('init:', { host: host, env: isProduction ? 'PRODUCTION' : 'TEST', apiBase: API_BASE, groupId: state.groupId || '(none)', lockedFields: LOCKED_FIELDS.join(',') });
    if (!state.groupId) {
      console.warn('[phone-page] no GUID in the URL');
      setLoading(false);
      showNoOffer();
      return;
    }

    let policy = null;
    try {
      const res = await postJson(URL_POLICY_INFO, { GroupId: state.groupId });
      log('GetPolicyInfo:', res.status, res.data || res.text);
      policy = res.ok ? unwrapPolicy(res.data) : null;
    } catch (e) {
      console.warn('[phone-page] GetPolicyInfo error:', e);
    }

    setLoading(false);

    if (!policy || !Array.isArray(policy.phoneDetails) || !policy.phoneDetails.length) {
      log('policy missing or without phoneDetails -> no offer');
      showNoOffer();
      return;
    }

    const status = Number(policy.status);
    log('policy status:', policy.status, '| phones:', policy.phoneDetails.length);
    if (status === 2) { log('status 2 -> policy already issued'); showPolicyIssued(); return; }
    if (status !== 1) {
      console.warn('[phone-page] unexpected status:', policy.status);
      showNoOffer();
      return;
    }

    fixSwappedPersonFields(policy);
    state.policy = policy;
    fillForm(policy);
    renderPhones(policy.phoneDetails);
    applyConsentLinks(policy);
    showPage();
  }

  // ------------------------------------------------------------------
  // Filling the page with data
  // ------------------------------------------------------------------

  // TEMPORARY WORKAROUND. The test API returns the person fields shifted:
  //   firstName = surname, lastName = personal number, personalNumber = first name.
  // When personalNumber is not 11 digits but lastName is, the values are put
  // back in the right places. Once the backend is fixed this does nothing.
  function fixSwappedPersonFields(p) {
    const isPn = v => /^\d{11}$/.test(String(v || '').trim());
    if (!isPn(p.personalNumber) && isPn(p.lastName)) {
      const pn = p.lastName, first = p.personalNumber, last = p.firstName;
      p.personalNumber = pn; p.firstName = first; p.lastName = last;
      console.warn('[phone-page] GetPolicyInfo person fields looked swapped (personalNumber was not 11 digits) -> remapped. Backend should fix this.');
    }
  }

  function fillForm(p) {
    if (p.personalNumber && !/^\d{11}$/.test(String(p.personalNumber).trim())) {
      console.warn('[phone-page] personalNumber is not 11 digits — check the field mapping in GetPolicyInfo:', p.personalNumber);
    }
    const map = [
      ['#inp-name', p.firstName],
      ['#inp-last-name', p.lastName],
      ['#inp-personal-id-number', p.personalNumber],
      ['#inp-mobile-number', p.mobile],
      ['#inp-date-birth', isoToDisplay(p.birthDate)],
    ];
    log('prefill:', { firstName: p.firstName, lastName: p.lastName, personalNumber: p.personalNumber, mobile: p.mobile, birthDate: p.birthDate });
    map.forEach(([sel, value]) => {
      const input = $(sel);
      if (!input) { console.warn('[phone-page] field not found:', sel); return; }
      input.value = value ? String(value) : '';
      syncFloat(input);
      if (LOCKED_FIELDS.indexOf(sel) !== -1 && input.value) {
        input.readOnly = true;
        input.classList.add('is-readonly');
        log('locked (read-only):', sel);
      }
    });
  }

  function formatMoney(n) {
    const v = Math.round((Number(n) || 0) * 100) / 100;
    return new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(v);
  }

  function renderPhones(phones) {
    if (!phoneList || !phoneTemplate) return;
    phoneList.innerHTML = '';
    state.phones = [];

    phones.forEach((p, i) => {
      const el = phoneTemplate.cloneNode(true);
      const n = i + 1;

      // unique ids per clone (the template reuses one id for every phone)
      const input = $('input', el);
      const label = $('label', el);
      const error = $('.feedback-error', el);
      if (input) { input.id = 'inp-imei-number-' + n; input.value = p.imeiCode ? String(p.imeiCode) : ''; }
      if (label) label.setAttribute('for', 'inp-imei-number-' + n);
      if (error) { error.id = 'error-imei-number-' + n; error.style.display = 'none'; }

      const count = $('.text-count', el);
      if (count) count.textContent = (count.textContent || '').replace(/\d+\s*$/, '') .trim() + ' ' + n;
      setText($('.text-name-phone', el), p.phoneModel);
      setText($('.text-name-phone-price', el), formatMoney(p.price) + ' ' + CURRENCY);
      setText($('.text-name-phone-insurance', el), formatMoney(p.premium) + ' ' + CURRENCY);

      phoneList.appendChild(el);

      const item = { data: p, el: el, input: input, error: error };
      state.phones.push(item);

      if (input) {
        bindFloatingLabel(input);
        input.addEventListener('input', () => {
          input.value = input.value.replace(/\s+/g, '');
          clearFieldError(input, error);
        });
      }
      const scanBtn = $('a.button', el);
      if (scanBtn) {
        scanBtn.addEventListener('click', e => {
          e.preventDefault();
          openScanner(item);
        });
      }
    });

    const total = phones.reduce((sum, p) => sum + (Number(p.premium) || 0), 0);
    log('phones rendered:', state.phones.length, '| total premium:', total);
    $$('.text-total-price').forEach(el => { el.textContent = formatMoney(total) + ' ' + CURRENCY; });
  }

  function setText(el, value) {
    if (el) el.textContent = value == null ? '' : String(value);
  }

  // Per the spec: the 1st checkbox link opens personInfoUrl, the 2nd opens
  // policyWordingUrl. Only href/target are touched: the visible text
  // ("N° TR/001/25") stays static.
  function applyConsentLinks(p) {
    const urls = [p.personInfoUrl, p.policyWordingUrl];
    $$('.policy-popup__chb-wrap-2').forEach((wrap, i) => {
      const link = $('a.c-policy-popup__chb__label-link-2', wrap);
      if (!link) return;
      const url = urls[i];
      log('consent link #' + (i + 1), i === 0 ? '(personInfoUrl)' : '(policyWordingUrl)', url ? 'set' : 'EMPTY — not set');
      if (url) {
        link.setAttribute('href', url);
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener');
      }
    });
  }

  // ------------------------------------------------------------------
  // Floating labels (the page's own embed only binds the fields that exist
  // at DOMContentLoaded — the cloned IMEI inputs need it too, and programmatic
  // value changes (prefill / scanner) need a manual sync)
  // ------------------------------------------------------------------

  function syncFloat(input) {
    const label = input.closest('.form-input') && $('label', input.closest('.form-input'));
    if (!label) return;
    label.classList.toggle('float', input.value.trim() !== '');
  }

  function bindFloatingLabel(input) {
    const label = input.closest('.form-input') && $('label', input.closest('.form-input'));
    if (!label) return;
    input.addEventListener('focus', () => label.classList.add('float'));
    input.addEventListener('blur', () => syncFloat(input));
    syncFloat(input);
  }

  // ------------------------------------------------------------------
  // Field errors
  // ------------------------------------------------------------------

  function hideAllFieldErrors() {
    $$('.feedback-error').forEach(el => { el.style.display = 'none'; });
  }

  function setFieldError(input, errorEl) {
    const wrap = input && input.closest('.form-input');
    if (wrap) wrap.classList.add('is-error');
    if (errorEl) errorEl.style.display = 'block';
  }

  function clearFieldError(input, errorEl) {
    const wrap = input && input.closest('.form-input');
    if (wrap) wrap.classList.remove('is-error');
    if (errorEl) errorEl.style.display = 'none';
  }

  // ------------------------------------------------------------------
  // Top-level fields: error clearing, birth-date mask, auto GetPersonalInfo
  // ------------------------------------------------------------------

  const PERSON_FIELDS = [
    { key: 'firstName', input: '#inp-name', error: '#error-name' },
    { key: 'lastName', input: '#inp-last-name', error: '#error-last-name' },
    { key: 'personalNumber', input: '#inp-personal-id-number', error: '#error-personal-id-number' },
    { key: 'mobile', input: '#inp-mobile-number', error: '#error-mobile-number' },
    { key: 'birthDate', input: '#inp-date-birth', error: '#error-date-birth' },
  ];

  function initTopFields() {
    PERSON_FIELDS.forEach(f => {
      const input = $(f.input);
      if (!input) return;
      input.addEventListener('input', () => {
        clearFieldError(input, $(f.error));
        clearMismatchMarks(); // red borders from the registry / server answer go away together with the banner
        hideBanner();
      });
      // GetPersonalInfo is NOT called when name / surname / personal number are edited
      // (client: only after the birth date is entered; the final check is done by CreatePolicy).
    });

    const birth = $('#inp-date-birth');
    if (birth) {
      initDatePicker(birth);
      birth.setAttribute('inputmode', 'numeric');
      birth.setAttribute('maxlength', '10');
      birth.setAttribute('autocomplete', 'bday');
      birth.addEventListener('input', () => {
        const d = birth.value.replace(/\D/g, '').slice(0, 8);
        let out = d;
        if (d.length > 4) out = d.slice(0, 2) + '.' + d.slice(2, 4) + '.' + d.slice(4);
        else if (d.length > 2) out = d.slice(0, 2) + '.' + d.slice(2);
        birth.value = out;
        scheduleVerify(); // the ONLY trigger of GetPersonalInfo: birth date entered/changed
      });
    }

    const pn = $('#inp-personal-id-number');
    if (pn) {
      pn.setAttribute('inputmode', 'numeric');
      pn.addEventListener('input', () => { pn.value = pn.value.replace(/\D/g, '').slice(0, 11); });
    }
    const mob = $('#inp-mobile-number');
    if (mob) {
      mob.setAttribute('inputmode', 'tel');
      mob.addEventListener('input', () => { mob.value = mob.value.replace(/[^\d+]/g, ''); });
    }
  }

  const val = sel => (($(sel) || {}).value || '').trim();

  // Birth date: the spec says the client picks it with the calendar.
  // A native <input type="date"> is laid over the (read-only) text field as a
  // transparent, fully clickable layer, so the user's own tap opens the system
  // date picker. This is what makes it work on iPhone: iOS Safari ignores
  // programmatic showPicker()/focus() on hidden inputs, but always opens the
  // wheel when the real input is tapped. The chosen date is written back to the
  // text field as DD.MM.YYYY. If type="date" is not supported at all, the
  // masked manual input stays as a fallback.
  function initDatePicker(textInput) {
    const wrap = textInput.closest('.form-input') || textInput.parentElement;
    const picker = document.createElement('input');
    picker.type = 'date';
    if (picker.type !== 'date') { log('birth date: type=date not supported -> manual input with mask'); return; } // fallback
    picker.tabIndex = -1;
    picker.setAttribute('aria-label', textInput.getAttribute('placeholder') || 'Birth date');
    picker.className = 'date-picker-native';
    const pad = n => String(n).padStart(2, '0');
    const now = new Date();
    picker.min = '1900-01-01';
    picker.max = now.getFullYear() + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate());
    if (window.getComputedStyle(wrap).position === 'static') wrap.style.position = 'relative';
    wrap.appendChild(picker);

    textInput.readOnly = true;           // no keyboard, the calendar is the only way
    textInput.removeAttribute('inputmode');
    log('birth date: native calendar overlay enabled');

    const syncPickerValue = () => {
      const iso = displayToIso(textInput.value) || '';
      if (picker.value !== iso) picker.value = iso;
    };
    syncPickerValue();

    // Desktop browsers only open the popup from the calendar icon, so help them
    // out. Touch devices rely on the native tap on the overlay itself.
    const fine = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
    picker.addEventListener('click', () => {
      log('birth date: calendar tapped');
      if (fine && typeof picker.showPicker === 'function') { try { picker.showPicker(); } catch (err) { /* ignore */ } }
    });

    // Optional separate trigger (icon) outside the overlay
    const open = e => {
      if (e) e.preventDefault();
      syncPickerValue();
      if (typeof picker.showPicker === 'function') { try { picker.showPicker(); return; } catch (err) { /* fall through */ } }
      picker.focus();
      try { picker.click(); } catch (err) { /* ignore */ }
    };
    $$('[data-date-trigger], .icon-calendar', wrap).forEach(el => el.addEventListener('click', open));
    const outsideTrigger = $('[data-date-trigger]');
    if (outsideTrigger && !wrap.contains(outsideTrigger)) outsideTrigger.addEventListener('click', open);

    // How the chosen date is committed (written to the field + verified):
    //  - Android / desktop: the "change" event fires only when the user confirms
    //    the date, so it is committed right away.
    //  - iOS: the wheel fires "input"/"change" as soon as it opens and on every
    //    scroll step (an empty field even jumps to today's date). Committing on
    //    each of those showed a wrong date and the "does not match" banner while
    //    the user was still choosing. So on iOS the field is left alone until the
    //    wheel is closed (blur); only then the chosen date is written + verified.
    const isIOS = /iP(hone|ad|od)/.test(navigator.userAgent) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
    const todayIso = picker.max;

    // The field may be (re)filled later from GetPolicyInfo, so the wheel is
    // synced with the field's current value every time the user touches it.
    ['pointerdown', 'touchstart', 'focus'].forEach(ev => picker.addEventListener(ev, syncPickerValue, { passive: true }));

    const commit = () => {
      const iso = picker.value;
      // nothing chosen / "today" (iOS default when the wheel is opened untouched):
      // the field is left exactly as it is (prefilled value stays)
      if (!iso || iso === todayIso) { log('birth date: nothing chosen, field kept as is', textInput.value || '(empty)'); return; }
      const shown = isoToDisplay(iso);
      if (shown === textInput.value) return;     // same date as already in the field
      textInput.value = shown;
      syncFloat(textInput);
      log('birth date: picked', iso);
      textInput.dispatchEvent(new Event('input', { bubbles: true })); // clears the error + triggers GetPersonalInfo
    };

    // The calendar's "Clear" / "Reset" button sets the native value to '' and fires
    // "input"/"change" -> empty the visible field too (also on iOS: there an empty value
    // always comes from Reset, because opening the wheel on an empty field fills TODAY,
    // and on a filled field the wheel starts on the field's date).
    const clearField = () => {
      if (!textInput.value) return;
      textInput.value = '';
      syncFloat(textInput);
      log('birth date: cleared via the calendar');
      textInput.dispatchEvent(new Event('input', { bubbles: true })); // drops errors / banner, no verify (incomplete)
    };
    // iOS: nothing is written while the wheel is open/scrolling; a picked date is
    // committed only once the wheel is closed (Done / tap outside) -> blur.
    // Reset is applied right away (it is an explicit action, no preview involved).
    const onPick = () => {
      if (!picker.value) { clearField(); return; }
      if (!isIOS) commit();
    };
    picker.addEventListener('change', onPick);
    if (isIOS) {
      picker.addEventListener('input', () => { if (!picker.value) clearField(); });
      picker.addEventListener('blur', commit);
      picker.addEventListener('focusout', commit);
    }
  }

  function isoToDisplay(s) {
    const m = String(s || '').match(/^(\d{4})-(\d{2})-(\d{2})/);
    return m ? m[3] + '.' + m[2] + '.' + m[1] : '';
  }

  // "DD.MM.YYYY" -> "YYYY-MM-DD", or null if it is not a real past date
  function displayToIso(s) {
    const m = String(s || '').trim().match(/^(\d{2})[./-](\d{2})[./-](\d{4})$/);
    if (!m) return null;
    const d = +m[1], mo = +m[2], y = +m[3];
    const dt = new Date(Date.UTC(y, mo - 1, d));
    if (dt.getUTCFullYear() !== y || dt.getUTCMonth() !== mo - 1 || dt.getUTCDate() !== d) return null;
    if (y < 1900 || dt.getTime() > Date.now()) return null;
    const p2 = n => String(n).padStart(2, '0');
    return y + '-' + p2(mo) + '-' + p2(d);
  }

  function normalizeMobile(s) {
    let d = String(s || '').replace(/\D/g, '');
    if (d.length === 12 && d.indexOf('995') === 0) d = d.slice(3);
    return d;
  }

  function personValues() {
    return {
      personalNumber: val('#inp-personal-id-number'),
      firstName: val('#inp-name'),
      lastName: val('#inp-last-name'),
      birthDate: displayToIso(val('#inp-date-birth')) || '',
    };
  }

  const personKey = v => JSON.stringify([v.personalNumber, v.firstName, v.lastName, v.birthDate]);
  // auto-verify waits until the personal number is a full 11 digits (no API calls for half-typed numbers)
  const personComplete = v => !!(/^\d{11}$/.test(v.personalNumber) && v.firstName && v.lastName && v.birthDate);

  let verifyTimer = null;
  function scheduleVerify() {
    clearTimeout(verifyTimer);
    verifyTimer = setTimeout(() => {
      if (!state.policy || state.verifying || state.submitting) return;
      const v = personValues();
      if (!personComplete(v)) { log('auto-verify skipped: personal block not complete yet', v); return; }
      const key = personKey(v);
      if (key === state.verifiedKey) { log('auto-verify skipped: these values are already verified'); return; }
      if (key === state.failedKey) { log('auto-verify skipped: these values already failed'); return; }
      log('auto-verify: birth date + personal data complete -> GetPersonalInfo');
      verifyPerson();
    }, 350);
  }

  // GetPersonalInfo answers 400 with a plain Georgian text that says WHAT is wrong, e.g.
  //   "არასწორი სახელი"                              (wrong first name)
  //   "არასწორია გვარი"                               (wrong surname)
  //   "არასწორია დაბადების თარიღი"                    (wrong birth date)
  //   "არასწორია პირადი ნომერი ან დაბადების თარიღი."  (wrong personal number or birth date)
  //   "ოპერაცია წარუმატებლად დასრულდა"                (generic failure)
  // Several can be glued together ("არასწორი სახელი არასწორია გვარი"). The banner then
  // shows the matching text and the matching field(s) get the red border.
  function describeMismatch(serverText) {
    const raw = String(serverText || '').trim();
    const f = {
      firstName: /სახელ/.test(raw),
      lastName: /გვარ/.test(raw),
      personalNumber: /პირად/.test(raw),
      birthDate: /დაბადების/.test(raw),
    };
    const fields = Object.keys(f).filter(k => f[k]);
    const generic = !fields.length || (f.personalNumber && f.birthDate && fields.length === 2);
    return {
      message: generic ? TXT.mismatch : raw.replace(/[.\s]+$/, ''),
      fields: fields,
    };
  }

  let markedWraps = [];
  function clearMismatchMarks() {
    markedWraps.forEach(w => w.classList.remove('is-error'));
    markedWraps = [];
  }
  function showMismatch(info) {
    clearMismatchMarks();
    const byKey = {};
    PERSON_FIELDS.forEach(pf => { byKey[pf.key] = pf.input; });
    info.fields.forEach(k => {
      const input = $(byKey[k]);
      const wrap = input && input.closest('.form-input');
      if (wrap) { wrap.classList.add('is-error'); markedWraps.push(wrap); }
    });
    showBanner(info.message);
  }

  // GetPersonalInfo — resolves true/false. Never rejects.
  function verifyPerson() {
    const v = personValues();
    const key = personKey(v);
    state.verifying = true;
    clearMismatchMarks();
    setPopupLoading(true);

    state.verifyPromise = (async () => {
      try {
        const res = await postJson(URL_PERSONAL_INFO, v);
        log('GetPersonalInfo:', res.status, res.data || res.text);
        const d = res.data;
        const ok = res.ok && d && typeof d === 'object' && d.isSuccess !== false &&
          !!(d.personalNumber || d.firstName || d.lastName);
        log('GetPersonalInfo result:', ok ? 'MATCH' : 'MISMATCH');
        if (ok) {
          state.verifiedKey = key;
          state.failedKey = null;
          hideBanner();
          return true;
        }
        state.failedKey = key;
        const serverText = (typeof d === 'string' ? d : (d && (d.message || d.description || d.error))) || res.text || '';
        state.failedInfo = describeMismatch(serverText);
        log('mismatch:', serverText, '->', state.failedInfo);
        showMismatch(state.failedInfo);
        return false;
      } catch (e) {
        console.warn('[phone-page] GetPersonalInfo error:', e);
        showBanner(TXT.genericError); // network error: not remembered, can be retried
        return false;
      } finally {
        state.verifying = false;
        setPopupLoading(false);
      }
    })();

    return state.verifyPromise;
  }

  // ------------------------------------------------------------------
  // Consent checkboxes
  // ------------------------------------------------------------------

  function consentBlocks() {
    return $$('.policy-popup__chb-wrap-2').map((wrap, i) => ({
      input: $('input[type="checkbox"]', wrap),
      text: $('div.c-policy-popup__chb__label-2', wrap),
      span: $('span.c-policy-popup__chb__label-2', wrap),
      index: i,
    }));
  }

  function initConsentCheckboxes() {
    consentBlocks().forEach(b => {
      if (!b.input) return;
      // both checkboxes ship with id="checkbox" — make them unique
      const id = 'checkbox-consent-' + (b.index + 1);
      b.input.id = id;
      b.input.name = id;
      if (b.span) b.span.setAttribute('for', id);
      b.input.addEventListener('change', () => {
        log('consent checkbox #' + (b.index + 1), b.input.checked ? 'checked' : 'unchecked');
        if (b.input.checked && b.text) b.text.classList.remove('is-error');
      });
    });
  }

  // ------------------------------------------------------------------
  // Submit ("გაგზავნა")
  // ------------------------------------------------------------------

  function setSubmitBusy(busy) {
    const btn = $('a.c-policy__cta');
    if (!btn) return;
    btn.classList.toggle('is-disable-btn', busy);
    btn.style.pointerEvents = busy ? 'none' : '';
    btn.setAttribute('aria-disabled', busy ? 'true' : 'false');
  }

  // Shows every error at once (like the design) and returns true when valid.
  function validateForm() {
    let firstBad = null;
    const mark = (input, err) => {
      setFieldError(input, err);
      if (!firstBad) firstBad = input;
    };

    PERSON_FIELDS.forEach(f => {
      const input = $(f.input);
      const err = $(f.error);
      if (!input) return;
      const value = input.value.trim();
      let bad = !value;
      if (!bad && f.key === 'birthDate' && !displayToIso(value)) bad = true;
      if (bad) mark(input, err); else clearFieldError(input, err);
    });

    state.phones.forEach(p => {
      if (!p.input) return;
      if (!p.input.value.trim()) mark(p.input, p.error); else clearFieldError(p.input, p.error);
    });

    let consentOk = true;
    consentBlocks().forEach(b => {
      if (!b.input) return;
      if (!b.input.checked) {
        consentOk = false;
        if (b.text) b.text.classList.add('is-error');
        if (!firstBad) firstBad = b.input.closest('.policy-popup__chb-wrap-2');
      } else if (b.text) {
        b.text.classList.remove('is-error');
      }
    });

    const badIds = [];
    PERSON_FIELDS.forEach(f => { const i = $(f.input); if (i && i.closest('.form-input') && i.closest('.form-input').classList.contains('is-error')) badIds.push(f.input); });
    state.phones.forEach((ph, i) => { if (ph.input && ph.input.closest('.form-input') && ph.input.closest('.form-input').classList.contains('is-error')) badIds.push('IMEI #' + (i + 1)); });
    log('validation:', (firstBad || !consentOk) ? 'FAILED' : 'ok', { invalidFields: badIds, consentsOk: consentOk });
    if (firstBad && firstBad.scrollIntoView) {
      firstBad.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    return !firstBad && consentOk;
  }

  function initSubmit() {
    const btn = $('a.c-policy__cta');
    if (!btn) return;
    btn.addEventListener('click', async e => {
      e.preventDefault();
      log('submit clicked');
      if (state.submitting || !state.policy) { log('submit ignored:', state.submitting ? 'already in progress' : 'policy not loaded'); return; }
      if (!validateForm()) return;

      state.submitting = true;
      setSubmitBusy(true);
      try {
        // No GetPersonalInfo here: CreatePolicy validates name / surname / personal
        // number / birth date on the server and answers with an error if they are wrong.
        if (state.verifying) await state.verifyPromise; // don't overlap with a running check
        clearMismatchMarks();
        hideBanner();
        await createPolicy();
      } finally {
        state.submitting = false;
        setSubmitBusy(false);
      }
    });
  }

  // CreatePolicy failed: if the server text names the wrong field(s) (name, surname,
  // personal number, birth date) mark them red + show the matching banner,
  // otherwise show the generic error.
  function showCreateError(res) {
    const d = res && res.data;
    let txt = '';
    if (typeof d === 'string') txt = d;
    else if (d && typeof d === 'object') {
      txt = d.message || d.description || d.error || d.detail || d.title || '';
      if (typeof txt !== 'string') txt = '';
      if (!txt && d.errors) { try { txt = JSON.stringify(d.errors); } catch (e) { txt = ''; } }
    }
    if (!txt) txt = (res && res.text) || '';
    const info = describeMismatch(txt);
    log('CreatePolicy error text:', txt, '->', info);
    if (info.fields.length) showMismatch(info);
    else showBanner(TXT.genericError);
  }

  async function createPolicy() {
    const p = state.policy;
    const v = personValues();
    // name / surname / personal number: what is in the form (the client may have
    // corrected them; CreatePolicy validates them on the server).
    // mobile: locked, so it is the GetPolicyInfo value (form value only if the policy had none).
    const mobileRaw = (LOCKED_FIELDS.indexOf('#inp-mobile-number') !== -1 && p.mobile && String(p.mobile).trim())
      ? String(p.mobile).trim() : val('#inp-mobile-number');
    const body = {
      personalNumber: v.personalNumber,
      firstName: v.firstName,
      lastName: v.lastName,
      mobile: normalizeMobile(mobileRaw),
      zoomerOrderId: p.zoomerOrderId,
      proposalId: p.proposalId,
      groupId: p.groupId || state.groupId,
      birthDate: v.birthDate,
      phoneDetails: state.phones.map(ph => ({
        id: ph.data.id,
        price: ph.data.price,
        phoneModel: ph.data.phoneModel,
        imeiCode: ph.input ? ph.input.value.trim() : '',
        premium: ph.data.premium,
      })),
    };

    setPopupLoading(true);
    try {
      const res = await postJson(URL_CREATE_POLICY, body);
      log('CreatePolicy:', res.status, res.data || res.text);
      // success = a non-empty array with one created policy per phone
      const created = res.ok && Array.isArray(res.data) && res.data.length > 0 &&
        res.data.every(x => x && (x.policyNumber || x.policyId));
      log('CreatePolicy result:', created ? 'CREATED ' + res.data.length + ' policies' : 'FAILED (unexpected response)');
      if (created) {
        showDataReceived();
      } else {
        showCreateError(res);
      }
    } catch (e) {
      console.warn('[phone-page] CreatePolicy error:', e);
      showBanner(TXT.genericError);
    } finally {
      setPopupLoading(false);
    }
  }

  // ------------------------------------------------------------------
  // Red banner on top (design: "მითითებული პირადი ნომერი ... არ ემთხვევა" + ×)
  // ------------------------------------------------------------------

  // The banner is built in the Designer: .wrap-error-personal-number-date
  // (text div + a.close-btn-red-error). It is visible by default there, so the
  // script hides it on start and only shows it on an error. If it is ever
  // removed from the page, a fallback .c-error-banner is created instead.
  const BANNER_SEL = '.wrap-error-personal-number-date, .c-error-banner';

  function ensureBanner() {
    let b = $(BANNER_SEL);
    if (!b) {
      b = document.createElement('div');
      b.className = 'c-error-banner';
      b.setAttribute('role', 'alert');
      b.innerHTML = '<div class="c-error-banner__text"></div><a href="#" class="c-error-banner__close" aria-label="close">×</a>';
      const hostEl = $('.c-info-container') || document.body;
      hostEl.insertBefore(b, hostEl.firstChild);
    }
    const t = $('.c-error-banner__text', b) || b.firstElementChild || b;
    if (b.__defaultText === undefined) b.__defaultText = (t.textContent || '').trim();
    return b;
  }

  function showBanner(text) {
    log('banner SHOW:', text);
    const b = ensureBanner();
    const t = $('.c-error-banner__text', b) || b.firstElementChild || b;
    // the mismatch message is the static text from the Designer — keep it
    // (and restore it after a generic error overwrote it)
    t.textContent = (text === TXT.mismatch && b.__defaultText) ? b.__defaultText : text;
    b.style.display = 'flex';
    if (b.scrollIntoView) b.scrollIntoView({ behavior: 'smooth', block: 'start' });
    const close = $('.close-btn-red-error, .c-error-banner__close', b);
    if (close && !close.__bound) {
      close.__bound = true;
      close.addEventListener('click', e => { e.preventDefault(); hideBanner(); });
    }
  }

  function hideBanner() {
    const b = $(BANNER_SEL);
    if (b && b.style.display !== 'none') log('banner HIDE');
    if (b) b.style.display = 'none';
  }

  // ------------------------------------------------------------------
  // IMEI camera scanner (the design has no scanner screen — minimal
  // full-screen overlay built here). Native BarcodeDetector when available
  // (Chrome / Android), otherwise ZXing loaded on demand (iOS Safari etc.).
  // ------------------------------------------------------------------

  const scanner = { ui: null, open: false, stream: null, raf: 0, reader: null, item: null };

  function luhn(s) {
    let sum = 0;
    for (let i = 0; i < s.length; i++) {
      let d = +s[s.length - 1 - i];
      if (i % 2 === 1) { d *= 2; if (d > 9) d -= 9; }
      sum += d;
    }
    return sum % 10 === 0;
  }

  // A barcode on a phone box may carry more than the IMEI — accept a bare 15-digit value, or
  // a STANDALONE 15-digit number inside a longer text ("IMEI: 490154203237518 / SN123"), but
  // never a 15-digit piece of a longer digit string: the 32-digit EID on an iPhone box
  // (89049032004008882600019283078798) starts with 890490320040088, which passes the Luhn
  // check by chance and used to be taken for an IMEI.
  function extractImei(raw) {
    const t = String(raw || '').trim();
    if (/^\d{15}$/.test(t)) return t;
    const re = /(^|\D)(\d{15})(?=\D|$)/g;       // no look-behind: old iOS Safari cannot parse it
    let m;
    while ((m = re.exec(t))) { if (luhn(m[2])) return m[2]; re.lastIndex = m.index + m[1].length + 15; }
    return '';
  }

  function ensureScannerUi() {
    if (scanner.ui) return scanner.ui;
    const root = document.createElement('div');
    root.className = 'imei-scanner';
    root.innerHTML =
      '<video class="imei-scanner__video" playsinline muted autoplay></video>' +
      '<div class="imei-scanner__frame"></div>' +
      '<p class="imei-scanner__hint"></p>' +
      '<div class="imei-scanner__busy"><span class="imei-scanner__spinner"></span><span class="imei-scanner__busy-text"></span></div>' +
      '<input type="file" accept="image/*" capture="environment" class="imei-scanner__file" style="display:none">' +
      '<div class="imei-scanner__buttons">' +
        '<a href="#" class="imei-scanner__photo"></a>' +
        '<a href="#" class="imei-scanner__close"></a>' +
      '</div>';
    document.body.appendChild(root);
    const ui = {
      root: root,
      video: $('.imei-scanner__video', root),
      hint: $('.imei-scanner__hint', root),
      close: $('.imei-scanner__close', root),
      photo: $('.imei-scanner__photo', root),
      frame: $('.imei-scanner__frame', root),
      file: $('.imei-scanner__file', root),
      busyText: $('.imei-scanner__busy-text', root),
    };
    ui.close.textContent = TXT.close;
    ui.photo.textContent = TXT.photo;
    ui.busyText.textContent = TXT.photoBusy;
    // "Read by photo": the phone's own camera app shoots at full resolution with its own autofocus,
    // far sharper than a video frame — the way to read dense / small / blurry-in-the-viewfinder barcodes.
    ui.photo.addEventListener('click', e => { e.preventDefault(); startPhoto(); });
    ui.file.addEventListener('change', () => {
      const f = ui.file.files && ui.file.files[0];
      if (f) { scanner.photoPending = false; scanPhoto(f); }
    });
    ui.file.addEventListener('cancel', () => { if (scanner.photoPending) resumeLive(); });   // (browsers that fire it)
    ui.close.addEventListener('click', e => { e.preventDefault(); closeScanner(); });
    document.addEventListener('keydown', e => { if (e.key === 'Escape' && scanner.open) closeScanner(); });
    scanner.ui = ui;
    return ui;
  }

  function applyImei(item, imei) {
    log('scanner: IMEI applied', imei, '->', item && item.input ? item.input.id : '(no input)');
    if (!item || !item.input) return;
    item.input.value = imei;
    syncFloat(item.input);
    clearFieldError(item.input, item.error);
    item.input.dispatchEvent(new Event('input', { bubbles: true }));
  }

  function stopScanning() {
    scanner.sid = (scanner.sid || 0) + 1;                  // every loop of the finished session sees this and stops
    clearTimeout(scanner.fallbackTimer);
    if (scanner.raf) { cancelAnimationFrame(scanner.raf); scanner.raf = 0; }
    clearTimeout(scanner.timer); clearInterval(scanner.focusTimer); clearTimeout(scanner.hintTimer); clearTimeout(scanner.lensTimer); clearInterval(scanner.sharpTimer);
    if (scanner.reader) { try { scanner.reader.reset(); } catch (e) { /* ignore */ } scanner.reader = null; }
    if (scanner.stream) { scanner.stream.getTracks().forEach(t => t.stop()); scanner.stream = null; }
    if (scanner.ui) scanner.ui.video.srcObject = null;
  }

  function closeScanner() {
    log('scanner: closed');
    scanner.open = false;
    scanner.pool = null;
    clearTimeout(scanner.fallbackTimer);
    clearTimeout(scanner.closeTimer);
    scanner.photoPending = false; scanner.busy = false; scanner.photoTok = (scanner.photoTok || 0) + 1;   // a photo still being decoded is dropped
    if (scanner.ui) { scanner.ui.root.classList.remove('is-busy'); scanner.ui.video.style.visibility = ''; }
    if (scanner.ui && scanner.ui.frame) scanner.ui.frame.classList.remove('is-ok', 'is-seen');
    stopScanning();
    if (scanner.ui) scanner.ui.root.style.display = 'none';
    document.body.style.overflow = '';
  }

  const scriptPromises = {};
  function loadScript(src) {
    if (scriptPromises[src]) return scriptPromises[src];
    scriptPromises[src] = new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = src;
      s.onload = () => resolve();
      s.onerror = () => { delete scriptPromises[src]; reject(new Error('script load failed')); };
      document.head.appendChild(s);
    });
    return scriptPromises[src];
  }

  const BARCODE_FORMATS = ['code_128', 'code_39', 'ean_13', 'itf', 'data_matrix', 'qr_code'];

  // amber flash: something was seen but it is not what we need (serial number, EAN ... or an IMEI
  // that is outside the aiming frame)
  function flashSeen() {
    const ui = scanner.ui;
    if (!ui || !ui.frame) return;
    ui.frame.classList.add('is-seen');
    clearTimeout(scanner.seenTimer);
    scanner.seenTimer = setTimeout(() => ui.frame.classList.remove('is-seen'), 350);
  }

  // success: write the IMEI, green frame + the number for a moment, then the scanner closes
  function acceptImei(imei) {
    applyImei(scanner.item, imei);
    scanner.open = false;                       // stops the scan loops
    scanner.pool = null;
    clearTimeout(scanner.timer); clearTimeout(scanner.fallbackTimer); clearInterval(scanner.focusTimer); clearTimeout(scanner.hintTimer); clearTimeout(scanner.lensTimer); clearInterval(scanner.sharpTimer);
    const ui = scanner.ui;
    if (ui) {
      if (ui.frame) { ui.frame.classList.remove('is-seen'); ui.frame.classList.add('is-ok'); }
      ui.hint.textContent = '✓ ' + imei;
      try { if (navigator.vibrate) navigator.vibrate(60); } catch (e) { /* not supported */ }
    }
    clearTimeout(scanner.closeTimer);
    scanner.closeTimer = setTimeout(closeScanner, 700);
    return true;
  }

  // A barcode text without a position (kept for a single-shot source such as a photo):
  // accept it if it contains an IMEI.
  function scanAccept(text) {
    if (!scanner.open) return false;           // scanner was closed meanwhile
    const imei = extractImei(text);
    log('scanner: barcode read', JSON.stringify(text), imei ? '-> IMEI ' + imei : '-> not an IMEI, keep scanning');
    if (!imei) { flashSeen(); return false; }
    return acceptImei(imei);
  }

  // ---- ONE IMEI per scan -------------------------------------------------------------
  // A box often carries two IMEI barcodes (IMEI1 / IMEI2, both valid). Which of them is read
  // must not depend on which one the decoder happens to return first, so:
  //   1) only a barcode that lies INSIDE the white aiming frame counts;
  //   2) if several are inside, the one closest to the centre of the frame wins;
  //   3) the choice is made after a short settle time (SETTLE_MS) — all hits of that time are
  //      compared, so a decoder that sees the far one first and the near one a moment later
  //      still ends up with the near one.
  // Candidates are {text, x, y} with the barcode centre in VIDEO pixels (x/y null = unknown).
  const SETTLE_MS = 300;

  // The aiming frame in video pixels ({x,y,w,h}); the <video> is object-fit: cover.
  function frameInVideo(vw, vh) {
    const ui = scanner.ui;
    const frame = ui && ui.frame;
    const vr = ui && ui.video.getBoundingClientRect();
    if (!frame || !vr.width || !vr.height || !vw || !vh) return null;
    const fr = frame.getBoundingClientRect();
    const sc = Math.max(vr.width / vw, vr.height / vh);              // CSS px per video px
    const ox = (vr.width - vw * sc) / 2, oy = (vr.height - vh * sc) / 2;
    return { x: (fr.left - vr.left - ox) / sc, y: (fr.top - vr.top - oy) / sc, w: fr.width / sc, h: fr.height / sc };
  }

  function offerCandidates(cands, vw, vh) {
    if (!scanner.open || !cands || !cands.length) return;
    const fr = frameInVideo(vw, vh);
    let seenOther = false;
    for (const c of cands) {
      const imei = extractImei(c.text);
      if (!imei) { log('scanner: barcode read', JSON.stringify(c.text), '-> not an IMEI, keep scanning'); seenOther = true; continue; }
      let dist = 1;                                   // unknown position: allowed, but ranks last
      if (fr && c.x != null && c.y != null) {
        const dx = (c.x - (fr.x + fr.w / 2)) / (fr.w / 2), dy = (c.y - (fr.y + fr.h / 2)) / (fr.h / 2);
        if (Math.abs(dx) > 1.1 || Math.abs(dy) > 1.25) {   // centre outside the frame (with some slack)
          log('scanner: IMEI', imei, 'is outside the aiming frame -> ignored');
          seenOther = true; continue;
        }
        dist = Math.hypot(dx, dy);
      }
      const pool = scanner.pool || (scanner.pool = { t0: Date.now(), byImei: {} });
      const e = pool.byImei[imei] || (pool.byImei[imei] = { dist: Infinity, hits: 0 });
      e.dist = Math.min(e.dist, dist); e.hits++;
      log('scanner: barcode read', JSON.stringify(c.text), '-> IMEI ' + imei, '(distance from the frame centre ' + dist.toFixed(2) + ')');
    }
    if (seenOther && !scanner.pool) flashSeen();
  }

  // Called on every loop turn: once the settle time is over, the candidate closest to the
  // centre is accepted. Returns true when the scanner has just finished.
  function settleCandidates() {
    const pool = scanner.pool;
    if (!scanner.open || !pool || Date.now() - pool.t0 < SETTLE_MS) return false;
    const list = Object.keys(pool.byImei).map(k => ({ imei: k, dist: pool.byImei[k].dist, hits: pool.byImei[k].hits }));
    list.sort((p, q) => p.dist - q.dist || q.hits - p.hits);
    log('scanner: settled; candidates', JSON.stringify(list), '-> taking', list[0].imei);
    return acceptImei(list[0].imei);
  }

  // --- zxing-wasm: whole image at once, returns ALL barcodes in it; reads dense / tiny codes
  // (the IMEI on an iPhone box label) that the JS port cannot. Resolves to
  // async (source, sx, sy, sw, sh, scale, fresh) => [{text, x, y}], or null if it cannot be loaded.
  let wasmReaderPromise = null;
  function getWasmReader() {
    if (wasmReaderPromise) return wasmReaderPromise;
    wasmReaderPromise = (async () => {
      try {
        await loadScript(ZXING_WASM_JS);
        const W = window.ZXingWASM;
        if (!W || !W.readBarcodes) throw new Error('zxing-wasm not available');
        W.prepareZXingModule({ overrides: { locateFile: (name) => ZXING_WASM_DIR + name }, fireImmediately: true });
        const opts = {
          formats: ['Code128', 'Code39', 'EAN13', 'ITF', 'DataMatrix', 'QRCode'],
          tryHarder: true, tryRotate: true, tryDownscale: true, maxNumberOfSymbols: 10,
        };
        // warm-up on a tiny image: makes sure the .wasm really loads
        const probe = document.createElement('canvas'); probe.width = probe.height = 8;
        await W.readBarcodes(probe.getContext('2d').getImageData(0, 0, 8, 8), opts);
        log('scanner: zxing-wasm ready');
        const shared = document.createElement('canvas');
        let failures = 0;
        return async (src, sx, sy, sw, sh, scale, fresh) => {
          const cv = fresh ? document.createElement('canvas') : shared;
          const cx = cv.getContext('2d', { willReadFrequently: true });
          cv.width = Math.max(1, Math.round(sw * scale)); cv.height = Math.max(1, Math.round(sh * scale));
          cx.imageSmoothingQuality = 'high';
          cx.drawImage(src, sx, sy, sw, sh, 0, 0, cv.width, cv.height);
          try {
            const res = await W.readBarcodes(cx.getImageData(0, 0, cv.width, cv.height), opts);
            return res.map(r => {
              const q = r.position;
              const pts = q ? [q.topLeft, q.topRight, q.bottomRight, q.bottomLeft].filter(Boolean) : [];
              if (!pts.length) return { text: r.text, x: null, y: null };
              // centre of the barcode, back in the pixels of the source (video / image)
              return { text: r.text, x: sx + pts.reduce((a, p) => a + p.x, 0) / pts.length / scale, y: sy + pts.reduce((a, p) => a + p.y, 0) / pts.length / scale };
            });
          } catch (e) { if (++failures === 1) console.warn('[phone-page] zxing-wasm read error:', e); return []; }
        };
      } catch (e) {
        console.warn('[phone-page] zxing-wasm unavailable:', e);
        wasmReaderPromise = null;
        return null;
      }
    })();
    return wasmReaderPromise;
  }

  // --- ZXing-js: returns only ONE barcode per image and a phone box usually has several
  // (serial number, IMEI1, IMEI2, EAN ...), so the image is cut into overlapping horizontal
  // bands, each decoded on its own. Resolves to async (source, w, h, scale, fresh) => [{text, x, y}].
  let jsReaderPromise = null;
  function getJsReader() {
    if (jsReaderPromise) return jsReaderPromise;
    jsReaderPromise = (async () => {
      try {
        await loadScript(ZXING_URL);
        const Z = window.ZXing;
        const hints = new Map();
        hints.set(Z.DecodeHintType.POSSIBLE_FORMATS, [
          Z.BarcodeFormat.CODE_128, Z.BarcodeFormat.CODE_39, Z.BarcodeFormat.EAN_13,
          Z.BarcodeFormat.ITF, Z.BarcodeFormat.DATA_MATRIX, Z.BarcodeFormat.QR_CODE,
        ]);
        hints.set(Z.DecodeHintType.TRY_HARDER, true);
        const decoder = new Z.MultiFormatReader();
        decoder.setHints(hints);
        const shared = document.createElement('canvas');
        const BAND = 0.24, STRIDE = 0.12;       // band height / step, share of the image height
        log('scanner: ZXing-js ready');
        return async (src, w, h, k, fresh) => {
          const canvas = fresh ? document.createElement('canvas') : shared;
          const ctx = canvas.getContext('2d', { willReadFrequently: true });
          const bandH = Math.round(h * BAND);
          const regions = [];
          for (let y = 0; y + bandH <= h + 1; y += Math.round(h * STRIDE)) regions.push([y, Math.min(bandH, h - y)]);
          regions.push([0, h]);                 // whole image as the last try (single clean barcode)
          const found = [];
          for (const r of regions) {
            canvas.width = Math.round(w * k); canvas.height = Math.max(1, Math.round(r[1] * k));
            ctx.drawImage(src, 0, r[0], w, r[1], 0, 0, canvas.width, canvas.height);
            try {
              const bitmap = new Z.BinaryBitmap(new Z.HybridBinarizer(new Z.HTMLCanvasElementLuminanceSource(canvas)));
              const res = decoder.decode(bitmap);
              const pts = (res.getResultPoints && res.getResultPoints()) || [];
              const n = pts.length;
              found.push({
                text: res.getText(),
                x: n ? pts.reduce((a, p) => a + p.getX(), 0) / n / k : null,
                y: n ? r[0] + pts.reduce((a, p) => a + p.getY(), 0) / n / k : null,
              });
            } catch (e) { /* NotFoundException = nothing in this band */ }
          }
          return found;
        };
      } catch (e) {
        console.warn('[phone-page] ZXing-js unavailable:', e);
        jsReaderPromise = null;
        return null;
      }
    })();
    return jsReaderPromise;
  }

  // ---- "Read by photo" ------------------------------------------------------------
  // The live camera is released first (on Android the camera app cannot open while the page holds
  // the camera), the system camera is opened through <input type=file capture>, and the photo is
  // decoded here. If the user cancels, or no IMEI is found, the live scanner is started again.
  function startPhoto() {
    const ui = scanner.ui;
    if (!ui || !scanner.open || scanner.busy) return;
    log('scanner: photo button -> system camera');
    scanner.photoPending = true;
    stopScanning();                                    // releases the camera, stops every live loop
    ui.video.style.visibility = 'hidden';
    ui.file.value = '';
    ui.file.click();
    // Browsers without the "cancel" event: when the page is shown again and still no photo has
    // arrived, go back to the live scanner.
    const back = () => setTimeout(() => {
      if (scanner.photoPending && scanner.open && !scanner.busy && !(ui.file.files && ui.file.files.length)) resumeLive();
    }, 2500);
    window.addEventListener('focus', back, { once: true });
    document.addEventListener('visibilitychange', function onVis() {
      if (document.visibilityState === 'visible') { document.removeEventListener('visibilitychange', onVis); back(); }
    });
  }

  async function resumeLive(failText) {
    const ui = scanner.ui;
    if (!ui || !scanner.open) return;
    scanner.photoPending = false;
    scanner.busy = false;
    ui.root.classList.remove('is-busy');
    ui.video.style.visibility = '';
    log('scanner: back to the live camera');
    const item = scanner.item;
    await openScanner(item);
    if (failText && scanner.open && scanner.item === item) ui.hint.textContent = failText;
  }

  // The IMEI in a photo: all barcodes of the whole picture first (zxing-wasm returns every barcode with
  // its position), then overlapping bands, then ZXing-js. With several IMEIs (IMEI1 / IMEI2) the one
  // nearest the centre of the picture wins — that is where the person aimed.
  async function readPhoto(bmp, w, h) {
    const k = w > 3200 ? 3200 / w : (w < 1600 ? 2 : 1);   // huge photos are scaled down, small ones enlarged
    const [wasm, js] = await Promise.all([getWasmReader(), getJsReader()]);
    if (!wasm && !js) return null;
    const found = {};
    const add = (list) => {
      for (const c of list) {
        const imei = extractImei(c.text);
        log('scanner: photo barcode', JSON.stringify(c.text), imei ? '-> IMEI ' + imei : '-> not an IMEI');
        if (!imei) continue;
        const d = (c.x != null && c.y != null) ? Math.hypot((c.x - w / 2) / (w / 2), (c.y - h / 2) / (h / 2)) : 2;
        if (found[imei] === undefined || d < found[imei]) found[imei] = d;
      }
    };
    const best = () => { const ks = Object.keys(found).sort((a, b) => found[a] - found[b]); return ks.length ? ks[0] : ''; };
    if (wasm) {
      add(await wasm(bmp, 0, 0, w, h, k, true));
      if (best()) return best();
      const bandH = Math.round(h * 0.25), step = Math.round(h * 0.125);
      for (let y = 0; y + bandH <= h + 1; y += step) {
        add(await wasm(bmp, 0, y, w, Math.min(bandH, h - y), k, true));
        if (best()) return best();
        if (!scanner.open) return '';
      }
    }
    if (js) add(await js(bmp, w, h, k, true));
    return best();
  }

  async function scanPhoto(file) {
    const ui = scanner.ui;
    if (!ui || !scanner.open) return;
    const item = scanner.item;
    const tok = scanner.photoTok = (scanner.photoTok || 0) + 1;
    const alive = () => scanner.open && scanner.photoTok === tok;
    scanner.busy = true;
    ui.root.classList.add('is-busy');
    log('scanner: photo chosen', file.name, Math.round(file.size / 1024) + ' KB');
    let imei = '';
    try {
      let bmp;
      try { bmp = await createImageBitmap(file, { imageOrientation: 'from-image' }); }
      catch (e) {
        bmp = await new Promise((res, rej) => {
          const im = new Image(); im.onload = () => res(im); im.onerror = rej; im.src = URL.createObjectURL(file);
        });
      }
      const w = bmp.width || bmp.naturalWidth, h = bmp.height || bmp.naturalHeight;
      log('scanner: photo size', w + 'x' + h);
      const r = await readPhoto(bmp, w, h);
      if (!alive()) return;
      if (r === null) { scanner.busy = false; ui.root.classList.remove('is-busy'); ui.hint.textContent = TXT.noCamera; return; }
      imei = r;
    } catch (e) {
      console.warn('[phone-page] photo scan error:', e);
    }
    if (!alive()) return;
    if (imei) {
      scanner.busy = false;
      ui.root.classList.remove('is-busy');
      ui.video.style.visibility = '';
      acceptImei(imei);
      return;
    }
    log('scanner: no IMEI found in the photo');
    await resumeLive(TXT.photoFail);
  }

  async function openScanner(item) {
    const ui = ensureScannerUi();
    log('scanner: open for', item && item.input ? item.input.id : '?');
    scanner.item = item;
    scanner.open = true;
    scanner.pool = null;
    scanner.zx = false;
    clearTimeout(scanner.closeTimer);
    ui.root.classList.remove('is-busy');
    if (ui.frame) ui.frame.classList.remove('is-ok', 'is-seen');
    ui.hint.textContent = TXT.scanHint;
    ui.root.style.display = 'flex';
    document.body.style.overflow = 'hidden';

    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      console.warn('[phone-page] scanner: getUserMedia is not available (needs HTTPS)');
      ui.hint.textContent = TXT.noCamera;
      return;
    }

    let stream;
    try {
      stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: { ideal: 'environment' }, width: { ideal: 3840 }, height: { ideal: 2160 } },   // small/dense barcodes need as many pixels as possible (the browser gives the best it has, up to 4K)
        audio: false,
      });
    } catch (e) {
      console.warn('[phone-page] camera error:', e);
      if (scanner.open) ui.hint.textContent = TXT.noCamera;
      return;
    }
    if (!scanner.open) { stream.getTracks().forEach(t => t.stop()); return; } // closed while the permission prompt was up
    const sid = scanner.sid = (scanner.sid || 0) + 1;            // one id per scanner session (a late async answer must not touch a newer one)
    clearInterval(scanner.focusTimer); clearTimeout(scanner.hintTimer); clearTimeout(scanner.lensTimer);

    // Attaches a camera stream to the <video> and sets its focus up. Returns the focus capabilities.
    const attachStream = (st) => {
      scanner.stream = st;
      ui.video.srcObject = st;
      clearInterval(scanner.focusTimer);
      ui.video.onclick = null;
      let caps = {};
      try { // sharper close-ups on phones that support it (ignored elsewhere)
        const track = st.getVideoTracks()[0];
        caps = (track && track.getCapabilities && track.getCapabilities()) || {};
        const se = (track && track.getSettings && track.getSettings()) || {};
        scanner.lensKey = se.deviceId || '';
        log('scanner: camera', track && track.label, se.width + 'x' + se.height, 'focusMode:', JSON.stringify(caps.focusMode || null), 'zoom:', JSON.stringify(caps.zoom || null));
        const has = m => !!(caps.focusMode && caps.focusMode.indexOf(m) !== -1);
        if (has('continuous')) track.applyConstraints({ advanced: [{ focusMode: 'continuous' }] }).catch(() => {});
        // Some phones (Samsung S10+/S25 reports) leave a close-up blurry although the stock camera app is sharp:
        // while nothing has been read yet, nudge the autofocus every few seconds (one-shot focus, then back
        // to continuous); a tap on the picture does the same.
        if (has('single-shot')) {
          const refocus = () => {
            if (!scanner.open || scanner.stream !== st) return;
            track.applyConstraints({ advanced: [{ focusMode: 'single-shot' }] }).then(() => {
              setTimeout(() => { if (scanner.open && scanner.stream === st && has('continuous')) track.applyConstraints({ advanced: [{ focusMode: 'continuous' }] }).catch(() => {}); }, 900);
            }).catch(() => {});
          };
          ui.video.onclick = refocus;
          scanner.focusTimer = setInterval(refocus, 3500);
        }
      } catch (e) { /* not supported */ }
      return caps;
    };
    attachStream(stream);
    log('scanner: camera granted', stream.getVideoTracks()[0] && stream.getVideoTracks()[0].label);
    // Still nothing after a few seconds: very often the phone is simply held too close to focus.
    scanner.hintTimer = setTimeout(() => { if (scanner.open) ui.hint.textContent = TXT.scanFar; }, 5000);
    try { await ui.video.play(); } catch (e) { /* autoplay is fine, play() can reject on some browsers */ }

    // LENS CHOICE. Phones with several rear cameras (Samsung): the browser may hand out a lens that
    // cannot focus close up although another lens is sharp. While nothing has been read, walk through
    // the rear cameras (the default one first, then the others) — about 5 s each, the first switch after
    // 6 s — and measure how SHARP the picture under the aiming frame gets on each. At the end the
    // sharpest lens is kept (the default one when nothing clearly beats it). Stops as soon as
    // something is read.
    let cams = null, camIdx = 0, switches = 0;
    const scores = {};                                            // best sharpness seen per camera (deviceId)
    const sharpCv = document.createElement('canvas');
    // sharpness of the picture in the middle of the aiming frame, at the camera's own pixels:
    // variance of the Laplacian / variance of the brightness (so contrast alone does not count)
    const sharpness = () => {
      try {
        const vw = ui.video.videoWidth, vh = ui.video.videoHeight;
        if (!vw || !vh || ui.video.readyState < 2) return 0;
        const f = frameInVideo(vw, vh);
        if (!f) return 0;
        const W = Math.max(16, Math.round(Math.min(400, f.w))), H = Math.max(16, Math.round(Math.min(100, f.h)));
        sharpCv.width = W; sharpCv.height = H;
        const cx = sharpCv.getContext('2d', { willReadFrequently: true });
        cx.drawImage(ui.video, f.x + (f.w - W) / 2, f.y + (f.h - H) / 2, W, H, 0, 0, W, H);
        const d = cx.getImageData(0, 0, W, H).data, g = new Float32Array(W * H);
        let sum = 0, sum2 = 0;
        for (let i = 0; i < g.length; i++) { const v = (d[i * 4] + d[i * 4 + 1] + d[i * 4 + 2]) / 3; g[i] = v; sum += v; sum2 += v * v; }
        const mean = sum / g.length, vari = sum2 / g.length - mean * mean;
        let ls = 0, ls2 = 0, n = 0;
        for (let y = 1; y < H - 1; y++) for (let x = 1; x < W - 1; x++) {
          const i = y * W + x, l = 4 * g[i] - g[i - 1] - g[i + 1] - g[i - W] - g[i + W];
          ls += l; ls2 += l * l; n++;
        }
        const lv = ls2 / n - (ls / n) * (ls / n);
        return lv / (vari + 1);
      } catch (e) { return 0; }
    };
    clearInterval(scanner.sharpTimer);
    scanner.sharpTimer = setInterval(() => {
      if (!scanner.open || scanner.sid !== sid || scanner.pool) return;
      const key = scanner.lensKey || '';
      const v = sharpness();
      if (v > (scores[key] || 0)) scores[key] = v;
    }, 350);
    const listRearCameras = async () => {
      try {
        const all = (await navigator.mediaDevices.enumerateDevices()).filter(d => d.kind === 'videoinput');
        log('scanner: cameras:', all.map(d => d.label || '?').join(' | '));
        const tr = scanner.stream && scanner.stream.getVideoTracks()[0];
        const curId = tr && tr.getSettings && tr.getSettings().deviceId;
        const back = all.filter(d => d.deviceId && /back|rear|environment/i.test(d.label || ''));
        back.sort((a, b) => (a.label || '').localeCompare(b.label || '', undefined, { numeric: true }));
        const cur = back.filter(d => d.deviceId === curId);
        return cur.concat(back.filter(d => d.deviceId !== curId));
      } catch (e) { return []; }
    };
    const looksBlack = () => {
      try {
        const c = document.createElement('canvas'); c.width = c.height = 16;
        const x = c.getContext('2d'); x.drawImage(ui.video, 0, 0, 16, 16);
        const d = x.getImageData(0, 0, 16, 16).data; let m = 0;
        for (let i = 0; i < d.length; i += 4) m += d[i] + d[i + 1] + d[i + 2];
        return m / (d.length / 4 * 3) < 6;
      } catch (e) { return false; }
    };
    // Opens one rear camera. Resolves to 'ok' | 'fixed' (no autofocus) | 'bad' (no picture / failed) | 'closed'.
    const openLens = async (cam, dwell) => {
      try { if (scanner.stream) scanner.stream.getTracks().forEach(t => t.stop()); } catch (e) { /* ignore */ }   // some phones cannot open two rear cameras at once
      try {
        const ns = await navigator.mediaDevices.getUserMedia({
          video: { deviceId: { exact: cam.deviceId }, width: { ideal: 3840 }, height: { ideal: 2160 } }, audio: false });
        if (!scanner.open || scanner.sid !== sid) { ns.getTracks().forEach(t => t.stop()); return 'closed'; }
        log('scanner: lens ->', cam.label);
        const caps = attachStream(ns);
        try { await ui.video.play(); } catch (e) { /* ignore */ }
        await new Promise(r => setTimeout(r, 1800));
        if (!scanner.open || scanner.sid !== sid) return 'closed';
        // Watchdog: a lens that gives no picture (black / no frames) is dropped
        if (scanner.stream === ns && (ui.video.readyState < 2 || !ui.video.videoWidth || looksBlack())) {
          log('scanner: lens', cam.label, 'gives no picture');
          scores[cam.deviceId] = -1;
          return 'bad';
        }
        const fixed = !!(caps.focusMode && caps.focusMode.indexOf('continuous') === -1 && caps.focusMode.indexOf('single-shot') === -1);
        if (dwell && !fixed) await new Promise(r => setTimeout(r, dwell));       // time to focus and to be measured (a lens without autofocus is not given it)
        if (!scanner.open || scanner.sid !== sid) return 'closed';
        return fixed ? 'fixed' : 'ok';
      } catch (e) {
        log('scanner: lens switch failed', e && e.name);
        scores[cam.deviceId] = -1;
        return (scanner.open && scanner.sid === sid) ? 'bad' : 'closed';
      }
    };
    const switchLens = async () => {
      if (!scanner.open || scanner.sid !== sid) return;
      if (scanner.pool) { scanner.lensTimer = setTimeout(switchLens, 4000); return; }   // something is in the frame: not now
      if (!cams) cams = await listRearCameras();
      if (!scanner.open || scanner.sid !== sid) return;
      if (cams.length < 2) return;
      if (switches < cams.length - 1) {                       // visit every other rear camera once
        switches++; camIdx = switches;
        const r = await openLens(cams[camIdx], 3200);
        if (r === 'closed') return;
        scanner.lensTimer = setTimeout(switchLens, 50);
        return;
      }
      // the round is over: keep the sharpest lens (the default one unless another is clearly sharper)
      let best = 0;
      cams.forEach((c, i) => { if (i && (scores[c.deviceId] || 0) > ((scores[cams[best].deviceId] || 0) * 1.15 + 1e-6)) best = i; });
      log('scanner: lens sharpness', JSON.stringify(cams.map(c => c.label + '=' + (Math.round((scores[c.deviceId] || 0) * 100) / 100))), '-> keeping', cams[best].label);
      if (best !== camIdx || scores[cams[camIdx].deviceId] === -1) {
        camIdx = best;
        const r = await openLens(cams[best], 0);
        if (r === 'bad') { await restoreDefault(); }
      }
    };
    const restoreDefault = async () => {
      try { if (scanner.stream) scanner.stream.getTracks().forEach(t => t.stop()); } catch (e) { /* ignore */ }
      try {
        const ns = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 3840 }, height: { ideal: 2160 } }, audio: false });
        if (!scanner.open || scanner.sid !== sid) { ns.getTracks().forEach(t => t.stop()); return; }
        attachStream(ns); try { await ui.video.play(); } catch (e2) { /* ignore */ }
      } catch (e2) { if (scanner.open) ui.hint.textContent = TXT.noCamera; }
    };
    scanner.lensTimer = setTimeout(switchLens, 6000);

    // zxing-wasm + ZXing-js (see getWasmReader / getJsReader). Each frame goes to wasm first,
    // then to the JS bands. If one of them cannot be loaded, the other one works alone.
    // Used alone in browsers without BarcodeDetector (iOS Safari, Firefox), and as a SECOND
    // decoder next to the native one when that finds nothing for a while (dense labels such as
    // the Samsung S23 box that the native detector does not read).
    const startZxing = async () => {
      if (scanner.zx || !scanner.open || scanner.sid !== sid) return;
      scanner.zx = true;
      try {
      log('scanner: loading zxing-wasm + ZXing-js');
      const pWasm = getWasmReader(), pJs = getJsReader();
      const wasm = await pWasm;
      if (!scanner.open) return;
      let js = null;
      pJs.then(fn => { js = fn; });
      if (!wasm) js = await pJs;                              // wasm failed: wait for the JS decoder
      if (!scanner.open) return;
      if (!wasm && !js) { ui.hint.textContent = TXT.noCamera; return; }
      const MAXW = 1920;
      // The part of the video that lies under the white aiming frame (plus a margin), in video
      // pixels. It is decoded at the camera's NATIVE resolution — the whole frame is scaled
      // down, which loses exactly the thin lines of a dense barcode.
      const guideRegion = (vw, vh) => {
        const f = frameInVideo(vw, vh);
        if (!f) return null;
        const padX = f.w * 0.08, padY = f.h * 0.6;
        const x0 = Math.max(0, f.x - padX), x1 = Math.min(vw, f.x + f.w + padX);
        const y0 = Math.max(0, f.y - padY), y1 = Math.min(vh, f.y + f.h + padY);
        return (x1 - x0 > 50 && y1 - y0 > 20) ? { x: x0, y: y0, w: x1 - x0, h: y1 - y0 } : null;
      };
      // The decoders run on the page's main thread. On a weak phone one round can take seconds and would
      // freeze the whole page (timers, the Close button ...). So: (a) the next round starts only after a
      // pause proportional to the last one, (b) a phone that needs > 1.2 s per round only decodes the
      // aiming-frame crop (the part that matters) and skips the whole-frame passes.
      let light = false, rounds = 0;
      const loop = async () => {
        if (!scanner.open || scanner.sid !== sid) return;
        const t0 = performance.now();
        const vw = ui.video.videoWidth, vh = ui.video.videoHeight;
        if (!scanner.paused && vw && vh && ui.video.readyState >= 2) {
          const k = Math.min(1, MAXW / vw);
          if (wasm) {
            if (!light) {
              offerCandidates(await wasm(ui.video, 0, 0, vw, vh, k, false), vw, vh);
              if (settleCandidates() || !scanner.open) return;
            }
            const g = guideRegion(vw, vh);       // the aiming frame at the camera's own resolution
            if (g) {
              // small crops are ENLARGED (dense / far-away barcodes decode much better that way)
              const gk0 = g.w < 1700 ? Math.min(3, 2000 / g.w) : Math.min(1, 2600 / g.w);
              const gk = light ? Math.min(gk0, 2) : gk0;
              offerCandidates(await wasm(ui.video, g.x, g.y, g.w, g.h, gk, false), vw, vh);
              if (settleCandidates() || !scanner.open) return;
            }
          }
          if (js && !light && !scanner.paused) {
            offerCandidates(await js(ui.video, vw, vh, k, false), vw, vh);
            if (settleCandidates() || !scanner.open) return;
          }
        }
        if (settleCandidates()) return;
        const dur = performance.now() - t0;
        rounds++;
        if (!light && rounds > 1 && dur > 1200) { light = true; log('scanner: slow phone (' + Math.round(dur) + ' ms per round) -> decoding only the aiming frame'); }
        scanner.timer = setTimeout(loop, scanner.paused ? 200 : (dur > 600 ? Math.min(2500, Math.round(dur * 2)) : dur > 300 ? Math.round(dur * 1.2) : 80));
      };
      loop();
      } catch (e) {
        console.warn('[phone-page] scanner error:', e);
        if (scanner.open) ui.hint.textContent = TXT.noCamera;
      }
    };

    // 1) native BarcodeDetector
    if ('BarcodeDetector' in window) {
      try {
        const supported = await window.BarcodeDetector.getSupportedFormats();
        const formats = BARCODE_FORMATS.filter(f => supported.indexOf(f) !== -1);
        log('scanner: native BarcodeDetector, formats:', formats.join(','));
        if (formats.length) {
          const detector = new window.BarcodeDetector({ formats: formats });
          let busy = false;
          const tick = async () => {
            if (!scanner.open || scanner.sid !== sid) return;
            if (!busy && !scanner.paused && ui.video.readyState >= 2) {
              busy = true;
              try {
                const codes = await detector.detect(ui.video);
                offerCandidates(codes.map(c => {
                  const b = c.boundingBox, pts = c.cornerPoints;
                  if (b && b.width) return { text: c.rawValue, x: b.x + b.width / 2, y: b.y + b.height / 2 };
                  if (pts && pts.length) return { text: c.rawValue, x: pts.reduce((a, p) => a + p.x, 0) / pts.length, y: pts.reduce((a, p) => a + p.y, 0) / pts.length };
                  return { text: c.rawValue, x: null, y: null };
                }), ui.video.videoWidth, ui.video.videoHeight);
                if (settleCandidates()) return;
              } catch (e) { /* frame not ready, keep going */ }
              busy = false;
            }
            scanner.raf = requestAnimationFrame(tick);
          };
          scanner.raf = requestAnimationFrame(tick);
          // the native detector alone cannot read some labels: if nothing usable has been seen
          // for a while, the zxing decoders join in (both feed the same candidate pool)
          clearTimeout(scanner.fallbackTimer);
          scanner.fallbackTimer = setTimeout(() => {
            if (scanner.open && scanner.sid === sid && !scanner.pool) { log('scanner: native detector saw no IMEI for 1.5 s -> adding zxing-wasm as a second decoder'); startZxing(); }
          }, 1500);
          return;
        }
      } catch (e) {
        console.warn('[phone-page] BarcodeDetector failed, falling back to ZXing:', e);
      }
    }
    log('scanner: no usable native BarcodeDetector');

    await startZxing();
  }

  // ------------------------------------------------------------------
  // Small fallback CSS for states this script adds. Everything here can be
  // restyled/overridden in Webflow — it only makes the page work out of the box.
  // ------------------------------------------------------------------

  function injectStyles() {
    if ($('#phone-page-js-styles')) return;
    const st = document.createElement('style');
    st.id = 'phone-page-js-styles';
    st.textContent =
      '.date-picker-native{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;z-index:3;border:0;font-size:16px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;}' +
      '#loader,.s-loading,.s-policy-issued,.s-data-received,.s-no-offer-found{top:0;right:0;bottom:0;left:0;min-height:100vh;min-height:100lvh;box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}' +
      'html.phone-screen-active body *{visibility:hidden !important;}' +
      SCREEN_SELECTORS.map(sel => 'html.phone-screen-active ' + sel + ',html.phone-screen-active ' + sel + ' *').join(',') + '{visibility:visible !important;}' +
      '.form-input.is-error input{border-color:#da1a1c !important;}' +
      '.c-policy-popup__chb__label-2.is-error{color:#da1a1c;}' +
      '.c-policy__cta.is-disable-btn{opacity:.6;pointer-events:none;}' +
      '.c-error-banner{display:none;align-items:center;justify-content:space-between;gap:12px;background:#da1a1c;color:#fff;border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:14px;line-height:1.4;}' +
      '.c-error-banner__close{color:#fff;text-decoration:none;font-size:22px;line-height:1;padding:0 4px;}' +
      '.imei-scanner{display:none;position:fixed;inset:0;z-index:10000;background:#000;flex-direction:column;align-items:center;justify-content:center;}' +
      '.imei-scanner__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}' +
      '.imei-scanner__frame{position:relative;width:78%;max-width:340px;height:100px;border:2px solid #fff;border-radius:16px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);}' +
      // The scan line is animated with transform only (runs on the GPU compositor), so it
      // stays smooth even while the main thread is busy decoding frames. (Animating "top"
      // made it jump.) The ::after is as tall as the frame; its bottom border is the line.
      '.imei-scanner__frame{overflow:hidden;}' +
      '.imei-scanner__frame::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;box-sizing:border-box;border-bottom:2px solid #7b6cf6;background:linear-gradient(to bottom,rgba(123,108,246,0) 0%,rgba(123,108,246,.22) 100%);will-change:transform;transform:translate3d(0,-100%,0);animation:imei-scan 1.8s ease-in-out infinite alternate;}' +
      '@keyframes imei-scan{from{transform:translate3d(0,-100%,0);}to{transform:translate3d(0,0,0);}}' +
      '.imei-scanner__frame{transition:border-color .15s,box-shadow .15s;}' +
      '.imei-scanner__frame.is-seen{border-color:#f5a623;}' +
      '.imei-scanner__frame.is-ok{border-color:#2fbf71;box-shadow:0 0 0 9999px rgba(0,0,0,.45),0 0 18px 4px rgba(47,191,113,.8);}' +
      '.imei-scanner__frame.is-ok::after{display:none;}' +
      '.imei-scanner__hint{position:relative;color:#fff;text-align:center;font-size:14px;margin:20px 24px 0;}' +
      '.imei-scanner__buttons{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;gap:12px;justify-content:center;z-index:3;}' +
      '.imei-scanner__photo,.imei-scanner__close{flex:1 1 0;max-width:190px;box-sizing:border-box;text-align:center;text-decoration:none;border-radius:12px;padding:14px 10px;font-size:14px;line-height:1.2;}' +
      '.imei-scanner__photo{background:#7063e9;color:#fff;}' +
      '.imei-scanner__close{background:#fff;color:#141719;}' +
      '.imei-scanner__busy{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78%;max-width:340px;box-sizing:border-box;background:#fff;color:#141719;border-radius:16px;padding:22px 16px;text-align:center;font-size:14px;z-index:2;}' +
      '.imei-scanner.is-busy .imei-scanner__busy{display:block;}' +
      '.imei-scanner.is-busy .imei-scanner__frame,.imei-scanner.is-busy .imei-scanner__hint{display:none;}' +
      '.imei-scanner.is-busy .imei-scanner__photo{opacity:.5;pointer-events:none;}' +
      '.imei-scanner__spinner{display:block;width:26px;height:26px;margin:0 auto 12px;border:3px solid #e3e3ee;border-top-color:#7063e9;border-radius:50%;animation:imei-spin .8s linear infinite;}' +
      '@keyframes imei-spin{to{transform:rotate(360deg);}}';
    document.head.appendChild(st);
  }

  // ------------------------------------------------------------------
  // Start — kept at the very end on purpose: everything above is declared
  // (const/let are not hoisted), so these calls can safely use all of it.
  // ------------------------------------------------------------------

  injectStyles();
  hideAllFieldErrors();
  ensureBanner();          // remember its Designer text
  hideBanner();
  extendIntoSafeArea();
  watchChromeColor();
  setLoading(true);        // show the preloader before anything else
  initTopFields();
  initConsentCheckboxes();
  initSubmit();
  loadPolicy();

});