/* =====================================================================
   Belfry HubSpot Form — Country Dropdown Overlay
   =====================================================================
   The HubSpot `country` contact property is a standard single-line text
   field whose type cannot be changed. This script replaces the rendered
   <input> with a <select> dropdown on the page for cleaner data entry,
   while still submitting to the standard `country` property.

   Usage in Webflow Site Settings → Custom Code → Head (paired with the
   HubSpot embed script):

     <script src="https://24423936.fs1.hubspotusercontent-na1.net/hubfs/24423936/Belfry-Web-Forms/belfry-hubspot-country-dropdown.js"></script>

   The script runs automatically when any hbspt.forms instance fires the
   onFormReady event and patches the country field in place.

   Internal name targeted: input[name="country"]
   Field on the form is conditional — only revealed when State = "Other".
   ===================================================================== */

(function () {
  var COUNTRIES = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "Andorra",
    "Angola",
    "Antigua and Barbuda",
    "Argentina",
    "Armenia",
    "Australia",
    "Austria",
    "Azerbaijan",
    "Bahamas",
    "Bahrain",
    "Bangladesh",
    "Barbados",
    "Belarus",
    "Belgium",
    "Belize",
    "Benin",
    "Bhutan",
    "Bolivia",
    "Bosnia and Herzegovina",
    "Botswana",
    "Brazil",
    "Brunei",
    "Bulgaria",
    "Burkina Faso",
    "Burundi",
    "Cabo Verde",
    "Cambodia",
    "Cameroon",
    "Canada",
    "Central African Republic",
    "Chad",
    "Chile",
    "China",
    "Colombia",
    "Comoros",
    "Congo (Democratic Republic)",
    "Congo (Republic)",
    "Costa Rica",
    "C\u00f4te d'Ivoire",
    "Croatia",
    "Cuba",
    "Cyprus",
    "Czechia",
    "Denmark",
    "Djibouti",
    "Dominica",
    "Dominican Republic",
    "Ecuador",
    "Egypt",
    "El Salvador",
    "Equatorial Guinea",
    "Eritrea",
    "Estonia",
    "Eswatini",
    "Ethiopia",
    "Fiji",
    "Finland",
    "France",
    "Gabon",
    "Gambia",
    "Georgia",
    "Germany",
    "Ghana",
    "Greece",
    "Grenada",
    "Guatemala",
    "Guinea",
    "Guinea-Bissau",
    "Guyana",
    "Haiti",
    "Honduras",
    "Hungary",
    "Iceland",
    "India",
    "Indonesia",
    "Iran",
    "Iraq",
    "Ireland",
    "Israel",
    "Italy",
    "Jamaica",
    "Japan",
    "Jordan",
    "Kazakhstan",
    "Kenya",
    "Kiribati",
    "Korea (North)",
    "Korea (South)",
    "Kuwait",
    "Kyrgyzstan",
    "Laos",
    "Latvia",
    "Lebanon",
    "Lesotho",
    "Liberia",
    "Libya",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Madagascar",
    "Malawi",
    "Malaysia",
    "Maldives",
    "Mali",
    "Malta",
    "Marshall Islands",
    "Mauritania",
    "Mauritius",
    "Mexico",
    "Micronesia",
    "Moldova",
    "Monaco",
    "Mongolia",
    "Montenegro",
    "Morocco",
    "Mozambique",
    "Myanmar",
    "Namibia",
    "Nauru",
    "Nepal",
    "Netherlands",
    "New Zealand",
    "Nicaragua",
    "Niger",
    "Nigeria",
    "North Macedonia",
    "Norway",
    "Oman",
    "Pakistan",
    "Palau",
    "Palestine",
    "Panama",
    "Papua New Guinea",
    "Paraguay",
    "Peru",
    "Philippines",
    "Poland",
    "Portugal",
    "Qatar",
    "Romania",
    "Russia",
    "Rwanda",
    "Saint Kitts and Nevis",
    "Saint Lucia",
    "Saint Vincent and the Grenadines",
    "Samoa",
    "San Marino",
    "S\u00e3o Tom\u00e9 and Pr\u00edncipe",
    "Saudi Arabia",
    "Senegal",
    "Serbia",
    "Seychelles",
    "Sierra Leone",
    "Singapore",
    "Slovakia",
    "Slovenia",
    "Solomon Islands",
    "Somalia",
    "South Africa",
    "South Sudan",
    "Spain",
    "Sri Lanka",
    "Sudan",
    "Suriname",
    "Sweden",
    "Switzerland",
    "Syria",
    "Taiwan",
    "Tajikistan",
    "Tanzania",
    "Thailand",
    "Timor-Leste",
    "Togo",
    "Tonga",
    "Trinidad and Tobago",
    "Tunisia",
    "Turkey",
    "Turkmenistan",
    "Tuvalu",
    "Uganda",
    "Ukraine",
    "United Arab Emirates",
    "United Kingdom",
    "United States",
    "Uruguay",
    "Uzbekistan",
    "Vanuatu",
    "Vatican City",
    "Venezuela",
    "Vietnam",
    "Yemen",
    "Zambia",
    "Zimbabwe"
];

  function buildDropdown(input) {
    if (!input || input.dataset.belfryCountryDropdown === '1') return;
    input.dataset.belfryCountryDropdown = '1';

    var select = document.createElement('select');
    // Copy classes so existing CSS applies (hs-input + HubSpot styling)
    select.className = input.className || 'hs-input';
    select.setAttribute('aria-label', 'Country');

    var placeholder = document.createElement('option');
    placeholder.value = '';
    placeholder.textContent = 'Select Country...';
    placeholder.disabled = true;
    placeholder.selected = true;
    select.appendChild(placeholder);

    COUNTRIES.forEach(function (c) {
      var opt = document.createElement('option');
      opt.value = c;
      opt.textContent = c;
      select.appendChild(opt);
    });

    select.addEventListener('change', function () {
      input.value = select.value;
      // Fire input + change so HubSpot's internal validation/state picks up
      input.dispatchEvent(new Event('input', { bubbles: true }));
      input.dispatchEvent(new Event('change', { bubbles: true }));
    });

    // Hide the original input but keep it in the DOM so HubSpot serializes it
    input.style.display = 'none';
    input.setAttribute('tabindex', '-1');
    input.parentNode.insertBefore(select, input);
  }

  function patchAllForms() {
    document.querySelectorAll('input[name="country"]').forEach(buildDropdown);
  }

  // Hook into HubSpot's onFormReady event (fires for any hbspt embed on the page)
  window.addEventListener('message', function (event) {
    if (
      event.data &&
      event.data.type === 'hsFormCallback' &&
      (event.data.eventName === 'onFormReady' || event.data.eventName === 'onFormReady')
    ) {
      // Brief delay — HubSpot inserts the DOM right after onFormReady fires
      setTimeout(patchAllForms, 50);
    }
  });

  // Belt-and-suspenders: also run on DOM mutations in case the country
  // field is revealed conditionally (State = "Other") after initial render.
  var observer = new MutationObserver(function () {
    if (document.querySelector('input[name="country"]')) patchAllForms();
  });
  if (document.body) {
    observer.observe(document.body, { childList: true, subtree: true });
  } else {
    document.addEventListener('DOMContentLoaded', function () {
      observer.observe(document.body, { childList: true, subtree: true });
    });
  }

  // Also run on initial load if form is already present
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', patchAllForms);
  } else {
    patchAllForms();
  }
})();