/**
 * FAQ Block - Frontend Interactions
 * Handles accordion functionality for FAQ items
 */

document.addEventListener('DOMContentLoaded', () => {
	const faqBlocks = document.querySelectorAll('.faq-block');

	faqBlocks.forEach((block) => {
		const faqItems = block.querySelectorAll('.faq-item');

		faqItems.forEach((item) => {
			const button = item.querySelector('.faq-item__question');
			const answer = item.querySelector('.faq-item__answer');

			if (!button || !answer) return;

			button.addEventListener('click', () => {
				const isExpanded = button.getAttribute('aria-expanded') === 'true';

				// Toggle this item
				button.setAttribute('aria-expanded', !isExpanded);

				if (isExpanded) {
					// Collapse
					answer.style.height = answer.scrollHeight + 'px';
					// Force reflow
					answer.offsetHeight;
					answer.style.height = '0';

					setTimeout(() => {
						answer.style.display = 'none';
						answer.style.height = '';
					}, 300);

					item.classList.remove('faq-item--expanded');
				} else {
					// Expand
					answer.style.display = 'block';
					answer.style.height = '0';
					// Force reflow
					answer.offsetHeight;
					answer.style.height = answer.scrollHeight + 'px';

					setTimeout(() => {
						answer.style.height = 'auto';
					}, 300);

					item.classList.add('faq-item--expanded');
				}
			});

			// Handle keyboard navigation
			button.addEventListener('keydown', (e) => {
				// Space or Enter triggers the button
				if (e.key === ' ' || e.key === 'Enter') {
					e.preventDefault();
					button.click();
				}
			});
		});
	});

	// Optional: Add URL hash navigation
	// If URL has #faq-123, open that specific FAQ
	if (window.location.hash) {
		const hash = window.location.hash.substring(1);
		const targetItem = document.querySelector(`[data-faq-id="${hash}"]`);

		if (targetItem) {
			const button = targetItem.querySelector('.faq-item__question');
			const isExpanded = button.getAttribute('aria-expanded') === 'true';

			if (!isExpanded) {
				button.click();
			}

			// Scroll to item after a short delay
			setTimeout(() => {
				targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
			}, 350);
		}
	}
});