// Utility: query helpers
const $ = (sel, ctx = document) => ctx.querySelector(sel);
const $$ = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));

// Mobile navigation toggle
const menuBtn = $('#menuBtn');
const mobileNav = $('#mobileNav');
if (menuBtn && mobileNav) {
  menuBtn.addEventListener('click', () => {
    const expanded = menuBtn.getAttribute('aria-expanded') === 'true';
    menuBtn.setAttribute('aria-expanded', String(!expanded));
    mobileNav.classList.toggle('hidden');
  });
}

// Smooth scroll for in-page links
$$('a[href^="#"]').forEach(a => {
  a.addEventListener('click', e => {
    const href = a.getAttribute('href');
    if (!href || href === '#') return;
    const target = $(href);
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // Close mobile menu after navigation
      if (!mobileNav.classList.contains('hidden')) {
        mobileNav.classList.add('hidden');
        menuBtn.setAttribute('aria-expanded', 'false');
      }
    }
  });
});

// Contact form handler
const form = $('#contactForm');
if (form) {
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    // Minimal client validation example
    if (!data.email || !/^\S+@\S+\.\S+$/.test(data.email)) {
      alert('Please enter a valid email.');
      return;
    }
    if (!data.name || data.name.trim().length < 2) {
      alert('Please enter your name.');
      return;
    }
    if (!data.message || data.message.trim().length < 10) {
      alert('Please enter a longer message (10+ characters).');
      return;
    }

    // Simulated submit (replace with real fetch to your backend)
    console.log('Submitting contact form:', data);
    form.reset();
    alert('Thanks! Your message has been sent.');
  });
}

// Set footer year
const yearEl = $('#year');
if (yearEl) yearEl.textContent = String(new Date().getFullYear());

// Optional: Log Tailwind colors for quick inspection in dev
console.log('Primary 500:', getComputedStyle(document.documentElement).getPropertyValue('--tw-color-primary-500') || 'N/A');
console.log('Secondary 500:', getComputedStyle(document.documentElement).getPropertyValue('--tw-color-secondary-500') || 'N/A');