javascript.js

const header = document.querySelector(".site-header");
const navLinks = document.querySelectorAll('.site-nav a[href^="#"]');
const sections = document.querySelectorAll("main section[id]");
const animatedCards = document.querySelectorAll(
  ".glass-card, .portfolio-card, .stat-card, .hero-panel"
);

const themeToggle = document.getElementById("themeToggle");
const themeToggleIcon = document.querySelector(".theme-toggle-icon");
const themeToggleText = document.querySelector(".theme-toggle-text");

function setActiveNav() {
  let currentSectionId = "";

  sections.forEach((section) => {
    const rect = section.getBoundingClientRect();
    if (rect.top <= 140 && rect.bottom >= 140) {
      currentSectionId = section.id;
    }
  });

  navLinks.forEach((link) => {
    const href = link.getAttribute("href");
    const isActive = href === `#${currentSectionId}`;

    link.classList.toggle("active", isActive);
    if (isActive) {
      link.setAttribute("aria-current", "page");
    } else {
      link.removeAttribute("aria-current");
    }
  });
}

function setHeaderScrolledState() {
  if (!header) return;
  header.classList.toggle("scrolled", window.scrollY > 24);
}

function revealOnScroll() {
  const triggerPoint = window.innerHeight * 0.9;

  animatedCards.forEach((card) => {
    const rect = card.getBoundingClientRect();
    if (rect.top < triggerPoint) {
      card.classList.add("revealed");
    }
  });
}

function smoothScrollToSection(event) {
  const link = event.currentTarget;
  const targetId = link.getAttribute("href");

  if (!targetId || !targetId.startsWith("#")) return;

  const targetSection = document.querySelector(targetId);
  if (!targetSection) return;

  event.preventDefault();

  const headerOffset = header ? header.offsetHeight + 12 : 80;
  const targetPosition =
    targetSection.getBoundingClientRect().top + window.scrollY - headerOffset;

  window.scrollTo({
    top: targetPosition,
    behavior: "smooth",
  });
}

function initNavEvents() {
  navLinks.forEach((link) => {
    link.addEventListener("click", smoothScrollToSection);
  });
}

function initRevealState() {
  animatedCards.forEach((card, index) => {
    card.style.transitionDelay = `${Math.min(index * 50, 220)}ms`;
  });
}

function getPreferredTheme() {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "light" || savedTheme === "dark") {
    return savedTheme;
  }

  const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
  return prefersLight ? "light" : "dark";
}

function applyTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);

  if (themeToggleIcon) {
    themeToggleIcon.textContent = theme === "light" ? "☀️" : "🌙";
  }

  if (themeToggleText) {
    themeToggleText.textContent = theme === "light" ? "Light" : "Dark";
  }

  if (themeToggle) {
    themeToggle.setAttribute(
      "aria-label",
      theme === "light" ? "Switch to dark theme" : "Switch to light theme"
    );
    themeToggle.setAttribute(
      "title",
      theme === "light" ? "Switch to dark theme" : "Switch to light theme"
    );
  }
}

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute("data-theme") || "dark";
  const nextTheme = currentTheme === "dark" ? "light" : "dark";

  applyTheme(nextTheme);
  localStorage.setItem("theme", nextTheme);
}

function initTheme() {
  const theme = getPreferredTheme();
  applyTheme(theme);

  if (themeToggle) {
    themeToggle.addEventListener("click", toggleTheme);
  }
}

function handleScroll() {
  setHeaderScrolledState();
  setActiveNav();
  revealOnScroll();
}

document.addEventListener("DOMContentLoaded", () => {
  initTheme();
  initNavEvents();
  initRevealState();
  handleScroll();
});

window.addEventListener("scroll", handleScroll, { passive: true });
window.addEventListener("resize", handleScroll);