port.js

// =======================
// 1. Tab Switching in About Section
// =======================
const tabLinks = document.querySelectorAll('.tab-links');
const tabContents = document.querySelectorAll('.tab-contents');

tabLinks.forEach((tabLink, index) => {
  tabLink.addEventListener('click', (event) => {
    tabLinks.forEach(link => link.classList.remove('active-link'));
    tabContents.forEach(content => content.classList.remove('active-tab'));

    tabLink.classList.add('active-link');
    tabContents[index].classList.add('active-tab');
  });
});

// =======================
// 2. Responsive Navigation Menu Toggle
// =======================
const menuIcon = document.getElementById('menu-icon'); // Make sure this ID exists
const navList = document.querySelector('nav ul');

if (menuIcon) {
  menuIcon.addEventListener('click', () => {
    navList.classList.toggle('active');
  });
}

// =======================
// 3. Contact Form Submission via EmailJS
// =======================
document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById('contact-form'); // Make sure form ID matches
  const msg = document.getElementById('msg');

  // Load EmailJS SDK
  const script = document.createElement('script');
  script.src = "https://cdn.emailjs.com/dist/email.min.js";
  script.onload = () => {
    emailjs.init("rYTFTsdnvpXNbYE0b"); // ✅ Your Public Key

    if (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();

        emailjs.sendForm('service_jsnj2x9', 'template_ul5bvth', this)
          .then(() => {
            msg.innerText = "Message sent successfully!";
            msg.style.color = "#61b752";
            msg.style.display = "block";
            form.reset();
            setTimeout(() => msg.innerText = "", 5000);
          }, (error) => {
            msg.innerText = "Failed to send. Please try again.";
            msg.style.color = "red";
            msg.style.display = "block";
            console.error('EmailJS error:', error);
          });
      });
    }
  };
  document.head.appendChild(script);
});
// =======================
// 4. Scroll-to-Top Button
// =======================
const scrollTopBtn = document.getElementById('scroll-top-btn');

if (scrollTopBtn) {
  window.addEventListener('scroll', () => {
    scrollTopBtn.style.display = window.scrollY > 300 ? 'block' : 'none';
  });

  scrollTopBtn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
}

// =======================
// 5. Smooth Scrolling for Anchor Links
// =======================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});