tehachapi staff teaser sort version

const cards = Array.from(container.querySelectorAll('article.poc-instance'));
if (!cards.length) return;

const slugify = s => (s || '')
.toString()
.normalize('NFKD').replace(/[\u0300-\u036f]/g, '')
.toLowerCase()
.replace(/&/g, ' and ')
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '');

const parseCard = card => {
const titleEl = card.querySelector('h3 span, h3');
const raw = titleEl ? titleEl.textContent.trim() : '';
const m = raw.match(/^(.*?)\s*$([^)]+)$\s*$/);
const name = (m ? m[1] : raw).trim();
const team = (m ? m[2] : 'Other').trim();
return { card, titleEl, name, team, teamSlug: slugify(team) };
};

const data = cards.map(parseCard).map(d => {
if (d.titleEl) d.titleEl.textContent = d.name;
return d;
});

// Custom order for specific teams
const teamPriority = ['Management', 'Administration', 'Operations'];

// Sort: priority first, then alphabetically for others, then by name
data.sort((a, b) => {
const aPriority = teamPriority.indexOf(a.team);
const bPriority = teamPriority.indexOf(b.team);
if (aPriority !== -1 || bPriority !== -1) {
// both in list or one in list
if (aPriority === -1) return 1;
if (bPriority === -1) return -1;
return aPriority - bPriority;
}
// fallback alphabetical
const t = a.team.localeCompare(b.team);
return t !== 0 ? t : a.name.localeCompare(b.name);
});

const frag = document.createDocumentFragment();
const tabpanels = document.createElement('div');
tabpanels.className = 'tabpanels';
frag.appendChild(tabpanels);

const panel = document.createElement('div');
panel.className = 'staff-grid';
panel.setAttribute('role', 'tabpanel');
tabpanels.appendChild(panel);

let lastTeam = null;
data.forEach(d => {
if (d.team !== lastTeam) {
const h3 = document.createElement('h3');
h3.className = 'staff-heading';
h3.id = d.teamSlug;
h3.textContent = d.team;
panel.appendChild(h3);
lastTeam = d.team;
}
panel.appendChild(d.card);
});

container.innerHTML = '';
container.appendChild(frag);
});
</script>
<style>
.items .tabpanels .staff-heading {
flex: 0 0 100%;
margin: 32px 0 12px 0;
font-size: 22px;
line-height: 1.35;
font-weight: 700;
text-align: center; /* 👈 centers the headers */
}

/* grid container for the rebuilt panel */
.items .tabpanels .staff-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
box-sizing: border-box;
}

/* make headers span full width between card rows */
.items .tabpanels .staff-heading {
flex: 0 0 100%;
margin: 32px 0 12px 6px;
font-size: 2em;
line-height: 1.35;
font-weight: 700;
}

/* cards in responsive columns */
.items .tabpanels .poc-instance {
flex: 0 0 calc((100% - 2rem)/3);
max-width: calc((100% - 2rem)/3);
box-sizing: border-box;
}
@media (max-width: 800px) {
.items .tabpanels .poc-instance {
flex: 0 0 calc((100% - 1rem)/2);
max-width: calc((100% - 1rem)/2);
}
}
@media (max-width: 480px) {
.items .tabpanels .poc-instance {
flex: 0 0 100%;
max-width: 100%;
}
}
.items .tabpanels .staff-heading {
margin-top: -10px !important;
}
</style>