script.js

// ===== Utilities =====
const $ = (sel, ctx = document) => ctx.querySelector(sel);
const $$ = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));

// ===== Theme Toggle (with localStorage) =====
(function themeInit() {
  const root = document.documentElement;
  const saved = localStorage.getItem("theme");
  if (saved === "light" || saved === "dark") {
    root.classList.toggle("theme-light", saved === "light");
    root.classList.toggle("theme-dark", saved === "dark");
  }
})();

$('#themeToggle').addEventListener('click', () => {
  const root = document.documentElement;
  const isDark = root.classList.contains('theme-dark');
  const next = isDark ? 'light' : 'dark';
  root.classList.toggle('theme-dark', next === 'dark');
  root.classList.toggle('theme-light', next === 'light');
  localStorage.setItem('theme', next);
});

// ===== Mobile nav =====
const navToggle = $('.nav__toggle');
const navMenu = $('#navMenu');
navToggle.addEventListener('click', () => {
  const open = navMenu.classList.toggle('is-open');
  navToggle.setAttribute('aria-expanded', String(open));
});

// Close menu on link click (mobile)
$$('#navMenu a').forEach(a => a.addEventListener('click', () => navMenu.classList.remove('is-open')));

// ===== Typing effect =====
const phrases = [
  'useful ML tools.',
  'interpretable models.',
  'snappy data apps.',
  'clean visualizations.'
];
const typingEl = $('.typing');
let pi = 0, ci = 0, deleting = false;
function typeLoop() {
  const phrase = phrases[pi];
  typingEl.textContent = phrase.slice(0, ci) + (ci === phrase.length && !deleting ? '|' : '');
  if (!deleting && ci < phrase.length) ci++;
  else if (!deleting && ci === phrase.length) deleting = true;
  else if (deleting && ci > 0) ci--;
  else { deleting = false; pi = (pi + 1) % phrases.length; }
  setTimeout(typeLoop, deleting ? 50 : 90);
}
if (typingEl) typeLoop();

// ===== Reveal on scroll =====
const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('is-visible');
      io.unobserve(e.target);
    }
  })
}, { threshold: 0.12 });
$$('.reveal').forEach(el => io.observe(el));

// ===== Project filters & modal =====
const filterButtons = $$('.filters .chip');
const cards = $$('.card');

filterButtons.forEach(btn => btn.addEventListener('click', () => {
  filterButtons.forEach(b => b.classList.remove('is-active'));
  btn.classList.add('is-active');
  const tag = btn.dataset.filter;
  cards.forEach(card => {
    const tags = card.dataset.tags.split(' ');
    const show = tag === 'all' || tags.includes(tag);
    card.style.display = show ? '' : 'none';
  });
}));

// Modal logic
const modal = $('#projectModal');
const modalTitle = $('#modalTitle');
const modalDesc = $('#modalDesc');
const modalLinks = $('#modalLinks');
let lastFocused = null;

function openModal(card) {
  lastFocused = document.activeElement;
  modalTitle.textContent = card.dataset.title || card.querySelector('h3').textContent;
  modalDesc.textContent = card.dataset.desc || '';
  modalLinks.innerHTML = '';
  try {
    const links = JSON.parse(card.dataset.links || '[]');
    links.forEach(l => {
      const a = document.createElement('a');
      a.className = 'btn btn--primary';
      a.href = l.href; a.textContent = l.label;
      a.target = '_blank'; a.rel = 'noopener noreferrer';
      modalLinks.appendChild(a);
    })
  } catch {}
  modal.setAttribute('aria-hidden', 'false');
  // focus trap
  $('.modal__close').focus();
  document.addEventListener('keydown', escClose);
}
function closeModal() {
  modal.setAttribute('aria-hidden', 'true');
  document.removeEventListener('keydown', escClose);
  if (lastFocused) lastFocused.focus();
}
function escClose(e){ if (e.key === 'Escape') closeModal(); }

cards.forEach(card => {
  card.addEventListener('click', () => openModal(card));
  card.addEventListener('keypress', (e) => { if (e.key === 'Enter') openModal(card); });
});

$$('[data-close]').forEach(el => el.addEventListener('click', closeModal));

// ===== Contact form (client-side validate + fake submit) =====
const form = $('#contactForm');
const statusEl = $('#formStatus');

function validateInput(input) {
  const errorEl = input.parentElement.querySelector('.error');
  let msg = '';
  if (input.validity.valueMissing) msg = 'This field is required.';
  else if (input.type === 'email' && input.validity.typeMismatch) msg = 'Enter a valid email address.';
  else if (input.name === 'message' && input.value.trim().length < 10) msg = 'Please write at least 10 characters.';
  errorEl.textContent = msg;
  return !msg;
}

$$('#contactForm input, #contactForm textarea').forEach(i => {
  i.addEventListener('blur', () => validateInput(i));
  i.addEventListener('input', () => validateInput(i));
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const inputs = [$('#name'), $('#email'), $('#message')];
  const ok = inputs.every(validateInput);
  if (!ok) { statusEl.textContent = 'Fix the errors above and try again.'; statusEl.style.color = 'var(--warn)'; return; }

  statusEl.textContent = 'Sending…';
  statusEl.style.color = '';
  setTimeout(() => {
    statusEl.textContent = 'Thanks! Your message has been sent.';
    statusEl.style.color = 'var(--ok)';
    form.reset();
  }, 600);
});

// ===== Back to top =====
const backToTop = $('#backToTop');
window.addEventListener('scroll', () => {
  backToTop.classList.toggle('is-visible', window.scrollY > 600);
});
backToTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

// ===== Footer year =====
$('#year').textContent = new Date().getFullYear();