script_Version2.js

// Mobile nav, contact form demo, gallery filters, and lightbox
document.addEventListener('DOMContentLoaded', () => {
  const nav = document.getElementById('site-nav');
  const toggle = document.getElementById('nav-toggle');
  const year = document.getElementById('year');
  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');

  // Year
  if(year) year.textContent = new Date().getFullYear();

  // Mobile nav toggle
  if(toggle && nav){
    toggle.addEventListener('click', () => {
      const expanded = nav.style.display === 'block';
      nav.style.display = expanded ? '' : 'block';
      toggle.setAttribute('aria-expanded', String(!expanded));
    });
  }

  // Contact form (demo)
  if(form){
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = new FormData(form);
      console.log('Contact form:', Object.fromEntries(data.entries()));
      status.textContent = 'Thanks — your message was received (demo).';
      form.reset();
    });
  }

  // Gallery filter
  const filterButtons = document.querySelectorAll('.filter-btn');
  const items = document.querySelectorAll('.art-item');

  function setActiveFilter(filter){
    filterButtons.forEach(b => b.classList.toggle('active', b.dataset.filter === filter));
    items.forEach(it => {
      const cat = it.dataset.category;
      it.style.display = (filter === 'all' || cat === filter) ? '' : 'none';
    });
  }

  filterButtons.forEach(btn => {
    btn.addEventListener('click', () => setActiveFilter(btn.dataset.filter));
  });

  // Lightbox
  const lightbox = document.getElementById('lightbox');
  const lbImg = document.getElementById('lightbox-img');
  const lbCaption = document.getElementById('lightbox-caption');
  const lbClose = document.getElementById('lightbox-close');

  document.getElementById('gallery-grid').addEventListener('click', (e) => {
    const fig = e.target.closest('figure.art-item');
    if(!fig) return;
    const img = fig.querySelector('img');
    const caption = fig.querySelector('figcaption')?.textContent || '';
    lbImg.src = img.src;
    lbImg.alt = img.alt;
    lbCaption.textContent = caption;
    lightbox.style.display = 'flex';
    lightbox.setAttribute('aria-hidden', 'false');
  });

  function closeLightbox(){
    lightbox.style.display = 'none';
    lightbox.setAttribute('aria-hidden', 'true');
    lbImg.src = '';
  }

  lbClose.addEventListener('click', closeLightbox);
  lightbox.addEventListener('click', (e) => {
    if(e.target === lightbox) closeLightbox();
  });

  // Initialize with "all"
  setActiveFilter('all');
});