main.js

// ===== Static Data =====

const projects = [
  {
    name: "DC-SSAS — Data Center Site Selection & Analytics System",
    description: "A multi-criteria decision support system for identifying optimal data center locations",
    i18nKey: "dclocate",
    techStack: ["React", "Vite", "TypeScript", "FastAPI", "PostgreSQL", "PostGIS", "Redis", "Mapbox GL"],
    url: "https://github.com/Azmvv/dclocate"
  },
  {
    name: "YFinance Analyzer",
    description: "Command-line tool that fetches real-time market data, trains an LSTM model on historical prices, and produces a forecast chart",
    i18nKey: "yfinance",
    techStack: ["Python", "LSTM", "yfinance"],
    url: "https://github.com/Azmvv/YFinance-Analyzer"
  },
  {
    name: "Port Scanner",
    description: "A fast and lightweight TCP port scanner built with Node.js. No external dependencies required.",
    i18nKey: "portscanner",
    techStack: ["Node.js"],
    url: "https://github.com/Azmvv/PortScanner"
  }
];

const certificates = [
  { src: "Certficates/Arc_01.jpeg", i18nKey: "arc1" },
  { src: "Certficates/Arc_02.jpeg", i18nKey: "arc2" },
  { src: "Certficates/Fullstack.jpeg", i18nKey: "fullstack" },
  { src: "Certficates/Google_Cloud.jpeg", i18nKey: "googleCloud" },
  { src: "Certficates/IBM_Cyber.jpeg", i18nKey: "ibmCyber" },
  { src: "Certficates/IBM_IR.jpeg", i18nKey: "ibmIR" },
  { src: "Certficates/codio.png", i18nKey: "codio" }
];

const codeStack = [
  { language: "Python", percentage: 53.4, color: "#3776ab" },
  { language: "JavaScript", percentage: 33.4, color: "#f7df1e" },
  { language: "TypeScript", percentage: 11.3, color: "#3178c6" },
  { language: "HTML", percentage: 1.8, color: "#e34c26" },
  { language: "CSS", percentage: 0.1, color: "#563d7c" }
];

// ===== Theme System =====

function initTheme() {
  try {
    const saved = localStorage.getItem('theme');
    if (saved === 'dark' || saved === 'light') {
      document.documentElement.setAttribute('data-theme', saved);
      return;
    }
  } catch (e) {
    // localStorage not available (private browsing etc.)
  }

  // Check OS preference
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
    document.documentElement.setAttribute('data-theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
}

function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';

  const toggleBtn = document.getElementById('theme-toggle');

  // Use View Transitions API if available for smooth circular reveal
  if (document.startViewTransition && toggleBtn) {
    const rect = toggleBtn.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;
    const endRadius = Math.hypot(
      Math.max(x, window.innerWidth - x),
      Math.max(y, window.innerHeight - y)
    );

    const transition = document.startViewTransition(() => {
      document.documentElement.setAttribute('data-theme', next);
    });

    transition.ready.then(() => {
      document.documentElement.animate(
        { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`] },
        { duration: 500, easing: 'ease-in-out', pseudoElement: '::view-transition-new(root)' }
      );
    });
  } else {
    document.documentElement.setAttribute('data-theme', next);
  }

  try {
    localStorage.setItem('theme', next);
  } catch (e) {
    // localStorage not available
  }
}

// ===== Navigation Smooth Scroll =====

function initNavigation() {
  const navLinks = document.querySelectorAll('.nav-links a[href^="#"]');
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const targetId = link.getAttribute('href').slice(1);
      const target = document.getElementById(targetId);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
      }
    });
  });
}

// ===== Render Functions =====

function renderProjects() {
  const container = document.getElementById('projects-container');
  if (!container) return;

  if (!projects || projects.length === 0) {
    container.innerHTML = `<p class="empty-message">${t('noProjects')}</p>`;
    return;
  }

  container.innerHTML = projects.map(project => {
    const descKey = project.i18nKey ? `projectDesc.${project.i18nKey}` : null;
    const desc = descKey ? t(descKey) : project.description;
    const viewText = t('viewOnGithub');
    return `
    <div class="project-card">
      <div class="project-name">${project.name}</div>
      <div class="project-desc">${desc}</div>
      <div class="project-tech">
        ${project.techStack.map(tech => `<span class="tech-badge">${tech}</span>`).join('')}
      </div>
      <a href="${project.url}" target="_blank" rel="noopener noreferrer" class="project-github-link">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
        ${viewText}
      </a>
    </div>
  `;
  }).join('');
}

function renderCertificates() {
  const container = document.getElementById('certificates-grid');
  if (!container) return;

  container.innerHTML = certificates.map(cert => {
    const alt = t(`certAlt.${cert.i18nKey}`);
    const hint = t('enlargeHint');
    const errMsg = t('imageLoadError');
    return `
    <div class="certificate-item" tabindex="0" role="button" aria-label="${alt} — ${hint}" data-src="${cert.src}" data-alt="${alt}">
      <img src="${cert.src}" alt="${alt}" loading="lazy" onerror="this.parentElement.innerHTML='<div class=\\'certificate-error\\'>${errMsg}</div>'" />
    </div>
  `;
  }).join('');

  // Add click listeners
  container.querySelectorAll('.certificate-item').forEach(item => {
    item.addEventListener('click', () => {
      openLightbox(item.dataset.src, item.dataset.alt);
    });
    item.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        openLightbox(item.dataset.src, item.dataset.alt);
      }
    });
  });
}

function renderCodeStack() {
  const container = document.getElementById('code-stack-bars');
  if (!container) return;

  if (!codeStack || codeStack.length === 0) {
    container.innerHTML = `<p class="empty-message">${t('noData')}</p>`;
    return;
  }

  container.innerHTML = codeStack.map(item => {
    const name = item.i18nKey ? t(item.i18nKey) : item.language;
    return `
    <div class="code-stack-item">
      <div class="code-stack-label">
        <span>${name}</span>
        <span>${item.percentage}%</span>
      </div>
      <div class="code-stack-bar">
        <div class="code-stack-fill" style="background: ${item.color};" data-width="${item.percentage}%"></div>
      </div>
    </div>
  `;
  }).join('');

  // Animate bars after a short delay
  requestAnimationFrame(() => {
    container.querySelectorAll('.code-stack-fill').forEach(bar => {
      bar.style.width = bar.dataset.width;
    });
  });
}

// ===== Lightbox =====

function openLightbox(src, alt) {
  const lightbox = document.getElementById('lightbox');
  const image = document.getElementById('lightbox-image');
  if (!lightbox || !image) return;

  image.src = src;
  image.alt = alt || '';
  lightbox.hidden = false;
  document.body.classList.add('lightbox-open');

  // Focus the close button for accessibility
  const closeBtn = document.getElementById('lightbox-close');
  if (closeBtn) closeBtn.focus();
}

function closeLightbox() {
  const lightbox = document.getElementById('lightbox');
  const image = document.getElementById('lightbox-image');
  if (!lightbox) return;

  lightbox.hidden = true;
  document.body.classList.remove('lightbox-open');
  if (image) {
    image.src = '';
    image.alt = '';
  }
}

function initLightbox() {
  const closeBtn = document.getElementById('lightbox-close');
  const backdrop = document.getElementById('lightbox-backdrop');

  if (closeBtn) {
    closeBtn.addEventListener('click', closeLightbox);
  }

  if (backdrop) {
    backdrop.addEventListener('click', closeLightbox);
  }

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      const lightbox = document.getElementById('lightbox');
      if (lightbox && !lightbox.hidden) {
        closeLightbox();
      }
    }
  });
}

// ===== Scroll Animations =====

function initAnimations() {
  const cards = document.querySelectorAll('.bento-card');

  if (!('IntersectionObserver' in window)) {
    // Fallback: show all cards immediately
    cards.forEach(card => card.classList.add('animate-in'));
    return;
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        // Stagger animation
        setTimeout(() => {
          entry.target.classList.add('animate-in');
        }, index * 80);
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -40px 0px'
  });

  cards.forEach(card => observer.observe(card));
}

// ===== Init =====

document.addEventListener('DOMContentLoaded', () => {
  initLanguage();
  initTheme();
  initNavigation();
  renderProjects();
  renderCertificates();
  renderCodeStack();
  initLightbox();
  initAnimations();

  // Theme toggle button
  const toggleBtn = document.getElementById('theme-toggle');
  if (toggleBtn) {
    toggleBtn.addEventListener('click', toggleTheme);
  }

  // Language selector
  document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      setLanguage(btn.dataset.lang);
    });
  });

  // Set initial active language button
  document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.classList.toggle('active', btn.dataset.lang === currentLang);
  });
});