(function () {
  const gsapSrc = 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js';
  const descriptorSelector = '[data-rotating-descriptor]';

  const css = `
[data-rotating-descriptor] {
  display: inline-block;
  will-change: transform, opacity;
  min-height: 2.8em;
}
`;

  function injectCSS() {
    if (document.getElementById('rotating-descriptor-css')) return;

    const style = document.createElement('style');
    style.id = 'rotating-descriptor-css';
    style.textContent = css;

    const target = document.head || document.documentElement;
    target.appendChild(style);
  }

  function loadGSAP(callback) {
    if (window.gsap) {
      callback();
      return;
    }

    const existingScript = document.querySelector('script[src="' + gsapSrc + '"]');

    if (existingScript) {
      existingScript.addEventListener('load', callback, { once: true });
      return;
    }

    const script = document.createElement('script');
    script.src = gsapSrc;
    script.onload = callback;
    script.onerror = function () {
      console.warn('GSAP could not be loaded.');
    };

    document.head.appendChild(script);
  }

  function initRotatingDescriptor() {
    injectCSS();

    const elements = document.querySelectorAll(descriptorSelector);

    elements.forEach(function (element) {
      if (element.dataset.rotatingDescriptorInitialized === 'true') return;

      element.dataset.rotatingDescriptorInitialized = 'true';

      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      const textOne = element.innerHTML.trim();

      const textTwo = element.getAttribute('data-rotating-text-2') ||
        'All Roofs Are Flat — it depends on the angle you’re looking at them';

      const phrases = [textOne, textTwo];

      let currentIndex = 0;

      const holdTime = parseFloat(element.getAttribute('data-rotating-hold')) || 5;
      const outDuration = parseFloat(element.getAttribute('data-rotating-out-duration')) || 0.45;
      const inDuration = parseFloat(element.getAttribute('data-rotating-in-duration')) || 0.55;
      const yDistance = parseFloat(element.getAttribute('data-rotating-y')) || 10;

      if (prefersReducedMotion) {
        element.innerHTML = textOne;
        return;
      }

      gsap.set(element, {
        autoAlpha: 1,
        y: 0
      });

      function rotateText() {
        gsap.delayedCall(holdTime, function () {
          const nextIndex = currentIndex === 0 ? 1 : 0;

          const timeline = gsap.timeline({
            onComplete: function () {
              currentIndex = nextIndex;
              rotateText();
            }
          });

          timeline
            .to(element, {
              autoAlpha: 0,
              y: -yDistance,
              duration: outDuration,
              ease: 'power2.inOut'
            })
            .set(element, {
              innerHTML: phrases[nextIndex],
              y: yDistance
            })
            .to(element, {
              autoAlpha: 1,
              y: 0,
              duration: inDuration,
              ease: 'power2.out'
            });
        });
      }

      rotateText();
    });
  }

  function start() {
    loadGSAP(initRotatingDescriptor);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start);
  } else {
    start();
  }
})();