<?php
/**
 * Front Page template - React SPA mount with Universal Mobile/Desktop Nav Injection.
 *
 * @package Acheson_Investigations
 */

defined( 'ABSPATH' ) || exit;

get_header();

$colors = tmt_get_theme_data()['colors'] ?? array();
$style  = '';
foreach ( $colors as $property => $value ) {
	$style .= '--' . esc_attr( $property ) . ':' . esc_attr( $value ) . ';';
}
?>
<style>:root { <?php echo $style; ?> }</style>
<div id="tmt-app" style="<?php echo esc_attr( $style ); ?>"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
	var target = document.getElementById('tmt-app');
	if (!target) return;

	var observer = new MutationObserver(function() {
		var navs = target.querySelectorAll('header nav, nav, .mobile-menu, .drawer, .off-canvas');
		navs.forEach(function(nav) {
			if (nav.querySelector('.tmt-insights-link')) return;
			var links = nav.querySelectorAll('a');
			if (links.length < 2) return;

			var position = 1;
			var refLink = links[position] || links[1];
			var sampleLink = links[1];

			var insightsLink = document.createElement('a');
			insightsLink.href = '<?php echo esc_url( home_url( "/insights/" ) ); ?>';
			insightsLink.textContent = 'Insights';
			insightsLink.className = sampleLink.className + ' tmt-insights-link';
			insightsLink.style.cssText = sampleLink.style.cssText;

			if (refLink.parentElement && refLink.parentElement.tagName === 'LI') {
				var li = document.createElement('li');
				li.className = refLink.parentElement.className;
				li.appendChild(insightsLink);
				refLink.parentElement.parentElement.insertBefore(li, refLink.parentElement);
			} else {
				refLink.parentNode.insertBefore(insightsLink, refLink);
			}
		});
	});

	observer.observe(target, { childList: true, subtree: true });
});
</script>

<?php
get_footer();