@jjlmoya/utils-science 1.1.0

package/src/tool/asteroid-impact/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { asteroidImpact } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await asteroidImpact.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/asteroid-impact/component.astro

@@ -0,0 +1,436 @@
+---
+import "./AsteroidImpact.css";
+import "leaflet/dist/leaflet.css";
+import { Icon } from "astro-icon/components";
+---
+
+<div class="asteroid-app" id="asteroid-app">
+	<div id="asteroid-game-map" class="asteroid-game-map" style="touch-action: none;"></div>
+
+	<div id="asteroid-map-target-overlay" class="asteroid-map-target-overlay">
+		<div class="asteroid-target-crosshair"></div>
+		<div class="asteroid-target-crosshair vertical"></div>
+		<div class="asteroid-target-box"></div>
+	</div>
+
+	<div class="asteroid-top-bar">
+		<div>
+			<button id="asteroid-gps-btn" class="asteroid-gps-btn">
+				<div id="asteroid-gps-dot" class="asteroid-gps-dot"></div>
+				<span id="asteroid-gps-text">Activar GPS</span>
+			</button>
+		</div>
+
+		<div id="asteroid-verdict-pill" class="asteroid-verdict-pill">
+			<div id="asteroid-verdict-container" class="asteroid-verdict-container">
+				<div id="asteroid-verdict-icon" class="asteroid-verdict-icon"></div>
+				<div class="asteroid-verdict-text">
+					<div id="asteroid-verdict-label" class="asteroid-verdict-label">Análisis</div>
+					<div id="asteroid-verdict-value" class="asteroid-verdict-value">--</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="asteroid-desktop-lab">
+		<div class="asteroid-lab-panel">
+			<div class="asteroid-lab-header">
+				<div class="asteroid-lab-title">
+					<div class="asteroid-lab-icon">
+						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M12,2L11,7H13L12,2M6.5,5.27L5.77,6L9.5,9.73L10.23,9L6.5,5.27M17.5,5.27L13.77,9L14.5,9.73L18.23,6L17.5,5.27M2,11V13H7V11H2M17,11V13H22V11H17M9.5,14.27L5.77,18L6.5,18.73L10.23,15L9.5,14.27M14.5,14.27L13.77,15L17.5,18.73L18.23,18L14.5,14.27M11,17L12,22L13,17H11Z"></path>
+						</svg>
+					</div>
+					<div>
+						<h2 class="asteroid-lab-name">Asteroid</h2>
+						<span class="asteroid-lab-subtitle">Factory</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="asteroid-lab-content">
+				<div class="asteroid-drag-source" id="drag-source-desktop">
+					<div class="asteroid-drag-bg"></div>
+					<div class="asteroid-drag-tooltip">
+						<span class="asteroid-drag-tooltip-text">ARRASTRA AL MAPA</span>
+					</div>
+					<div class="asteroid-params-badge">
+						<div id="asteroid-param-size" class="asteroid-param-item">Diametro: <span id="asteroid-param-size-val">50m</span></div>
+						<div id="asteroid-param-vel" class="asteroid-param-item">Velocidad: <span id="asteroid-param-vel-val">15 km/s</span></div>
+						<div id="asteroid-param-type" class="asteroid-param-item">Tipo: <span id="asteroid-param-type-val">Roca</span></div>
+					</div>
+					<div class="asteroid-drag-icon-parent">
+						<Icon name="mdi:drag" class="w-6 h-6" />
+					</div>
+					<div class="asteroid-drag-visual">
+						<div class="asteroid-drag-grid"></div>
+						<div id="asteroid-visual" class="asteroid-visual">
+							<div id="asteroid-surface" class="asteroid-surface">
+								<div class="asteroid-surface-gradient"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<div class="asteroid-control-label" style="margin-bottom: 1rem;">
+						<span class="asteroid-control-text">Datos Históricos</span>
+					</div>
+					<div class="asteroid-presets">
+						<button class="asteroid-preset-btn" data-dia="20" data-vel="19" data-comp="rock">
+							<div class="asteroid-preset-title">CHELYABINSK</div>
+							<div class="asteroid-preset-subtitle">20m · Aéreo</div>
+						</button>
+						<button class="asteroid-preset-btn" data-dia="50" data-vel="15" data-comp="rock">
+							<div class="asteroid-preset-title">TUNGUSKA</div>
+							<div class="asteroid-preset-subtitle">50m · Bosque</div>
+						</button>
+						<button class="asteroid-preset-btn" data-dia="200" data-vel="25" data-comp="ice">
+							<div class="asteroid-preset-title">3I ATLAS</div>
+							<div class="asteroid-preset-subtitle">200m · Cometa</div>
+						</button>
+						<button class="asteroid-preset-btn" data-dia="10000" data-vel="20" data-comp="rock">
+							<div class="asteroid-preset-title">CHICXULUB</div>
+							<div class="asteroid-preset-subtitle">10km · E.L.E.</div>
+						</button>
+					</div>
+				</div>
+
+				<div class="asteroid-control-group">
+					<div class="asteroid-control-label">
+						<span class="asteroid-control-text">Diámetro</span>
+						<span id="display-size" class="asteroid-control-value">100m</span>
+					</div>
+					<input type="range" id="input-size" min="10" max="5000" step="10" value="5000" class="asteroid-slider" />
+				</div>
+
+				<div class="asteroid-control-group">
+					<div class="asteroid-control-label">
+						<span class="asteroid-control-text">Velocidad</span>
+						<span id="display-velocity" class="asteroid-control-value">20 km/s</span>
+					</div>
+					<input type="range" id="input-velocity" min="10" max="70" step="1" value="20" class="asteroid-slider" />
+				</div>
+
+				<div>
+					<div class="asteroid-control-text" style="margin-bottom: 0.5rem; display: block;">Composición</div>
+					<div class="asteroid-material-buttons">
+						<button class="asteroid-material-btn active" data-type="rock">
+							<div class="asteroid-material-dot" style="background: #64748b;"></div>
+							<span class="asteroid-material-name">Roca</span>
+						</button>
+						<button class="asteroid-material-btn" data-type="iron">
+							<div class="asteroid-material-dot" style="background: #1e293b;"></div>
+							<span class="asteroid-material-name">Hierro</span>
+						</button>
+						<button class="asteroid-material-btn" data-type="ice">
+							<div class="asteroid-material-dot" style="background: #67e8f9;"></div>
+							<span class="asteroid-material-name">Hielo</span>
+						</button>
+					</div>
+				</div>
+
+				<button id="clear-btn" class="asteroid-clear-btn">
+					<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path>
+					</svg>
+					Limpiar todo
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div style="display: none;">
+	<div id="icon-safe">
+		<svg class="w-6 h-6" style="color: #34d399;" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path>
+		</svg>
+	</div>
+	<div id="icon-shock">
+		<svg class="w-6 h-6" style="color: #60a5fa;" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3A9,9 0 0,0 3,12M5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12M11,17H13V15H11V17M11,13H13V7H11V13Z"></path>
+		</svg>
+	</div>
+	<div id="icon-burn">
+		<svg class="w-6 h-6" style="color: #fb923c;" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M17.66,11.2C17.43,10.9 17.15,10.64 16.89,10.38C16.22,9.78 15.46,9.35 14.82,8.72C13.33,7.26 13,4.85 13.95,3C13,3.23 12.17,3.75 11.46,4.32C8.87,6.4 7.85,10.07 9.07,13.22C9.11,13.32 9.15,13.42 9.15,13.55C9.15,13.77 9,13.97 8.8,14.05C8.57,14.15 8.33,14.09 8.14,13.93C8.08,13.88 8.04,13.83 8,13.76C6.87,12.33 6.69,10.28 7.45,8.64C5.78,10 4.87,12.3 5,14.47C5.06,14.97 5.12,15.47 5.29,15.97C5.43,16.57 5.7,17.17 6,17.7C7.08,19.43 8.95,20.67 10.96,20.92C13.1,21.19 15.39,20.8 17.03,19.32C18.86,17.66 19.5,15 18.56,12.72L18.43,12.46C18.22,12 17.66,11.2 17.66,11.2Z"></path>
+		</svg>
+	</div>
+	<div id="icon-death">
+		<svg class="w-6 h-6" style="color: #f87171;" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"></path>
+		</svg>
+	</div>
+</div>
+
+<script>
+	import L from "leaflet";
+	import { ImpactPhysics, type Composition } from "./logic/impactPhysics";
+	import { VERDICT_CONFIGS } from "./constants";
+	import { getCompositionColor } from "./utils";
+	import { updateControlUI } from "./ui-helpers";
+
+	let map: L.Map;
+
+	interface ImpactData {
+		craterDiameter: number;
+		thermalRadius: number;
+		shockwave1psi: number;
+	}
+
+	const impacts: {
+		id: string;
+		circles: L.LayerGroup;
+		marker: L.Marker;
+		data: ImpactData;
+		config: typeof config;
+	}[] = [];
+
+	const config = {
+		diameter: 10000,
+		velocity: 20,
+		composition: "rock" as Composition,
+	};
+
+	function init() {
+		map = L.map("asteroid-game-map", {
+			zoomControl: false,
+			attributionControl: false,
+			dragging: true,
+		}).setView([40.4168, -3.7038], 6);
+
+		L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.webp", {
+			subdomains: "abcd",
+			maxZoom: 20,
+			attribution: "&copy; OpenStreetMap &copy; CARTO",
+		}).addTo(map);
+
+		setupControls();
+		setupGhostDrag();
+		setupGPS();
+
+		map.on("click", () => {
+			map.dragging.enable();
+		});
+	}
+
+	function setupControls() {
+		const sizeInput = document.getElementById("input-size") as HTMLInputElement;
+		const velInput = document.getElementById("input-velocity") as HTMLInputElement;
+		const matBtns = document.querySelectorAll(".asteroid-material-btn");
+		const presetBtns = document.querySelectorAll(".asteroid-preset-btn");
+		const clearBtn = document.getElementById("clear-btn");
+
+		sizeInput?.addEventListener("input", (e) => {
+			config.diameter = parseInt((e.target as HTMLInputElement).value);
+			updateControlUI();
+		});
+
+		velInput?.addEventListener("input", (e) => {
+			config.velocity = parseInt((e.target as HTMLInputElement).value);
+			updateControlUI();
+		});
+
+		matBtns.forEach((btn) => {
+			btn.addEventListener("click", () => {
+				config.composition = btn.getAttribute("data-type") as Composition;
+				updateControlUI();
+			});
+		});
+
+		presetBtns.forEach((btn) => {
+			btn.addEventListener("click", () => {
+				config.diameter = parseInt(btn.getAttribute("data-dia")!);
+				config.velocity = parseInt(btn.getAttribute("data-vel")!);
+				config.composition = btn.getAttribute("data-comp") as Composition;
+				updateControlUI();
+			});
+		});
+
+		clearBtn?.addEventListener("click", clearAll);
+	}
+
+	function setupGhostDrag() {
+		const source = document.getElementById("drag-source-desktop");
+		if (!source) return;
+
+		const start = (e: MouseEvent | TouchEvent) => {
+			e.preventDefault();
+			const targetOverlay = document.getElementById("asteroid-map-target-overlay");
+			if (targetOverlay) targetOverlay.classList.add("active");
+
+			const onMove = (moveEvent: MouseEvent | TouchEvent) => {
+				moveEvent.preventDefault();
+			};
+
+			const onEnd = (endEvent: MouseEvent | TouchEvent) => {
+				if (targetOverlay) targetOverlay.classList.remove("active");
+
+				const clientX = (endEvent as MouseEvent).clientX || (endEvent as TouchEvent).changedTouches[0].clientX;
+				const clientY = (endEvent as MouseEvent).clientY || (endEvent as TouchEvent).changedTouches[0].clientY;
+
+				const point = map.mouseEventToContainerPoint({ clientX, clientY } as MouseEvent);
+				const latlng = map.containerPointToLatLng(point);
+				spawnImpact(latlng);
+
+				window.removeEventListener("mousemove", onMove);
+				window.removeEventListener("mouseup", onEnd);
+				window.removeEventListener("touchmove", onMove);
+				window.removeEventListener("touchend", onEnd);
+			};
+
+			window.addEventListener("mousemove", onMove);
+			window.addEventListener("mouseup", onEnd);
+			window.addEventListener("touchmove", onMove, { passive: false });
+			window.addEventListener("touchend", onEnd);
+		};
+
+		source.addEventListener("mousedown", start);
+		source.addEventListener("touchstart", start);
+	}
+
+	function createMarkerIcon(color: string): L.DivIcon {
+		return L.divIcon({
+			className: "asteroid-marker",
+			iconSize: [32, 32],
+			iconAnchor: [16, 16],
+			html: `<div style="width: 2rem; height: 2rem; border-radius: 50%; background-color: ${color}; border: 2px solid white; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"></div>`,
+		});
+	}
+
+	function setupMarkerDragHandlers(marker: L.Marker, group: L.LayerGroup, physics: ImpactData) {
+		marker.on("dragstart", () => {
+			map.dragging.disable();
+		});
+
+		marker.on("drag", (e: L.LeafletEvent) => {
+			const newPos = (e.target as L.Marker).getLatLng();
+			group.clearLayers();
+			renderCircles(newPos, physics, group);
+			updateVerdict();
+		});
+
+		marker.on("dragend", (e: L.LeafletEvent) => {
+			map.dragging.enable();
+			const newPos = (e.target as L.Marker).getLatLng();
+			group.clearLayers();
+			renderCircles(newPos, physics, group);
+			updateVerdict();
+		});
+	}
+
+	function spawnImpact(latlng: L.LatLng) {
+		const physics = ImpactPhysics.calculate({
+			diameter: config.diameter,
+			velocity: config.velocity * 1000,
+			composition: config.composition,
+			distance: 0,
+		});
+
+		const group = L.layerGroup();
+		addCircleLayers(latlng, physics, group);
+		group.addTo(map);
+
+		const markerColor = getCompositionColor(config.composition);
+		const marker = L.marker(latlng, {
+			draggable: true,
+			icon: createMarkerIcon(markerColor),
+		}).addTo(map);
+
+		impacts.push({ id: Date.now().toString(), circles: group, marker, data: physics, config });
+		setupMarkerDragHandlers(marker, group, physics);
+		updateVerdict();
+	}
+
+	function addCircleLayers(latlng: L.LatLng, physics: ImpactData, group: L.LayerGroup) {
+		L.circle(latlng, {
+			radius: physics.craterDiameter / 2,
+			color: "#ef4444",
+			fillColor: "#ef4444",
+			fillOpacity: 0.6,
+			weight: 0,
+		}).addTo(group);
+
+		L.circle(latlng, {
+			radius: physics.thermalRadius,
+			color: "#f97316",
+			fillColor: "#f97316",
+			fillOpacity: 0.15,
+			weight: 1,
+			dashArray: "5 5",
+		}).addTo(group);
+
+		L.circle(latlng, {
+			radius: physics.shockwave1psi,
+			color: "#3b82f6",
+			fillColor: "#3b82f6",
+			fillOpacity: 0.05,
+			weight: 1,
+		}).addTo(group);
+	}
+
+	function renderCircles(latlng: L.LatLng, physics: ImpactData, group: L.LayerGroup) {
+		addCircleLayers(latlng, physics, group);
+	}
+
+	function setupGPS() {
+		const btn = document.getElementById("asteroid-gps-btn");
+		btn?.addEventListener("click", () => {
+			const gpsText = document.getElementById("asteroid-gps-text");
+			if (gpsText) gpsText.textContent = "Buscando...";
+
+			navigator.geolocation.getCurrentPosition(
+				(pos) => {
+					const ll = new L.LatLng(pos.coords.latitude, pos.coords.longitude);
+					if (gpsText) gpsText.textContent = "GPS Activo";
+					map.flyTo(ll, 9);
+				},
+				() => {
+					if (gpsText) gpsText.textContent = "Error GPS";
+				}
+			);
+		});
+	}
+
+	function updateVerdictUI(verdict: string) {
+		const label = document.getElementById("asteroid-verdict-label");
+		const value = document.getElementById("asteroid-verdict-value");
+		const icon = document.getElementById("asteroid-verdict-icon");
+		const container = document.getElementById("asteroid-verdict-container");
+
+		const c = VERDICT_CONFIGS[verdict];
+		if (value) value.textContent = c.text;
+		if (label) label.textContent = c.label;
+		if (container) container.className = `asteroid-verdict-container ${c.class}`;
+
+		const iconSource = document.getElementById(c.iconId);
+		if (icon && iconSource) icon.innerHTML = iconSource.innerHTML;
+	}
+
+	function updateVerdict() {
+		const pill = document.getElementById("asteroid-verdict-pill");
+		if (impacts.length === 0) {
+			pill?.classList.remove("active");
+			return;
+		}
+
+		pill?.classList.add("active");
+		updateVerdictUI("safe");
+	}
+
+	function clearAll() {
+		impacts.forEach((i) => {
+			map.removeLayer(i.circles);
+			map.removeLayer(i.marker);
+		});
+		impacts.length = 0;
+		updateVerdict();
+	}
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", init);
+	} else {
+		init();
+	}
+</script>

package/src/tool/asteroid-impact/constants.ts

@@ -0,0 +1,67 @@
+export interface VerdictConfig {
+	text: string;
+	label: string;
+	iconId: string;
+	class: string;
+}
+
+export const VERDICT_CONFIGS: Record<string, VerdictConfig> = {
+	safe: {
+		text: "ZONA SEGURA",
+		label: "Sin amenazas",
+		iconId: "icon-safe",
+		class: "asteroid-verdict-safe",
+	},
+	shook: {
+		text: "ONDA DE CHOQUE",
+		label: "Daños estructurales",
+		iconId: "icon-shock",
+		class: "asteroid-verdict-shock",
+	},
+	burned: {
+		text: "RADIACIÓN TÉRMICA",
+		label: "Peligro extremo",
+		iconId: "icon-burn",
+		class: "asteroid-verdict-burned",
+	},
+	vaporized: {
+		text: "ZONA CERO",
+		label: "Impacto directo",
+		iconId: "icon-death",
+		class: "asteroid-verdict-vaporized",
+	},
+};
+
+export interface Labels {
+	searching: string;
+	gpsActive: string;
+	gpsError: string;
+	verdictSafe: string;
+	verdictSafeSub: string;
+	verdictShock: string;
+	verdictShockSub: string;
+	verdictBurned: string;
+	verdictBurnedSub: string;
+	verdictVaporized: string;
+	verdictVaporizedSub: string;
+	rock: string;
+	iron: string;
+	ice: string;
+}
+
+export const DEFAULT_LABELS: Labels = {
+	searching: "Searching...",
+	gpsActive: "GPS Active",
+	gpsError: "GPS Error",
+	verdictSafe: "SAFE",
+	verdictSafeSub: "No threat",
+	verdictShock: "SHOCK",
+	verdictShockSub: "Damage",
+	verdictBurned: "BURNED",
+	verdictBurnedSub: "Extreme",
+	verdictVaporized: "ZERO",
+	verdictVaporizedSub: "Vaporized",
+	rock: "Rock",
+	iron: "Iron",
+	ice: "Ice",
+};

package/src/tool/asteroid-impact/helpers.ts

@@ -0,0 +1,17 @@
+import { type Composition } from "./logic/impactPhysics";
+
+export function formatSize(diameter: number): string {
+	return diameter >= 1000 ? `${(diameter / 1000).toFixed(1)} km` : `${diameter}m`;
+}
+
+export function getTypeLabel(composition: Composition): string {
+	if (composition === "ice") return "Hielo";
+	if (composition === "iron") return "Hierro";
+	return "Roca";
+}
+
+export function getCompositionColor(composition: Composition): string {
+	if (composition === "ice") return "#67e8f9";
+	if (composition === "iron") return "#1e293b";
+	return "#64748b";
+}

package/src/tool/asteroid-impact/i18n/en.ts

@@ -0,0 +1,153 @@
+import type { ToolLocaleContent } from '../../../types';
+
+export const content: ToolLocaleContent = {
+  slug: 'asteroid-impact-simulator',
+  title: 'Asteroid Impact Simulator: Apocalypse Calculator',
+  description: 'Simulate asteroid impacts with real physics. Calculate energy, crater, thermal radiation and shockwave. Would you survive Chicxulub?',
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Bibliography',
+  ui: {
+    copied: 'Copied',
+    noHistory: 'No history',
+    load: 'Load',
+    delete: 'Delete',
+    activateGPS: 'Activate GPS',
+    analysisLabel: 'Analysis',
+    dragToMap: 'DRAG TO MAP',
+    diameterLabel: 'Diameter',
+    velocityLabel: 'Velocity',
+    typeLabel: 'Type',
+    historicalData: 'Historical Data',
+    composition: 'Composition',
+    rock: 'Rock',
+    iron: 'Iron',
+    ice: 'Ice',
+    clearAll: 'Clear all',
+    searching: 'Searching...',
+    gpsActive: 'GPS Active',
+    gpsError: 'GPS Error',
+    verdictSafe: 'SAFE ZONE',
+    verdictSafeSub: 'No threats',
+    verdictShock: 'SHOCK WAVE',
+    verdictShockSub: 'Structural damage',
+    verdictBurned: 'THERMAL RADIATION',
+    verdictBurnedSub: 'Extreme danger',
+    verdictVaporized: 'GROUND ZERO',
+    verdictVaporizedSub: 'Direct impact',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'When the Sky Falls: The Physics of Cosmic Apocalypse',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Asteroids are not just space rocks. They are cosmic bullets traveling at 20 km/s, capable of releasing more energy than all nuclear weapons on the planet combined. This simulator translates abstract physics into tangible human consequences.',
+    },
+    {
+      type: 'title',
+      text: 'The Doomsday Equation',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'It all starts with kinetic energy: <strong>E = ½mv²</strong>. A 100-meter asteroid traveling at 20 km/s releases approximately 0.5 megatons of TNT. For context, the Hiroshima bomb was 0.015 megatons.',
+    },
+    {
+      type: 'paragraph',
+      html: 'But size scales exponentially. An object 10 times larger has 1,000 times more volume (and mass), releasing energy equivalent to <strong>500 megatons</strong>. Chicxulub, the dinosaur killer, released the equivalent of <strong>100 million megatons</strong>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'A 1 km asteroid striking Earth would release more energy than all of the planet\'s nuclear weapons detonated simultaneously.',
+    },
+    {
+      type: 'title',
+      text: 'Anatomy of Destruction: Concentric Layers of Apocalypse',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>The Crater (Ground Zero):</strong> The crater diameter scales with E^0.3. A 1-megaton impact creates a ~1 km crater. Everything inside is instantly vaporized.',
+        '<strong>Thermal Radiation (The Flash):</strong> The fireball emits intense infrared radiation. At distances of E^0.41 km, clothing ignites and skin suffers third-degree burns.',
+        '<strong>Shockwave (The Hammer):</strong> The overpressure wave travels at supersonic speed. At 1 psi, glass shatters. At 5 psi, buildings collapse.',
+        '<strong>Earthquake (The Seismic Echo):</strong> The impact generates global seismic waves. Chicxulub caused a magnitude 11 earthquake, breaking the Richter scale.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Historical Impacts: Lessons from the Past',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Location & Year', 'Size', 'Energy', 'Effects'],
+      rows: [
+        ['Chelyabinsk, Russia (2013)', '20 meters', '500 kilotons', 'Shockwave at 100 km, 1,500 injured, broken windows'],
+        ['Tunguska, Siberia (1908)', '50-60 meters', '10-15 megatons', 'Flattened 2,000 km² of forest, 80 million trees felled'],
+        ['Chicxulub, Gulf of Mexico (66 M years)', '10 km', '100 million megatons', 'Extinction of 75% of life on Earth'],
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'How is impact energy calculated?',
+      answer: 'Primary energy is kinetic: (1/2) * mass * velocity². We use realistic densities (e.g. 3000 kg/m³ for rocky asteroids) and typical atmospheric entry velocities (11 to 72 km/s). The resulting energy is measured in Megatons of TNT.',
+    },
+    {
+      question: 'What is a thermal shockwave?',
+      answer: 'Upon entering the atmosphere, the asteroid compresses the air so violently that it creates a fireball a thousand times brighter than the Sun. The resulting thermal radiation can cause third-degree burns and set forests ablaze miles from the impact.',
+    },
+    {
+      question: 'Why don\'t some asteroids create craters?',
+      answer: 'Smaller rocks (<50m) usually fragment and explode in the atmosphere due to air pressure (Airburst), as happened in Chelyabinsk. The energy is released as a powerful pressure shockwave, but it doesn\'t hit the ground as a solid body.',
+    },
+    {
+      question: 'What is the real probability of an impact?',
+      answer: 'Small impacts (like Russia in 2013) happen every decade. Catastrophic impacts (Tunguska-style) every few centuries. A global extinction event like Chicxulub happens approximately every 100 million years.',
+    },
+  ],
+  bibliography: [
+    {
+      name: 'Collins, G. S., et al. (2005). Earth Impact Effects Program: A Web-based computer program for calculating the regional environmental consequences of a meteoroid impact on Earth.',
+      url: 'https://impact.ese.ic.ac.uk/ImpactEarth/',
+    },
+    {
+      name: 'Toon, O. B., et al. (1997). Environmental perturbations caused by the impacts of asteroids and comets. Reviews of Geophysics.',
+      url: 'https://agupubs.onlinelibrary.wiley.com/doi/abs/10.1029/96RG03038',
+    },
+    {
+      name: 'Chapman, C. R., & Morrison, D. (1994). Impacts on the Earth by asteroids and comets: assessing the hazard. Nature.',
+      url: 'https://www.nature.com/articles/367033a0',
+    },
+    {
+      name: 'Schulte, P., et al. (2010). The Chicxulub Asteroid Impact and Mass Extinction at the Cretaceous-Paleogene Boundary. Science.',
+      url: 'https://www.science.org/doi/10.1126/science.1177265',
+    },
+    {
+      name: 'Brown, P., et al. (2013). A 500-kiloton airburst over Chelyabinsk and an enhanced hazard from small impactors. Nature.',
+      url: 'https://www.nature.com/articles/nature12741',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Choose projectile size',
+      text: 'Enter the asteroid diameter, from a small 10-meter meteorite to a 10-kilometer planet killer.',
+    },
+    {
+      name: 'Configure velocity and angle',
+      text: 'Adjust the approach velocity and entry angle (45° is the statistically most likely value).',
+    },
+    {
+      name: 'Define asteroid nature',
+      text: 'Select whether the asteroid is made of rock, iron, or ice to calculate the crater depth correctly.',
+    },
+    {
+      name: 'Analyze survival verdict',
+      text: 'Drag the asteroid onto the map and indicate how far away you are to see the effects of radiation, earthquake, and shockwave.',
+    },
+  ],
+  schemas: [],
+};