document.addEventListener('DOMContentLoaded', () => {
const yearSections = document.querySelectorAll('section[data-anchor^="year-"]');
const tabBars = document.querySelectorAll('[data-tabs]');
// Show the first year section by default (or keep whatever you want active)
if (yearSections.length) yearSections[0].classList.add('year-active');
tabBars.forEach(tabBar => {
tabBar.addEventListener('click', (e) => {
const btn = e.target.closest('button[data-target]');
if (!btn) return;
const target = btn.getAttribute('data-target');
// Hide all year sections
yearSections.forEach(sec => sec.classList.remove('year-active'));
// Show the chosen one
const activeSection = document.querySelector(`section[data-anchor="${target}"]`);
if (activeSection) activeSection.classList.add('year-active');
// Update active button style
tabBar.querySelectorAll('button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Nudge galleries to reflow (important when content was hidden)
window.dispatchEvent(new Event('resize'));
setTimeout(() => window.dispatchEvent(new Event('resize')), 250);
});
});
});