/**
 * Technicalistic — theme JavaScript
 * Portfolio tag-based filtering, smooth scroll, scroll animations.
 *
 * @package Technicalistic
 * @since 3.0.0
 */

(function () {
	'use strict';

	document.addEventListener('DOMContentLoaded', function () {
		technicalisticInitPortfolioFilter();
		technicalisticInitSmoothScroll();
		technicalisticInitAnimations();
	});

	/**
	 * Portfolio tag-based filtering.
	 * Filter buttons use data-tag attributes. Portfolio post cards
	 * are shown/hidden based on matching WordPress tag slugs found
	 * in the post's class list or data attributes.
	 */
	function technicalisticInitPortfolioFilter() {
		var filterContainer = document.getElementById('jb-filter-btns');
		if (!filterContainer) return;

		var buttons = filterContainer.querySelectorAll('.filter-btn');
		var grid = document.querySelector('.jb-portfolio-grid');
		if (!grid) return;

		buttons.forEach(function (btn) {
			btn.addEventListener('click', function () {
				var tag = this.getAttribute('data-tag');

				// Update active state
				buttons.forEach(function (b) {
					b.classList.remove('active');
					b.setAttribute('aria-pressed', 'false');
				});
				this.classList.add('active');
				this.setAttribute('aria-pressed', 'true');

				// Filter cards
				var cards = grid.querySelectorAll('.port-card');
				cards.forEach(function (card) {
					if (tag === 'all') {
						card.closest('li, .wp-block-post').style.display = '';
						return;
					}

					// Check if the post wrapper has the tag class (tag-slug format)
					var postEl = card.closest('li, .wp-block-post');
					if (!postEl) return;

					var classes = postEl.className || '';
					var hasTag = classes.indexOf('tag-' + tag) !== -1;
					postEl.style.display = hasTag ? '' : 'none';
				});
			});
		});

		// Auto-filter from URL parameter (e.g. ?tag=content-strategy)
		var urlParams = new URLSearchParams(window.location.search);
		var tagParam = urlParams.get('tag');
		if (tagParam) {
			var matchingBtn = filterContainer.querySelector('.filter-btn[data-tag="' + tagParam + '"]');
			if (matchingBtn) {
				matchingBtn.click();
			}
		}
	}

	/**
	 * Smooth scroll for anchor links.
	 */
	function technicalisticInitSmoothScroll() {
		var links = document.querySelectorAll('a[href^="#"]');

		links.forEach(function (link) {
			link.addEventListener('click', function (e) {
				var targetId = this.getAttribute('href');
				if (targetId === '#') return;

				var target = document.querySelector(targetId);
				if (target) {
					e.preventDefault();
					target.scrollIntoView({
						behavior: 'smooth',
						block: 'start'
					});
				}
			});
		});
	}

	/**
	 * Scroll-triggered fade-in animations.
	 */
	function technicalisticInitAnimations() {
		if (!('IntersectionObserver' in window)) return;

		var elements = document.querySelectorAll('.animate-on-scroll');
		if (!elements.length) return;

		var observer = new IntersectionObserver(function (entries) {
			entries.forEach(function (entry) {
				if (entry.isIntersecting) {
					entry.target.classList.add('animate-fade-in');
					observer.unobserve(entry.target);
				}
			});
		}, {
			threshold: 0.1,
			rootMargin: '0px 0px -50px 0px'
		});

		elements.forEach(function (el) {
			observer.observe(el);
		});
	}
})();
