(function() {
  var clockAnimationInitialized = false;

  function waitForGSAP(callback, maxAttempts, attempt) {
    maxAttempts = maxAttempts || 50;
    attempt = attempt || 0;
    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
      try {
        gsap.registerPlugin(ScrollTrigger);
      } catch (e) {}
      setTimeout(callback, 300);
    } else if (attempt < maxAttempts) {
      setTimeout(function() {
        waitForGSAP(callback, maxAttempts, attempt + 1);
      }, 100);
    } else {
      console.error('GSAP не загружен после', maxAttempts * 100, 'мс.');
    }
  }

  function initClockAnimation() {
    if (clockAnimationInitialized) return;

    var clockSection = document.querySelector('[data-clock-section]');
    if (!clockSection) return;

    var ageNumberElement = clockSection.querySelector('[data-age-number]');
    var ageNumber = ageNumberElement ? (ageNumberElement.querySelector('.age_txt') || ageNumberElement.querySelector('.base_p') || ageNumberElement.querySelector('div') || ageNumberElement) : null;

    var clockDotsSmall = Array.from(clockSection.querySelectorAll('[data-clock-dot="small"]'));
    var clockDotsLarge = Array.from(clockSection.querySelectorAll('[data-clock-dot="large"]'));
    var allDots = Array.from(clockSection.querySelectorAll('[data-clock-dot]'));

    var clockDots = [];
    var dotPattern = [];

    if (clockDotsSmall.length > 0 && clockDotsLarge.length > 0) {
      var smallPerLarge = Math.ceil(clockDotsSmall.length / clockDotsLarge.length);
      var smallIndex = 0;
      var largeIndex = 0;
      while (smallIndex < clockDotsSmall.length || largeIndex < clockDotsLarge.length) {
        if (largeIndex < clockDotsLarge.length) {
          clockDots.push(clockDotsLarge[largeIndex]);
          dotPattern.push('large');
          largeIndex++;
        }
        for (var i = 0; i < smallPerLarge && smallIndex < clockDotsSmall.length; i++) {
          clockDots.push(clockDotsSmall[smallIndex]);
          dotPattern.push('small');
          smallIndex++;
        }
      }
    } else {
      clockDots = allDots;
      dotPattern = allDots.map(function() { return 'default'; });
    }

    var hand1 = clockSection.querySelector('[data-hand="1"]');
    var hand2 = clockSection.querySelector('[data-hand="2"]');
    var clockCircle = clockSection.querySelector('.clock-circle');
    var clockContainer = clockSection.querySelector('.clock-container');
    var clockCenter = clockSection.querySelector('.clock-center');
    var contentWrapper = clockSection.querySelector('.wrapper_general') || clockSection.querySelector('.clock') || clockSection.children[0];
    var middleHeading = clockSection.querySelector('.middle_heading');

    if (!ageNumber || !hand1 || !hand2 || !clockCircle) return;

    var startAge = parseInt(clockSection.getAttribute('data-start-age'), 10) || 68;
    var targetAge = parseInt(clockSection.getAttribute('data-target-age'), 10) || 45;
    var ageRange = targetAge - startAge;

    ageNumber.textContent = startAge;

    var containerRect = clockContainer ? clockContainer.getBoundingClientRect() : clockCircle.getBoundingClientRect();
    var containerWidth = containerRect.width || 400;
    var containerHeight = containerRect.height || 400;
    var centerX = containerWidth / 2;
    var centerY = containerHeight / 2;

    hand1.style.position = 'absolute';
    hand1.style.top = centerY + 'px';
    hand1.style.left = centerX + 'px';
    hand1.style.transformOrigin = '50% 100%';
    hand1.style.transform = 'translate(-50%, -100%) rotate(0deg)';

    hand2.style.position = 'absolute';
    hand2.style.top = centerY + 'px';
    hand2.style.left = centerX + 'px';
    hand2.style.transformOrigin = '50% 100%';
    hand2.style.transform = 'translate(-50%, -100%) rotate(0deg)';

    var centerCircle = clockCircle.querySelector('.clock-center-circle');
    if (!centerCircle) {
      centerCircle = document.createElement('div');
      centerCircle.className = 'clock-center-circle';
      centerCircle.style.cssText = 'position:absolute;top:' + centerY + 'px;left:' + centerX + 'px;width:40px;height:40px;border-radius:50%;background:#1a1a1a;border:2px solid rgba(255,255,255,0.2);transform:translate(-50%,-50%);z-index:5';
      clockCircle.appendChild(centerCircle);
    }

    if (clockDots.length > 0) {
      var totalDots = clockDots.length;
      var radius = Math.min(containerWidth, containerHeight) * 0.45;
      clockDots.forEach(function(dot, index) {
        var angle = (index * 360 / totalDots) - 90;
        var radian = (angle * Math.PI) / 180;
        var x = centerX + radius * Math.cos(radian);
        var y = centerY + radius * Math.sin(radian);
        dot.style.left = x + 'px';
        dot.style.top = y + 'px';
        dot.style.transform = 'translate(-50%, -50%)';
        dot.setAttribute('data-dot-index', index);
      });
    }

    if (clockCenter) {
      clockCenter.style.cssText = 'position:absolute;top:' + (centerY + 40) + 'px;left:' + centerX + 'px;transform:translate(-50%,0);text-align:center;z-index:10';
    }

    var revealTarget = middleHeading || contentWrapper;
    if (revealTarget) {
      gsap.set(revealTarget, { opacity: 0, scale: 0.9 });
    }

    ScrollTrigger.getAll().forEach(function(st) {
      if (st.vars && st.vars.id && st.vars.id.indexOf('clock-') === 0) {
        st.kill();
      }
    });

    ScrollTrigger.create({
      trigger: clockSection,
      start: 'top top',
      end: '+=200%',
      pin: true,
      pinSpacing: true,
      anticipatePin: 1,
      id: 'clock-pin'
    });

    if (revealTarget) {
      gsap.to(revealTarget, {
        opacity: 1,
        scale: 1,
        duration: 0.9,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: clockSection,
          start: 'top 75%',
          once: true,
          id: 'clock-reveal-once'
        }
      });
    }

    ScrollTrigger.create({
      trigger: clockSection,
      start: 'top top',
      end: '+=200%',
      scrub: 1,
      id: 'clock-content',
      onUpdate: function(self) {
        var progress = self.progress;
        if (!contentWrapper) return;
        if (progress < 0.8) {
          gsap.set(contentWrapper, { opacity: 1, scale: 1 });
        } else {
          var fadeProgress = (progress - 0.8) / 0.2;
          gsap.set(contentWrapper, {
            opacity: 1 - fadeProgress,
            scale: 1 - (fadeProgress * 0.05)
          });
        }
      }
    });

    ScrollTrigger.create({
      trigger: clockSection,
      start: 'top top',
      end: '+=200%',
      scrub: 1,
      id: 'clock-age',
      onUpdate: function(self) {
        var progress = self.progress;
        var currentAge = Math.round(startAge + (ageRange * progress));
        ageNumber.textContent = currentAge;
      }
    });

    gsap.to(hand1, {
      rotation: 360,
      ease: 'none',
      scrollTrigger: {
        trigger: clockSection,
        start: 'top top',
        end: '+=200%',
        scrub: 1.5,
        id: 'clock-hand1'
      }
    });

    gsap.to(hand2, {
      rotation: 720,
      ease: 'none',
      scrollTrigger: {
        trigger: clockSection,
        start: 'top top',
        end: '+=200%',
        scrub: 1.5,
        id: 'clock-hand2'
      }
    });

    ScrollTrigger.create({
      trigger: clockSection,
      start: 'top top',
      end: '+=200%',
      id: 'clock-hands-active',
      onUpdate: function(self) {
        var progress = self.progress;
        if (progress > 0.05) hand1.classList.add('active');
        if (progress > 0.15) hand2.classList.add('active');
      }
    });

    clockDots.forEach(function(dot, index) {
      ScrollTrigger.create({
        trigger: clockSection,
        start: 'top top',
        end: '+=200%',
        id: 'clock-dot-' + index,
        onUpdate: function(self) {
          var progress = self.progress;
          var dotProgress = index / clockDots.length;
          if (progress >= dotProgress) {
            dot.classList.add('active');
          } else {
            dot.classList.remove('active');
          }
        }
      });
    });

    clockAnimationInitialized = true;
  }

  waitForGSAP(initClockAnimation);

  window.addEventListener('load', function() {
    setTimeout(function() {
      if (!clockAnimationInitialized) {
        waitForGSAP(initClockAnimation);
      }
    }, 500);
  });
})();