1import { skillFocusAreas, dimensionGuidelineCounts } from '../data.js';
 2import { foundationAnimations } from './foundation-animations.js';
 3
 4export function initFoundationGrid() {
 5	const container = document.querySelector('.foundation-grid');
 6	if (!container) return;
 7
 8	const dimensions = skillFocusAreas['impeccable'];
 9	if (!dimensions) return;
10
11	container.innerHTML = dimensions.map((dim, i) => `
12		<div class="foundation-column">
13			<div class="foundation-card">
14				<div class="foundation-card-viz">
15					${foundationAnimations[dim.area] || ''}
16				</div>
17				<div class="foundation-card-header">
18					<span class="foundation-card-label">${dim.area}</span>
19					<span class="foundation-card-count">${dimensionGuidelineCounts[dim.area] || ''}</span>
20				</div>
21				<p class="foundation-card-detail">${dim.detail}</p>
22			</div>
23			<div class="foundation-plinth plinth-${i + 1}"></div>
24		</div>
25	`).join('');
26}