/**
 * Heatmap Component Loader
 * ========================
 * Single entry point for all component scripts.
 * Add once to Webflow site settings — never touch again.
 *
 * Usage:
 *   1. Add data-component="script-name" to any Webflow element
 *   2. The loader fetches {script-name}.js from the same base URL
 *   3. Scripts run in order, after DOM is ready
 *
 * Example:
 *   <div class="overline" data-component="overline-rotator">
 *   → loads overline-rotator.js
 */
(function () {
  'use strict';

  // Derive base URL from this script's src
  // document.currentScript is null with defer, so fall back to querySelector
  var currentScript = document.currentScript
    || document.querySelector('script[src*="loader.js"]');
  if (!currentScript) return;

  var src = currentScript.src;
  var baseURL = src.substring(0, src.lastIndexOf('/') + 1);

  function loadScript(name) {
    var script = document.createElement('script');
    script.src = baseURL + name + '.js';
    script.async = false; // preserve execution order
    document.head.appendChild(script);
  }

  function init() {
    var components = document.querySelectorAll('[data-component]');
    var loaded = {};

    for (var i = 0; i < components.length; i++) {
      var name = components[i].getAttribute('data-component');
      if (name && !loaded[name]) {
        loaded[name] = true;
        loadScript(name);
      }
    }
  }

  // Wait for DOM so all data-component attributes are discoverable
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();