(function () {
	'use strict';

	class Navigation {
		constructor() {
			this.init();
		}

		/**
		 * Helper: jQuery-like Slide Down
		 */
		slideDown(el, duration = 400) {
			el.style.display = 'block';
			const height = el.scrollHeight;
			const style = window.getComputedStyle(el);
			const paddingTop = style.paddingTop;
			const paddingBottom = style.paddingBottom;
			const marginTop = style.marginTop;
			const marginBottom = style.marginBottom;

			el.style.overflow = 'hidden';
			el.style.height = 0;
			el.style.paddingTop = 0;
			el.style.paddingBottom = 0;
			el.style.marginTop = 0;
			el.style.marginBottom = 0;
			el.style.transition = `all ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;

			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
					el.style.height = height + 'px';
					el.style.paddingTop = paddingTop;
					el.style.paddingBottom = paddingBottom;
					el.style.marginTop = marginTop;
					el.style.marginBottom = marginBottom;
				});
			});

			setTimeout(() => {
				el.style.removeProperty('height');
				el.style.removeProperty('transition');
				el.style.removeProperty('overflow');
				el.style.removeProperty('padding-top');
				el.style.removeProperty('padding-bottom');
				el.style.removeProperty('margin-top');
				el.style.removeProperty('margin-bottom');
			}, duration + 50);
		}

		/**
		 * Helper: jQuery-like Slide Up
		 */
		slideUp(el, duration = 400) {
			const height = el.scrollHeight;
			const style = window.getComputedStyle(el);
			const paddingTop = style.paddingTop;
			const paddingBottom = style.paddingBottom;
			const marginTop = style.marginTop;
			const marginBottom = style.marginBottom;

			el.style.height = height + 'px';
			el.style.paddingTop = paddingTop;
			el.style.paddingBottom = paddingBottom;
			el.style.marginTop = marginTop;
			el.style.marginBottom = marginBottom;
			el.style.overflow = 'hidden';
			el.style.transition = `all ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;

			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
					el.style.height = 0;
					el.style.paddingTop = 0;
					el.style.paddingBottom = 0;
					el.style.marginTop = 0;
					el.style.marginBottom = 0;
				});
			});

			setTimeout(() => {
				el.style.display = 'none';
				el.style.removeProperty('height');
				el.style.removeProperty('transition');
				el.style.removeProperty('overflow');
				el.style.removeProperty('padding-top');
				el.style.removeProperty('padding-bottom');
				el.style.removeProperty('margin-top');
				el.style.removeProperty('margin-bottom');
			}, duration + 50);
		}

		init() {
			const menus = document.querySelectorAll('.js-menu');
			menus.forEach(menu => {
				menu.classList.contains('is-menu-vertical') ? this.vertical(menu) : this.horizontal(menu);
			});
			this.mobileToggle();
		}

		/**
		 * Mobile Menu Dropdown Toggle
		 */
		mobileToggle() {
			const toggle = document.querySelector('.js-mobile-menu-toggle');
			if (!toggle) return;

			toggle.addEventListener('click', (e) => {
				e.preventDefault();
				const target = document.querySelector(toggle.getAttribute('href'));
				if (!target) return;

				const isActive = target.classList.contains('is-active');
				toggle.classList.toggle('is-active', !isActive);
				target.classList.toggle('is-active', !isActive);
				document.body.classList.toggle('is-mobile-menu-active', !isActive);

				isActive ? this.slideUp(target) : this.slideDown(target);
			});
		}

		/**
		 * Horizontal menu: hover-based submenus.
		 */
		horizontal(menu) {
			menu.querySelectorAll('.menu-item-has-children').forEach(item => {
				item.addEventListener('mouseenter', () => item.classList.add('is-active'));
				item.addEventListener('mouseleave', () => item.classList.remove('is-active'));
			});
		}

		/**
		 * Vertical menu: click-based toggles via arrows using delegation.
		 */
		vertical(menu) {
			menu.addEventListener('click', (e) => {
				const arrow = e.target.closest('.rt-menu-arrow');
				if (!arrow) return;

				e.preventDefault();
				const item = arrow.parentElement;
				const submenu = item.querySelector('.sub-menu');
				if (!submenu) return;

				const isActive = item.classList.contains('is-active');
				
				arrow.classList.toggle('is-active', !isActive);
				item.classList.toggle('is-active', !isActive);

				isActive ? this.slideUp(submenu) : this.slideDown(submenu);
			});
		}
	}

	/**
	 * Initialize navigation when DOM is ready.
	 */
	document.addEventListener('DOMContentLoaded', () => {
		new Navigation();
	});

})();
