<script lang="ts">
	// Barre de progression de lecture. rAF + écriture DOM directe (jamais d'état réactif par frame).
	// Gradient drapeau vert→rouge. role=progressbar. Coupée en reduced-motion via la gate CSS.
	import { onMount } from 'svelte';

	let bar: HTMLDivElement;

	onMount(() => {
		let raf = 0;
		let ticking = false;
		const update = () => {
			const h = document.documentElement.scrollHeight - window.innerHeight;
			const p = h > 0 ? Math.min(1, Math.max(0, window.scrollY / h)) : 0;
			bar.style.transform = `scaleX(${p})`;
			bar.setAttribute('aria-valuenow', String(Math.round(p * 100)));
			ticking = false;
		};
		const onScroll = () => {
			if (!ticking) {
				ticking = true;
				raf = requestAnimationFrame(update);
			}
		};
		update();
		window.addEventListener('scroll', onScroll, { passive: true });
		window.addEventListener('resize', onScroll, { passive: true });
		return () => {
			cancelAnimationFrame(raf);
			window.removeEventListener('scroll', onScroll);
			window.removeEventListener('resize', onScroll);
		};
	});
</script>

<div
	bind:this={bar}
	class="progress"
	role="progressbar"
	aria-label="Progression de lecture"
	aria-valuemin="0"
	aria-valuemax="100"
	aria-valuenow="0"
></div>

<style>
	.progress {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 101;
		height: 3px;
		width: 100%;
		transform: scaleX(0);
		transform-origin: left;
		background: linear-gradient(to right, var(--vert-gong), var(--jaune-sable), var(--rouge-gong));
		pointer-events: none;
	}
</style>
