( function () {
	'use strict';

	document.addEventListener( 'DOMContentLoaded', function () {
		var decks = document.querySelectorAll( '.seovaultseo-card-deck' );
		for ( var i = 0; i < decks.length; i++ ) {
			initDeck( decks[ i ] );
		}
	} );

	function initDeck( deck ) {
		var cardEls = deck.querySelectorAll( '.seovaultseo-info-card[data-card-index]' );
		var cards   = [];
		for ( var i = 0; i < cardEls.length; i++ ) {
			cards.push( cardEls[ i ] );
		}

		if ( cards.length === 0 ) {
			return;
		}

		var total          = cards.length;
		var front          = 0;
		var autoTimer      = null;
		var autoDelay      = 8000;
		var isHovering     = false;
		var wheelLocked    = false;

		// ── Dots ───────────────────────────────────────────────
		var dotsWrap = deck.querySelector( '.seovaultseo-card-deck-dots' );
		if ( ! dotsWrap ) {
			dotsWrap = document.createElement( 'div' );
			dotsWrap.className = 'seovaultseo-card-deck-dots';
			deck.appendChild( dotsWrap );
		}
		dotsWrap.innerHTML = '';

		// Compact dots when >10 cards: show 7 position-group dots.
		var dotCount = total > 10 ? 7 : total;
		var dots     = [];

		for ( var d = 0; d < dotCount; d++ ) {
			var dot = document.createElement( 'span' );
			dot.className = 'seovaultseo-card-dot';
			( function ( idx ) {
				dot.addEventListener( 'click', function ( e ) {
					e.stopPropagation();
					if ( total > 10 ) {
						front = Math.floor( ( idx / dotCount ) * total );
					} else {
						front = idx;
					}
					update();
					restartAuto();
				} );
			} )( d );
			dotsWrap.appendChild( dot );
			dots.push( dot );
		}

		function updateDots() {
			var active;
			if ( total > 10 ) {
				active = Math.floor( ( front / total ) * dotCount );
			} else {
				active = front;
			}
			for ( var j = 0; j < dots.length; j++ ) {
				dots[ j ].classList.toggle( 'active', j === active );
			}
		}

		// ── Card position update ──────────────────────────────
		function update() {
			for ( var i = 0; i < cards.length; i++ ) {
				var rel = ( i - front + total ) % total;
				cards[ i ].setAttribute( 'data-card-index', String( rel ) );
			}
			updateDots();
		}

		function cycleForward() {
			front = ( front + 1 ) % total;
			update();
		}

		function cycleBackward() {
			front = ( front - 1 + total ) % total;
			update();
		}

		// ── Auto-rotate ───────────────────────────────────────
		function startAuto() {
			stopAuto();
			autoTimer = setInterval( function () {
				if ( ! isHovering ) {
					cycleForward();
				}
			}, autoDelay );
		}

		function stopAuto() {
			if ( autoTimer ) {
				clearInterval( autoTimer );
				autoTimer = null;
			}
		}

		function restartAuto() {
			stopAuto();
			startAuto();
		}

		// ── Click to cycle (ignore clicks on links/buttons) ──
		deck.addEventListener( 'click', function ( e ) {
			if ( e.target.closest( 'a' ) || e.target.closest( 'button' ) ) {
				return;
			}
			cycleForward();
			restartAuto();
		} );

		// ── Mouse wheel to cycle ──────────────────────────────
		deck.addEventListener( 'wheel', function ( e ) {
			e.preventDefault();
			if ( wheelLocked ) {
				return;
			}
			wheelLocked = true;
			setTimeout( function () { wheelLocked = false; }, 400 );
			if ( e.deltaY > 0 ) {
				cycleForward();
			} else if ( e.deltaY < 0 ) {
				cycleBackward();
			}
			restartAuto();
		}, { passive: false } );

		// ── Pause on hover ────────────────────────────────────
		deck.addEventListener( 'mouseenter', function () {
			isHovering = true;
		} );
		deck.addEventListener( 'mouseleave', function () {
			isHovering = false;
			restartAuto();
		} );

		// ── Init ──────────────────────────────────────────────
		update();
		startAuto();
	}
} )();
