---

import PageLayout from "@/layouts/Base.astro";

import Murmurations from "@/components/page/Murmurations.astro";

const meta = {

	title: "/murmurations",

	description: "Birds, math, and poetry in motion",

};

---

<PageLayout meta={meta}>

	<Murmurations />

	<style is:global>

		body.murmurations-page {

			padding: 0 !important;

			max-width: none !important;

		}

		body.murmurations-page #main-header,

		body.murmurations-page footer {

			display: none !important;

		}

		body.murmurations-page #main {

			flex: none;

		}

	</style>

	<script>

		document.body.classList.add("murmurations-page");

	</script>

	<a

		href="/"

		class="fixed bottom-4 left-4 z-10 text-sm underline"

		style="bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left));"

	>

		Back

	</a>

	<audio id="murmuration-audio" src="/murmuration.mp3" preload="none"></audio>

	<div

		id="poem-overlay"

		class="pointer-events-none fixed inset-0 z-10 hidden items-center justify-center p-8 italic text-xl"

		aria-live="polite"

	>

		<div class="max-w-xl text-center text-sm leading-relaxed whitespace-pre-line text-textColor/90 opacity-0 transition-opacity duration-700 ease-in-out"></div>

	</div>

	<button

		id="audio-btn"

		class="fixed right-16 bottom-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-textColor/60 bg-bgColor/60 p-0 text-base hover:bg-textColor/15 active:bg-textColor/15"

		style="bottom: max(1rem, env(safe-area-inset-bottom)); right: calc(max(1rem, env(safe-area-inset-right)) + 3rem);"

		aria-label="Play audio"

		aria-pressed="false"

	>

		<span id="audio-icon" class="flex h-8 w-8 items-center justify-center"></span>

	</button>

	<button

		id="info-btn"

		class="fixed right-4 bottom-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-textColor/60 bg-bgColor/60 p-0 text-base hover:bg-textColor/15 active:bg-textColor/15"

		style="bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right));"

		aria-label="About this simulation"

		aria-expanded="false"

	>

		i

	</button>

	<div

		id="info-panel"

		class="fixed right-4 left-4 z-10 ml-auto hidden max-w-sm border border-textColor/20 bg-bgColor/95 p-4 text-xs leading-relaxed"

		style="bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.25rem); right: max(1rem, env(safe-area-inset-right)); left: max(1rem, env(safe-area-inset-left));"

		role="dialog"

		aria-label="About this simulation"

	>

		<h2 class="mb-2 text-sm font-semibold">Boids &amp; Starlings</h2>

		<p class="mb-2">

			A <em>murmuration</em> is the swirling, shape-shifting flight of thousands of starlings at dusk.

      There is no leader, rather coherence emerges from each bird reacting to its closest neighbors.

		</p>

		<p class="mb-2">

			This simulation uses <a class="underline" href="https://en.wikipedia.org/wiki/Boids" target="_blank" rel="noreferrer">Craig Reynolds&apos; boids algorithm</a>.

			Each agent follows three rules:

		</p>

		<ol class="mb-2 ml-5 list-decimal space-y-1">

			<li><strong>Separation</strong> (avoid crowding)</li>

			<li><strong>Alignment</strong> (match neighbor heading)</li>

			<li><strong>Cohesion</strong> (steer toward neighbor center)</li>

		</ol>

		<p>

			Real starlings track ~7 nearest neighbors regardless of distance.

			That fixed count is why turning waves cross the flock so fast and stay crisp at any density.

		</p>

    <br/>

    <p>

    This simulation doesn't come close to the real thing, and I would highly recommend <a target="_blank" rel="noreferrer" href="https://youtu.be/uV54oa0SyMc" class="style-link">taking a few minutes to see it</a>

    </p>

    <br/>

    <p class="italic">

      Audio credits: <a href="https://youtu.be/vj_zcAC2Y_0?si=zBdfwWx-a4N53VUv&t=345" target="_blank" rel="noreferrer" class="style-link">Starlings in Winter by Mary Oliver</a>

    </p>

	</div>

	<script>

		const audioBtn = document.getElementById("audio-btn") as HTMLButtonElement | null;

		const audioEl = document.getElementById("murmuration-audio") as HTMLAudioElement | null;

		const audioIcon = document.getElementById("audio-icon");

		const poemOverlay = document.getElementById("poem-overlay") as HTMLDivElement | null;

		// "Starlings in Winter" by Mary Oliver — read by Sean Bean.

		// Times in seconds from the start of /murmuration.mp3 (clip begins at 5:45 of source).

		const cues: { t: number; line: string }[] = [

			{ t: 13, line: "Starlings in Winter\nby Mary Oliver" },

			{ t: 18, line: "Chunky and noisy," },

			{ t: 20, line: "but with stars in their black feathers,\nthey spring from the telephone wire\nand instantly" },

			{ t: 27, line: "they are acrobats in the freezing wind.\nAnd now, in the theater of air,\nthey swing over buildings," },

			{ t: 36, line: "dipping and rising;\nthey float like one stippled star\nthat opens,\nbecomes for a moment fragmented," },

			{ t: 45, line: "then closes again;\nand you watch\nand you try\nbut you simply can't imagine" },

			{ t: 54, line: "how they do it\nwith no articulated instruction, no pause,\nonly the silent confirmation\nthat they are this notable thing," },

			{ t: 67, line: "this wheel of many parts, that can rise and spin\nover and over again,\nfull of gorgeous life." },

			{ t: 77, line: "Ah, world, what lessons you prepare for us,\neven in the leafless winter,\neven in the ashy city.\nI am thinking now\nof grief, and of getting past it;" },

			{ t: 92, line: "I feel my boots\ntrying to leave the ground,\nI feel my heart\npumping hard. I want" },

			{ t: 101, line: "to think again of dangerous and noble things.\nI want to be light and frolicsome.\nI want to be improbable beautiful and afraid of nothing,\nas though I had wings." },

		];

		const POEM_END_T = 118;

		const PLAY_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="h-4 w-4" viewBox="0 0 256 256"><path fill="currentColor" d="M231.36 116.19L87.28 28.06a14 14 0 0 0-14.18-.27A13.69 13.69 0 0 0 66 39.87v176.26a13.69 13.69 0 0 0 7.1 12.08a14 14 0 0 0 14.18-.27l144.08-88.13a13.82 13.82 0 0 0 0-23.62m-6.26 13.38L81 217.7a2 2 0 0 1-2.06 0a1.78 1.78 0 0 1-1-1.61V39.87a1.78 1.78 0 0 1 1-1.61A2.06 2.06 0 0 1 80 38a2 2 0 0 1 1 .31l144.1 88.12a1.82 1.82 0 0 1 0 3.14"/></svg>';

		const PAUSE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="h-4 w-4" viewBox="0 0 256 256"><path fill="currentColor" d="M200 34h-40a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h40a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14m2 174a2 2 0 0 1-2 2h-40a2 2 0 0 1-2-2V48a2 2 0 0 1 2-2h40a2 2 0 0 1 2 2ZM96 34H56a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h40a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14m2 174a2 2 0 0 1-2 2H56a2 2 0 0 1-2-2V48a2 2 0 0 1 2-2h40a2 2 0 0 1 2 2Z"/></svg>';

		if (audioIcon) audioIcon.innerHTML = PLAY_SVG;

		const poemText = poemOverlay?.firstElementChild as HTMLDivElement | null;

		let lastCueIdx = -1;

		let swapTimer: number | undefined;

		const FADE_MS = 300;

		const renderCue = (idx: number) => {

			if (!poemOverlay || !poemText) return;

			if (idx === lastCueIdx) return;

			window.clearTimeout(swapTimer);

			const wasHidden = poemOverlay.classList.contains("hidden");

			poemText.classList.remove("opacity-100");

			poemText.classList.add("opacity-0");

			const swap = () => {

				if (idx < 0) {

					poemOverlay.classList.add("hidden");

					poemOverlay.classList.remove("flex");

					poemText.textContent = "";

				} else {

					poemText.textContent = cues[idx].line;

					poemOverlay.classList.remove("hidden");

					poemOverlay.classList.add("flex");

					requestAnimationFrame(() => {

						requestAnimationFrame(() => {

							poemText.classList.remove("opacity-0");

							poemText.classList.add("opacity-100");

						});

					});

				}

			};

			if (wasHidden) swap();

			else swapTimer = window.setTimeout(swap, FADE_MS);

			lastCueIdx = idx;

		};

		const updateCue = () => {

			if (!audioEl) return;

			const t = audioEl.currentTime;

			if (t >= POEM_END_T) {

				renderCue(-1);

				return;

			}

			let idx = -1;

			for (let i = 0; i < cues.length; i++) {

				if (cues[i].t <= t) idx = i;

				else break;

			}

			renderCue(idx);

		};

		const resetBtn = () => {

			if (!audioBtn || !audioIcon) return;

			audioIcon.innerHTML = PLAY_SVG;

			audioBtn.setAttribute("aria-pressed", "false");

			audioBtn.setAttribute("aria-label", "Play audio");

		};

		if (audioBtn && audioEl && audioIcon) {

			audioEl.addEventListener("timeupdate", updateCue);

			audioEl.addEventListener("seeked", updateCue);

			audioEl.addEventListener("pause", () => {

				if (audioEl.currentTime === 0) renderCue(-1);

			});

			audioEl.addEventListener("ended", () => {

				renderCue(-1);

				audioEl.currentTime = 0;

				resetBtn();

			});

			audioBtn.addEventListener("click", async () => {

				if (audioEl.paused) {

					try {

						if (audioEl.ended) audioEl.currentTime = 0;

						await audioEl.play();

						audioIcon.innerHTML = PAUSE_SVG;

						audioBtn.setAttribute("aria-pressed", "true");

						audioBtn.setAttribute("aria-label", "Pause audio");

						updateCue();

					} catch (err) {

						console.error("Audio play failed", err);

					}

				} else {

					audioEl.pause();

					resetBtn();

				}

			});

		}

	</script>

	<script>

		const btn = document.getElementById("info-btn") as HTMLButtonElement | null;

		const panel = document.getElementById("info-panel") as HTMLDivElement | null;

		if (btn && panel) {

			btn.addEventListener("click", (e) => {

				e.stopPropagation();

				const willOpen = panel.classList.contains("hidden");

				panel.classList.toggle("hidden", !willOpen);

				btn.setAttribute("aria-expanded", String(willOpen));

			});

			document.addEventListener("click", (e) => {

				if (panel.classList.contains("hidden")) return;

				const target = e.target as Node;

				if (panel.contains(target) || btn.contains(target)) return;

				panel.classList.add("hidden");

				btn.setAttribute("aria-expanded", "false");

			});

		}

	</script>

</PageLayout>