`;
document.getElementById('site-header').innerHTML = headerHTML;
document.getElementById('site-footer').innerHTML = footerHTML;
})();
const state = {items:[],filtered:[],page:1,perPage:6};
const getJSON = (key,fallback) => {try{return JSON.parse(localStorage.getItem(key))||fallback}catch{return fallback}};
const setJSON = (key,val) => localStorage.setItem(key,JSON.stringify(val));
const favorites = getJSON('motionstead-favorites',[]);
const cart = getJSON('motionstead-cart',[]);
async function loadCatalog(){
try {
const res = await fetch('./catalog.json');
state.items = await res.json();
} catch(e){
state.items = [{"id":"c01","title":"Foundations of Movement","category":"Movement Foundations","level":"Beginner","format":"Online","duration":"6 weeks","price":890,"description":"Establish core principles of grounded training and body awareness.","outcomes":["Build safe movement patterns","Develop proprioception","Understand load management"],"accent":"Foundations"},{"id":"c02","title":"Advanced Programming","category":"Programming","level":"Advanced","format":"Hybrid","duration":"8 weeks","price":1290,"description":"Design progressive training cycles for diverse populations.","outcomes":["Create periodized plans","Manage fatigue markers","Optimize progression rates"],"accent":"Programming"}];
}
buildCategoryOptions();
filterAndRender();
}
function buildCategoryOptions(){
const select = document.getElementById('catalog-category');
const cats = [...new Set(state.items.map(i => i.category))].sort();
cats.forEach(cat => {
const opt = document.createElement('option');
opt.value = cat; opt.textContent = cat;
select.appendChild(opt);
});
}
function filterAndRender(){
const q = (document.getElementById('catalog-search').value || '').toLowerCase();
const cat = document.getElementById('catalog-category').value;
state.filtered = state.items.filter(item => {
const matchQ = !q || item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q);
const matchCat = cat === 'all' || item.category === cat;
return matchQ && matchCat;
});
state.page = 1;
renderGrid();
}
function renderGrid(){
const grid = document.getElementById('catalog-grid');
grid.innerHTML = '';
const start = (state.page-1)*state.perPage;
const slice = state.filtered.slice(start, start+state.perPage);
const countEl = document.getElementById('catalog-count');
countEl.textContent = `${state.filtered.length} course${state.filtered.length===1?'':'s'} available`;
slice.forEach(item => {
const isFav = favorites.includes(item.id);
const card = document.createElement('div');
card.className = `dd23l border border-[#d8c4ae] bg-[#f4ede3] rounded-3xl p-6 flex flex-col`;
card.innerHTML = `
${item.category} · ${item.level}
${item.format} · ${item.duration}