script.js

// ─── NAV: scroll shadow + mobile toggle ──────────────────────
const nav = document.getElementById('nav');
const navToggle = document.getElementById('navToggle');
const navLinks  = document.querySelector('.nav-links');

window.addEventListener('scroll', () => {
  nav.classList.toggle('scrolled', window.scrollY > 10);
}, { passive: true });

navToggle.addEventListener('click', () => {
  navLinks.classList.toggle('open');
});

// Close mobile menu when a link is clicked
navLinks.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', () => navLinks.classList.remove('open'));
});

// ─── TYPED TITLE EFFECT ───────────────────────────────────────
const titles = [
  'System Administrator',
  'Software Developer',
  'Problem Solver',
];
let tIdx = 0, cIdx = 0, deleting = false;
const typedEl = document.getElementById('typedText');

function type() {
  const current = titles[tIdx];
  if (!deleting) {
    typedEl.textContent = current.slice(0, ++cIdx);
    if (cIdx === current.length) {
      deleting = true;
      setTimeout(type, 1800);
      return;
    }
  } else {
    typedEl.textContent = current.slice(0, --cIdx);
    if (cIdx === 0) {
      deleting = false;
      tIdx = (tIdx + 1) % titles.length;
    }
  }
  setTimeout(type, deleting ? 50 : 90);
}
type();

// ─── SCROLL-IN ANIMATIONS ────────────────────────────────────
const fadeEls = document.querySelectorAll(
  '.skill-group, .project-card, .timeline-item, .contact-card, .section-title, .section-sub'
);
fadeEls.forEach(el => el.classList.add('fade-in'));

const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

fadeEls.forEach(el => observer.observe(el));

// ─── FOOTER YEAR ──────────────────────────────────────────────
document.getElementById('year').textContent = new Date().getFullYear();

// ─── THEME TOGGLE ─────────────────────────────────────────────
const themeToggle = document.getElementById('themeToggle');
const root        = document.documentElement;

const saved = localStorage.getItem('theme') || 'dark';
root.setAttribute('data-theme', saved);

themeToggle.addEventListener('click', () => {
  const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  root.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
});

// ─── AVATAR FALLBACK ──────────────────────────────────────────
const avatarImg      = document.getElementById('avatarImg');
const avatarFallback = document.getElementById('avatarFallback');

function showFallback() {
  avatarImg.style.display      = 'none';
  avatarFallback.style.display = 'flex';
}
avatarImg.addEventListener('error', showFallback);
// If image already failed before JS ran (cached error)
if (avatarImg.complete && !avatarImg.naturalWidth) showFallback();