lmdWeb/html/assets/js/main-01.js

// Initialize particles.js
if (typeof particlesJS !== 'undefined' && document.getElementById('particles-js')) {
	particlesJS('particles-js', particlesConfig);
}

// Load SVG icon sprites
(function loadIconSprite() {
	const script = document.createElement('script');
	script.src = 'assets/data/icons-sprite.js';
	script.async = false;
	document.head.appendChild(script);
})();

// Initialize all components when DOM loads
document.addEventListener('DOMContentLoaded', async function() {
	try {
		// Load services data for Typed.js
		if (typeof Typed !== 'undefined' && document.getElementById('typed-element')) {
			try {
				// Initialize Typed.js
				const typed = new Typed('#typed-element', {
					strings: servicesData.services,
					typeSpeed: servicesData.typewriterConfig.typeSpeed,
					backSpeed: servicesData.typewriterConfig.deleteSpeed,
					startDelay: 1500,
					backDelay: servicesData.typewriterConfig.deleteDelay,
					loop: servicesData.typewriterConfig.loop,
					showCursor: servicesData.typewriterConfig.showCursor,
					cursorChar: servicesData.typewriterConfig.cursorChar,
					autoInsertCss: true,
				});

				window.serviceTyped = typed;
			} catch (error) {
				// Fallback with default strings
				const typed = new Typed('#typed-element', {
					strings: ['Web Development', 'Digital Marketing', 'SEO Optimization'],
					typeSpeed: 50,
					backSpeed: 30,
					backDelay: 1500,
					loop: true,
					showCursor: true,
					cursorChar: '|'
				});
				window.serviceTyped = typed;
			}
		}

		// Initialize Portfolio
		initPortfolioIsotope();

		// Refresh AOS
		setTimeout(() => {
			if (typeof AOS !== 'undefined') {
				AOS.refresh();
			}
		}, 100);

	} catch (error) {
		// Initialize AOS as fallback
		try {
			if (typeof AOS !== 'undefined') {
				AOS.init({
					duration: 800,
					delay: 100,
					once: false,
					mirror: true,
					offset: 50,
					easing: 'ease-out-cubic'
				});
			}
		} catch (aosError) {
			// Silent fail
		}
	}
});

/**
 * Enhanced portfolio initialization function
 */
function initPortfolioIsotope() {
	const portfolioGrid = document.querySelector('.portfolio-grid');
	const filterButtons = document.querySelectorAll('.filter-btn');

	if (!portfolioGrid) {
		return;
	}

	if (filterButtons.length === 0) {
		console.warn('⚠️ No filter buttons found');
		return;
	}

	// Wait for images to load
	waitForImages(portfolioGrid).then(() => {

		// Create CustomIsotope instance
		const customIsotope = new CustomIsotope(portfolioGrid, {
			itemSelector: '.portfolio-item',
			gutter: 24, // Match your CSS gap
			transitionDuration: 500,
			hiddenStyle: {
				opacity: 0,
				transform: 'scale(0.9) translateY(20px)'
			},
			visibleStyle: {
				opacity: 1,
				transform: 'scale(1) translateY(0px)'
			}
		});

		// Store instance globally
		window.portfolioIsotope = customIsotope;
		window.customIsotope = customIsotope; // Additional alias

		// Setup filter buttons
		setupFilterButtons(customIsotope, filterButtons);

		// Refresh AOS after initial layout
		setTimeout(() => {
			if (typeof AOS !== 'undefined') {
				AOS.refresh();
			}
		}, 1000);

	}).catch(error => {
		console.error('❌ Error loading images:', error);
		// Initialize anyway after timeout
		setTimeout(() => {
			const customIsotope = new CustomIsotope(portfolioGrid);
			window.portfolioIsotope = customIsotope;
			setupFilterButtons(customIsotope, filterButtons);
		}, 1000);
	});
}

// Typed.js control functions
function pauseTyping() {
	if (window.serviceTyped) {
		window.serviceTyped.stop();
	}
}

function resumeTyping() {
	if (window.serviceTyped) {
		window.serviceTyped.start();
	}
}

function resetTyping() {
	if (window.serviceTyped) {
		window.serviceTyped.reset();
	}
}

// AOS control functions
function refreshAOS() {
	if (typeof AOS !== 'undefined') {
		AOS.refresh();
	}
}

function disableAOS() {
	if (typeof AOS !== 'undefined') {
		AOS.init({
			disable: true
		});
	}
}

function enableAOS() {
	if (typeof AOS !== 'undefined') {
		AOS.init({
			duration: 800,
			delay: 100,
			once: false,
			mirror: true,
			offset: 50,
			easing: 'ease-out-cubic'
		});
	}
}

// Handle page visibility changes
document.addEventListener('visibilitychange', function() {
	if (document.hidden) {
		pauseTyping();
	} else {
		resumeTyping();
		refreshAOS();
	}
});

// Expose utility functions globally
window.AOSUtils = {
	refresh: refreshAOS,
	disable: disableAOS,
	enable: enableAOS
};

window.TypingUtils = {
	pause: pauseTyping,
	resume: resumeTyping,
	reset: resetTyping
};

// ==========================================================================
// RESPONSIVE HEADER
// ==========================================================================

function initResponsiveHeader() {
	const header = document.querySelector('.header');
	const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
	const navbar = document.getElementById('navbar');
	const body = document.body;
	const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
	const dropdownMenus = document.querySelectorAll('.dropdown-menu');

	if (!header || !mobileMenuToggle || !navbar) return;

	// Funciones del menú móvil
	function openMobileMenu() {
		navbar.classList.add('mobile-menu-open');
		mobileMenuToggle.classList.add('active');
		body.style.overflow = 'hidden';
	}

	function closeMobileMenu() {
		navbar.classList.remove('mobile-menu-open');
		mobileMenuToggle.classList.remove('active');
		body.style.overflow = '';
		closeAllDropdowns();
	}

	function toggleMobileMenu() {
		if (navbar.classList.contains('mobile-menu-open')) {
			closeMobileMenu();
		} else {
			openMobileMenu();
		}
	}

	// Event listeners del menú móvil
	mobileMenuToggle.addEventListener('click', function(e) {
		e.preventDefault();
		e.stopPropagation();
		toggleMobileMenu();
	});

	document.addEventListener('click', function(e) {
		const isClickInsideMenu = navbar.contains(e.target);
		const isClickOnToggle = mobileMenuToggle.contains(e.target);

		if (!isClickInsideMenu && !isClickOnToggle && navbar.classList.contains('mobile-menu-open')) {
			closeMobileMenu();
		}
	});

	const navLinks = document.querySelectorAll('.nav-link');
	navLinks.forEach(link => {
		link.addEventListener('click', function() {
			if (window.innerWidth <= 992) {
				closeMobileMenu();
			}
		});
	});

	function closeAllDropdowns() {
		dropdownMenus.forEach(menu => {
			menu.classList.remove('dropdown-open');
		});
		dropdownToggles.forEach(toggle => {
			toggle.classList.remove('active');
		});
	}

	function toggleDropdown(dropdownId, toggleElement) {
		const dropdownMenu = document.getElementById(dropdownId);

		if (!dropdownMenu) return;

		const isOpen = dropdownMenu.classList.contains('dropdown-open');
		closeAllDropdowns();

		if (!isOpen) {
			dropdownMenu.classList.add('dropdown-open');
			toggleElement.classList.add('active');
		}
	}

	// Event listeners de dropdown
	dropdownToggles.forEach(toggle => {
		toggle.addEventListener('click', function(e) {
			e.preventDefault();
			e.stopPropagation();

			const dropdownId = this.getAttribute('data-dropdown');
			toggleDropdown(dropdownId, this);
		});
	});

	document.addEventListener('click', function(e) {
		if (window.innerWidth <= 992) {
			const isClickInsideDropdown = Array.from(dropdownMenus).some(menu =>
				menu.contains(e.target)
			);
			const isClickOnToggle = Array.from(dropdownToggles).some(toggle =>
				toggle.contains(e.target)
			);

			if (!isClickInsideDropdown && !isClickOnToggle) {
				closeAllDropdowns();
			}
		}
	});

	const dropdownItems = document.querySelectorAll('.dropdown-item');
	dropdownItems.forEach(item => {
		item.addEventListener('click', function() {
			if (window.innerWidth <= 992) {
				closeAllDropdowns();
				closeMobileMenu();
			}
		});
	});

	function handleHeaderScroll() {
		if (window.scrollY > 100) {
			header.classList.add('header-scrolled');
			header.classList.remove('header-transparent');
			//修改logo
			var that = document.getElementById("lmdlogo");
			if (localStorage.getItem('theme') === 'dark') {
				that.src = "assets/images/lmdlogo/lmd222.png";
			} else {
				that.src = "assets/images/lmdlogo/lmd22.png";
			}
		} else {
			header.classList.remove('header-scrolled');
			header.classList.add('header-transparent');
			var that = document.getElementById("lmdlogo");
			that.src = "assets/images/lmdlogo/lmd2.png";

		}
	}

	if (window.scrollY > 100) {
		header.classList.add('header-scrolled');
	} else {
		header.classList.add('header-transparent');
	}

	window.addEventListener('scroll', handleHeaderScroll);

	function handleWindowResize() {
		if (window.innerWidth > 992) {
			closeMobileMenu();
			closeAllDropdowns();
		}
	}

	window.addEventListener('resize', handleWindowResize);

	document.addEventListener('keydown', function(e) {
		if (e.key === 'Escape') {
			if (navbar.classList.contains('mobile-menu-open')) {
				closeMobileMenu();
			}
			closeAllDropdowns();
		}
	});
}
initResponsiveHeader();

// ==========================================================================
// CUSTOMERS CAROUSEL
// ==========================================================================

document.addEventListener('DOMContentLoaded', function() {
	if (typeof UniversalSlider !== 'undefined' && document.querySelector('.customers-carousel2')) {
		const customersSlider = new UniversalSlider('.customers-carousel2', {
			slidesPerView: {
				desktop: 3,
				tablet: 3,
				mobile: 2
			},
			slideBy: 1,
			breakpoints: {
				mobile: 576,
				tablet: 992
			},
			autoplay: true,
			autoplayDelay: 3000,
			pagination: false,
			arrows: false,
			loop: true,
			touchEnabled: true,
		});
	}
});

// ==========================================================================
// NEWSLETTER FORM SUBMISSION
// ==========================================================================

const newsletterForm = document.getElementById('newsletterForm');
if (newsletterForm) {
	newsletterForm.addEventListener('submit', function(e) {
		e.preventDefault();
		const checkbox = this.querySelector('input[name="newsletter-agreement"]');

		if (checkbox && !checkbox.checked) {
			alert('Please agree to the Privacy Policy');
			return;
		}

		alert('Thank you for subscribing to our newsletter!');
		this.reset();
	});
}

// ==========================================================================
// SCROLL TO TOP FUNCTIONALITY
// ==========================================================================

const scrollToTop = document.getElementById('scrollToTop');
if (scrollToTop) {
	window.addEventListener('scroll', function() {
		if (window.pageYOffset > 300) {
			scrollToTop.classList.add('show');
		} else {
			scrollToTop.classList.remove('show');
		}
	});

	scrollToTop.addEventListener('click', function() {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	});
}

// Smooth scrolling for footer links
document.querySelectorAll('.footer-link[href^="#"]').forEach(link => {
	link.addEventListener('click', function(e) {
		e.preventDefault();
		const target = document.querySelector(this.getAttribute('href'));
		if (target) {
			target.scrollIntoView({
				behavior: 'smooth',
				block: 'start'
			});
		}
	});
});

/**
 * Page Loader Controller - MultiIT
 * Handles the loading screen until all resources are loaded
 */
class PageLoader {
	constructor() {
		this.loader = document.getElementById('page-loader');
		this.progressBar = document.querySelector('.progress-bar');
		this.isLoaded = false;
		this.minLoadTime = 1500; // Minimum loading time in ms
		this.maxLoadTime = 8000; // Maximum loading time in ms (fallback)
		this.startTime = Date.now();
		this.currentProgress = 0;
		this.loadingSteps = [];
		this.completedSteps = 0;

		// Only initialize if loader exists
		if (this.loader) {
			this.init();
		} else {
			console.warn('MultiIT Loader: #page-loader element not found');
		}
	}

	init() {
		try {
			// Add loading class to body
			document.body.classList.add('loading');

			// Start progress animation
			this.animateProgress();

			// Wait for page to load completely
			this.waitForPageLoad();

			// Safety timeout to prevent infinite loading
			this.setSafetyTimeout();

		} catch (error) {
			this.forceHide();
		}
	}

	waitForPageLoad() {
		const promises = [];

		// Wait for DOM to be ready
		if (document.readyState === 'loading') {
			promises.push(new Promise(resolve => {
				document.addEventListener('DOMContentLoaded', resolve, {
					once: true
				});
				this.loadingSteps.push('DOM Content Loaded');
			}));
		}

		// Wait for all resources (images, CSS, JS) to load
		if (document.readyState !== 'complete') {
			promises.push(new Promise(resolve => {
				window.addEventListener('load', resolve, {
					once: true
				});
				this.loadingSteps.push('Window Load');
			}));
		}

		// Wait for all images to load
		promises.push(this.waitForImages());
		this.loadingSteps.push('Images Loaded');

		// Wait for fonts to load (if using web fonts)
		if (document.fonts && document.fonts.ready) {
			promises.push(document.fonts.ready.catch(() => {
				console.warn('MultiIT Loader: Fonts failed to load');
			}));
			this.loadingSteps.push('Fonts Loaded');
		}

		// Wait for critical CSS to load
		promises.push(this.waitForCriticalAssets());
		this.loadingSteps.push('Critical Assets');

		// Execute when everything is loaded
		Promise.allSettled(promises).then((results) => {
			// Log any failed promises
			results.forEach((result, index) => {
				if (result.status === 'rejected') {
					console.warn(`MultiIT Loader: Step "${this.loadingSteps[index]}" failed:`,
						result.reason);
				}
			});

			this.isLoaded = true;
			this.checkMinimumLoadTime();
		});
	}

	waitForImages() {
		return new Promise(resolve => {
			const images = document.querySelectorAll('img[src], img[data-src]');

			if (images.length === 0) {
				resolve();
				return;
			}

			let loadedImages = 0;
			const totalImages = images.length;

			const imagePromises = Array.from(images).map((img, index) => {
				return new Promise(imageResolve => {
					const handleImageLoad = () => {
						loadedImages++;
						// Update progress based on image loading
						const imageProgress = (loadedImages / totalImages) *
						30; // Images contribute 30% to progress
						this.updateProgressStep(imageProgress);
						imageResolve();
					};

					if (img.complete && img.naturalHeight !== 0) {
						handleImageLoad();
					} else {
						img.addEventListener('load', handleImageLoad, {
							once: true
						});
						img.addEventListener('error', () => {
							console.warn(
								`MultiIT Loader: Image failed to load: ${img.src || img.dataset.src}`
								);
							handleImageLoad(); // Continue even if image fails
						}, {
							once: true
						});

						// Timeout fallback for stuck images
						setTimeout(handleImageLoad, 3000);
					}
				});
			});

			Promise.all(imagePromises).then(resolve);
		});
	}

	waitForCriticalAssets() {
		return new Promise(resolve => {
			// Check for critical CSS files
			const criticalStylesheets = document.querySelectorAll(
				'link[rel="stylesheet"][href*="critical"], link[rel="stylesheet"][href*="main"]');

			if (criticalStylesheets.length === 0) {
				resolve();
				return;
			}

			let loadedSheets = 0;
			const totalSheets = criticalStylesheets.length;

			criticalStylesheets.forEach(sheet => {
				if (sheet.sheet) {
					loadedSheets++;
					if (loadedSheets === totalSheets) resolve();
				} else {
					sheet.addEventListener('load', () => {
						loadedSheets++;
						if (loadedSheets === totalSheets) resolve();
					}, {
						once: true
					});

					sheet.addEventListener('error', () => {
						console.warn('MultiIT Loader: Critical stylesheet failed to load:',
							sheet.href);
						loadedSheets++;
						if (loadedSheets === totalSheets) resolve();
					}, {
						once: true
					});
				}
			});

			// Timeout fallback
			setTimeout(resolve, 2000);
		});
	}

	setSafetyTimeout() {
		setTimeout(() => {
			if (!this.isLoaded) {
				this.isLoaded = true;
				this.checkMinimumLoadTime();
			}
		}, this.maxLoadTime);
	}

	checkMinimumLoadTime() {
		const elapsed = Date.now() - this.startTime;
		const remaining = Math.max(0, this.minLoadTime - elapsed);

		// Complete progress bar
		this.setProgress(100);

		setTimeout(() => {
			this.hideLoader();
		}, remaining);
	}

	animateProgress() {
		const progressInterval = setInterval(() => {
			if (this.isLoaded) {
				this.setProgress(100);
				clearInterval(progressInterval);
				return;
			}

			// More realistic progress simulation
			const increment = Math.random() * 8 + 2; // 2-10% increments
			this.currentProgress = Math.min(this.currentProgress + increment, 85);
			this.setProgress(this.currentProgress);

			if (this.currentProgress >= 85) {
				clearInterval(progressInterval);
			}
		}, 300);
	}

	updateProgressStep(stepProgress) {
		// Update progress based on completed steps
		const baseProgress = (this.completedSteps / this.loadingSteps.length) * 70;
		this.currentProgress = Math.min(baseProgress + stepProgress, 90);
		this.setProgress(this.currentProgress);
	}

	setProgress(percentage) {
		if (this.progressBar) {
			// Smooth progress animation
			this.progressBar.style.width = `${Math.min(100, Math.max(0, percentage))}%`;
		}
	}

	hideLoader() {
		if (!this.loader) return;

		const loadTime = Date.now() - this.startTime;

		// Add loaded class for animation
		this.loader.classList.add('loaded');
		document.body.classList.remove('loading');
		document.body.classList.add('loaded');

		// Remove loader from DOM after animation
		setTimeout(() => {
			if (this.loader && this.loader.parentNode) {
				this.loader.parentNode.removeChild(this.loader);
			}
		}, 800);

		// Trigger custom event for other scripts
		this.dispatchLoadedEvent(loadTime);
	}

	dispatchLoadedEvent(loadTime) {
		try {
			const event = new CustomEvent('pageLoaded', {
				detail: {
					loadTime,
					timestamp: Date.now(),
					userAgent: navigator.userAgent,
					connection: navigator.connection ? {
						effectiveType: navigator.connection.effectiveType,
						downlink: navigator.connection.downlink
					} : null
				}
			});
			window.dispatchEvent(event);
		} catch (error) {
			console.warn('MultiIT Loader: Failed to dispatch pageLoaded event', error);
		}
	}

	// Public method to force hide loader
	forceHide() {
		this.isLoaded = true;
		this.hideLoader();
	}

	// Public method to show loader (for dynamic content loading)
	show() {
		if (this.loader) {
			this.loader.classList.remove('loaded');
			document.body.classList.add('loading');
			document.body.classList.remove('loaded');
			this.currentProgress = 0;
			this.setProgress(0);
		}
	}

	// Public method to update progress manually
	updateProgress(percentage) {
		this.setProgress(percentage);
	}
}

/* ========================================
   INITIALIZATION
======================================== */

let pageLoader;

function initializePageLoader() {
	try {
		pageLoader = new PageLoader();
	} catch (error) {
		console.error('MultiIT Loader: Failed to initialize', error);
	}
}

// Start immediately if DOM is already ready, otherwise wait
if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', initializePageLoader, {
		once: true
	});
} else {
	initializePageLoader();
}

/* ========================================
   GLOBAL LOADER API
======================================== */

// Enhanced global API
window.MultiITLoader = {
	hide: () => pageLoader?.forceHide(),
	show: () => pageLoader?.show(),
	setProgress: (percentage) => pageLoader?.updateProgress(percentage),
	isLoaded: () => pageLoader?.isLoaded || false,
	getInstance: () => pageLoader
};

/* ========================================
   EVENT LISTENERS
======================================== */

// Listen for page loaded event with enhanced logging
window.addEventListener('pageLoaded', (event) => {
	const {
		loadTime,
		connection
	} = event.detail;
	const connectionInfo = connection ? `(${connection.effectiveType}, ${connection.downlink}Mbps)` : '';
});

// ✅ Inicializar AOS cuando el loader termine
window.addEventListener('pageLoaded', () => {
	if (typeof AOS !== 'undefined') {
		AOS.init({
			duration: 800,
			delay: 100,
			once: false,
			mirror: true,
			offset: 50,
			easing: 'ease-out-cubic'
		});
	}
});

// Handle page visibility change (when user switches tabs)
document.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'visible' && pageLoader) {
		// Page became visible again, ensure loader behavior is correct
		setTimeout(() => {
			if (pageLoader && document.readyState === 'complete') {
				pageLoader.forceHide();
			}
		}, 100);
	}
});

// Handle network connection changes (if supported)
if (navigator.connection) {
	navigator.connection.addEventListener('change', () => {
		if (pageLoader && !pageLoader.isLoaded) {}
	});
}

// Handle errors globally
window.addEventListener('error', (event) => {
	return;
});

// Performance timing
window.addEventListener('load', () => {
	if (window.performance) {
		try {
			// Método moderno con Navigation Timing API Level 2
			if (performance.getEntriesByType && performance.getEntriesByType('navigation').length > 0) {
				const navigationEntry = performance.getEntriesByType('navigation')[0];
			}
			// Fallback para navegadores que no soportan Navigation Timing Level 2
			else if (performance.timing) {
				// Solo usar si es absolutamente necesario para compatibilidad
				const timing = performance.timing;
				const loadTime = timing.loadEventEnd - timing.fetchStart;
			}
		} catch (error) {
			console.warn('MultiIt Performance: Could not measure performance timing', error);
		}
	}
});

// --- THEME SWITCHER LOGIC ---
// Wait for the initial HTML document to be completely loaded and parsed
document.addEventListener('DOMContentLoaded', () => {

	// Select the DOM elements
	const themeToggleBtn = document.getElementById('theme-toggle');
	const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
	const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

	// Function to update the visibility of the icons
	const updateIcons = (isDarkMode) => {
		if (isDarkMode) {
			// If dark mode is active, show the light mode icon (sun)
			themeToggleDarkIcon.classList.add('hidden');
			themeToggleLightIcon.classList.remove('hidden');
			var that = document.getElementById("lmdlogo");
			if (window.scrollY > 100) {
				that.src = "assets/images/lmdlogo/lmd222.png";
			}
		} else {
			// Otherwise, show the dark mode icon (moon)
			themeToggleDarkIcon.classList.remove('hidden');
			themeToggleLightIcon.classList.add('hidden');
			var that = document.getElementById("lmdlogo");
			if (window.scrollY > 100) {
				that.src = "assets/images/lmdlogo/lmd22.png";
			}
		}
	};

	// Checks for a saved theme, defaulting to light mode.
	const applyInitialTheme = () => {
		// The new logic: The theme is light by default, and dark ONLY if explicitly saved as 'dark'.
		if (localStorage.getItem('theme') === 'dark') {
			document.body.classList.add('dark-mode');
			updateIcons(true);
		} else {
			// For all other cases (first visit or theme saved as 'light'), default to light mode.
			document.body.classList.remove('dark-mode');
			updateIcons(false);
		}
	};

	// Only add the event listener if the toggle button exists on the page
	if (themeToggleBtn) {
		themeToggleBtn.addEventListener('click', () => {
			// Toggle the 'dark-mode' class on the body. 
			// .toggle() returns true if the class was added, false if removed.
			const isDarkMode = document.body.classList.toggle('dark-mode');

			// Save the user's preference to localStorage
			if (isDarkMode) {
				localStorage.setItem('theme', 'dark');
			} else {
				localStorage.setItem('theme', 'light');
			}

			// Update the button's icon to reflect the new state
			updateIcons(isDarkMode);
		});
	}

	applyInitialTheme();
});