/**
 * Maringá Faz Mais — Fase 1.
 * Vanilla JS, sem dependências: menu mobile, contadores animados
 * (IntersectionObserver = lazy, só anima quando entra na tela) e
 * modal do vídeo completo.
 */
(function () {
	'use strict';

	// Duração da contagem dos números da faixa (ms). Maior = conta mais devagar.
	var DURACAO_CONTADOR = 1600;

	var reduzMovimento = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

	/* ---------- Menu mobile ---------- */
	var toggle = document.querySelector('.mfm-header__toggle');
	var nav = document.getElementById('menu-principal');

	if (toggle && nav) {
		var fechaMenu = function () {
			nav.classList.remove('aberto');
			toggle.setAttribute('aria-expanded', 'false');
			toggle.setAttribute('aria-label', 'Abrir menu');
		};

		toggle.addEventListener('click', function () {
			var aberto = nav.classList.toggle('aberto');
			toggle.setAttribute('aria-expanded', aberto ? 'true' : 'false');
			toggle.setAttribute('aria-label', aberto ? 'Fechar menu' : 'Abrir menu');
		});

		// Fecha ao clicar num link (âncoras na mesma página)
		nav.addEventListener('click', function (e) {
			if (e.target.closest('a')) {
				fechaMenu();
			}
		});

		// Fecha ao clicar/tocar fora do menu (o botão tem handler próprio).
		document.addEventListener('click', function (e) {
			if (nav.classList.contains('aberto')
				&& !e.target.closest('#menu-principal')
				&& !e.target.closest('.mfm-header__toggle')) {
				fechaMenu();
			}
		});

		// Esc também fecha, devolvendo o foco pro botão.
		document.addEventListener('keydown', function (e) {
			if ('Escape' === e.key && nav.classList.contains('aberto')) {
				fechaMenu();
				toggle.focus();
			}
		});
	}

	/* ---------- Submenus do menu principal (Obras/Regiões/Áreas) ---------- */
	// Injeta a seta que abre/fecha o submenu: no mobile é o único jeito de
	// expandir; no desktop complementa o hover (toque em tablet, teclado).
	document.querySelectorAll('.mfm-menu li').forEach(function (li) {
		var sub = li.querySelector('ul');
		var link = li.querySelector('a');
		if (!sub || !link) {
			return;
		}
		li.classList.add('menu-item-has-children');

		var seta = document.createElement('button');
		seta.type = 'button';
		seta.className = 'mfm-submenu-toggle';
		seta.setAttribute('aria-expanded', 'false');
		seta.setAttribute('aria-label', 'Abrir submenu de ' + link.textContent.trim());
		seta.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 15.4 5.6 9l1.6-1.6L12 12.2l4.8-4.8L18.4 9z"/></svg>';
		li.insertBefore(seta, sub);

		seta.addEventListener('click', function () {
			var aberto = li.classList.toggle('aberto');
			seta.setAttribute('aria-expanded', aberto ? 'true' : 'false');
		});
	});

	/* ---------- Carimbada "ENTREGUE!" nos cards ---------- */
	// .visivel dispara o keyframe do carimbo quando o card entra na tela —
	// vale pra home (destaques) e pras listagens.
	var cards = document.querySelectorAll('.mfm-card');
	if (cards.length && 'IntersectionObserver' in window) {
		var observerCards = new IntersectionObserver(function (entradas, obs) {
			entradas.forEach(function (entrada) {
				if (entrada.isIntersecting) {
					entrada.target.classList.add('visivel');
					obs.unobserve(entrada.target);
				}
			});
		}, { threshold: 0.35 });

		cards.forEach(function (card) {
			observerCards.observe(card);
		});
	} else {
		cards.forEach(function (card) {
			card.classList.add('visivel');
		});
	}

	/* ---------- Barra de progresso: preenche ao entrar na tela ---------- */
	// A barra nasce zerada (classe posta aqui — sem JS ela já vem cheia) e
	// desliza até o percentual quando aparece. Vale pra home, listagens e
	// ficha da obra.
	var barras = document.querySelectorAll('.mfm-card__barra-fill');
	if (barras.length && !reduzMovimento && 'IntersectionObserver' in window) {
		var observerBarras = new IntersectionObserver(function (entradas, obs) {
			entradas.forEach(function (entrada) {
				if (entrada.isIntersecting) {
					entrada.target.classList.remove('mfm-barra--esperando');
					obs.unobserve(entrada.target);
				}
			});
		}, { threshold: 0.6 });

		barras.forEach(function (barra) {
			barra.classList.add('mfm-barra--esperando');
			observerBarras.observe(barra);
		});
	}

	/* ---------- Contadores da faixa de números ---------- */
	// Anima só a parte numérica: "+18 mil" → conta 0→18 e mantém "+ ... mil".
	function animaContador(el) {
		var texto = el.textContent;
		var m = texto.match(/([\d.,]+)/);
		if (!m || reduzMovimento) {
			return;
		}

		var bruto = m[1];
		var alvo = parseFloat(bruto.replace(/\./g, '').replace(',', '.'));
		if (isNaN(alvo)) {
			return;
		}

		var decimais = (bruto.indexOf(',') > -1) ? bruto.split(',')[1].length : 0;
		var duracao = DURACAO_CONTADOR;
		var inicio = null;

		function formata(n) {
			return n.toLocaleString('pt-BR', {
				minimumFractionDigits: decimais,
				maximumFractionDigits: decimais
			});
		}

		function passo(agora) {
			if (!inicio) {
				inicio = agora;
			}
			var t = Math.min((agora - inicio) / duracao, 1);
			var suave = 1 - Math.pow(1 - t, 3); // ease-out cúbico
			el.textContent = texto.replace(bruto, formata(alvo * suave));
			if (t < 1) {
				requestAnimationFrame(passo);
			} else {
				el.textContent = texto;
			}
		}

		requestAnimationFrame(passo);
	}

	// Exposta pra outros scripts do tema (ex.: selos da landing de lançamento).
	window.mfm = window.mfm || {};
	window.mfm.animaContador = animaContador;

	// Dispara todos de uma vez quando a faixa entra na tela: as duas cópias
	// do marquee contam em sincronia e o loop não mostra valores diferentes.
	var faixaNumeros = document.querySelector('.mfm-numeros');
	if (faixaNumeros && 'IntersectionObserver' in window) {
		var observer = new IntersectionObserver(function (entradas) {
			if (!entradas[0].isIntersecting) {
				return;
			}
			faixaNumeros.querySelectorAll('[data-contador]').forEach(animaContador);
			observer.disconnect();
		}, { threshold: 0.2 });

		observer.observe(faixaNumeros);
	}

	/* ---------- Modal do vídeo completo ---------- */
	var modal = document.getElementById('mfm-modal-video');
	var alvo = document.getElementById('mfm-modal-video-alvo');
	var botaoPlay = document.querySelector('.mfm-hero__play');

	function urlEmbedYouTube(url) {
		var m = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([\w-]{11})/);
		return m ? 'https://www.youtube-nocookie.com/embed/' + m[1] + '?autoplay=1&rel=0' : null;
	}

	function abreModal(url) {
		var embed = urlEmbedYouTube(url);
		if (embed) {
			var iframe = document.createElement('iframe');
			iframe.src = embed;
			iframe.allow = 'autoplay; encrypted-media; picture-in-picture';
			iframe.allowFullscreen = true;
			iframe.title = 'Vídeodo prefeito';
			alvo.appendChild(iframe);
		} else {
			var video = document.createElement('video');
			video.src = url;
			video.controls = true;
			video.autoplay = true;
			video.playsInline = true;
			alvo.appendChild(video);
		}
		modal.hidden = false;
		document.body.style.overflow = 'hidden';
		modal.querySelector('.mfm-modal__fechar').focus();
	}

	function fechaModal() {
		modal.hidden = true;
		alvo.innerHTML = ''; // remove o player = para o áudio na hora
		document.body.style.overflow = '';
		if (botaoPlay) {
			botaoPlay.focus();
		}
	}

	if (modal && botaoPlay) {
		botaoPlay.addEventListener('click', function () {
			abreModal(botaoPlay.dataset.video);
		});

		modal.addEventListener('click', function (e) {
			if (e.target.hasAttribute('data-fechar')) {
				fechaModal();
			}
		});

		document.addEventListener('keydown', function (e) {
			if (e.key === 'Escape' && !modal.hidden) {
				fechaModal();
			}
		});
	}
})();
