script.js

// ===== Data =====
let alumniData = [];
let mentors = [];
let stories = [];
let upcomingEvents = [];
let pastEvents = [];
let testimonials = [];

// ===== State =====
let state = {
  selectedYear: 'all',
  selectedCategory: 'all',
  showContact: null,
  activeMentorTab: 'find',
  activeEventTab: 'upcoming',
  expandedStory: null,
  showAllAlumni: false,
  currentTestimonial: 0,
  selectedMentor: null,
  selectedEvent: null,
};


// ----------------------------------------------------------------------------------------------------------------------------------------



// ===== Mobile Menu =====
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
const menuIcon = document.getElementById('menuIcon');
const closeIcon = document.getElementById('closeIcon');

menuToggle.addEventListener('click', () => {
  mobileMenu.classList.toggle('active');
  menuIcon.classList.toggle('hidden');
  closeIcon.classList.toggle('hidden');
});

document.querySelectorAll('.nav-mobile-link').forEach(link => {
  link.addEventListener('click', () => {
    mobileMenu.classList.remove('active');
    menuIcon.classList.remove('hidden');
    closeIcon.classList.add('hidden');
  });
});

// ===== Theme Toggle =====
const themeToggleButtons = document.querySelectorAll('.theme-toggle');

function setIcon(theme) {
  themeToggleButtons.forEach(button => {
    const sunIcon = button.querySelector('.sun-icon');
    const moonIcon = button.querySelector('.moon-icon');
    if (theme === 'dark') {
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
    } else {
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
    }
  });
}

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
  setIcon(newTheme);
}

themeToggleButtons.forEach(button => {
  button.addEventListener('click', toggleTheme);
});

// Set initial theme on page load
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
setIcon(savedTheme);

// ===== Alumni Directory =====
function renderAlumni() {
  const grid = document.getElementById('alumniGrid');
  const loadMoreContainer = document.getElementById('loadMoreContainer');
  if (grid) {
    const filtered = alumniData.filter(a =>
      (state.selectedYear === 'all' || a.year.toString() === state.selectedYear) &&
      (state.selectedCategory === 'all' || a.category === state.selectedCategory)
    );

    const limit = 6;
    const alumniToShow = state.showAllAlumni ? filtered : filtered.slice(0, limit);

    grid.innerHTML = alumniToShow.map((alumni, index) => `
      <div class="alumni-card fade-in-up" style="animation-delay: ${index * 100}ms;">
        <img src="${alumni.photo}" alt="${alumni.name}" class="alumni-photo">
        <h3 class="alumni-name">${alumni.name}</h3>
        <span class="badge badge-gradient">Class of ${alumni.year}</span>
        <div class="alumni-role">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
          ${alumni.role}
        </div>
        <div class="alumni-role">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path d="M6 12v5c3 3 9 3 12 0v-5"></path></svg>
          ${alumni.company}
        </div>
        <span class="badge badge-outline">${alumni.category}</span>
        <button class="btn btn-primary contact-btn" onclick="toggleContact(${alumni.id})">
          ${state.showContact === alumni.id ? 'Hide Contact' : 'Contact'}
        </button>
        ${state.showContact === alumni.id ? `
          <div class="contact-info fade-in">
            <a href="mailto:${alumni.email}" class="contact-link">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
              ${alumni.email}
            </a>
            <a href="https://${alumni.linkedin}" target="_blank" class="contact-link">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path></svg>
              LinkedIn Profile
            </a>
          </div>
        ` : ''}
      </div>
    `).join('');

    // Handle "Load More" button
    if (loadMoreContainer) {
        loadMoreContainer.innerHTML = '';
        if (filtered.length > limit) {
          if (state.showAllAlumni) {
            loadMoreContainer.innerHTML = `<button class="btn btn-outline load-more-btn" onclick="showLessAlumni()">Show Less</button>`;
          } else {
            loadMoreContainer.innerHTML = `<button class="btn btn-primary load-more-btn" onclick="loadMoreAlumni()">Load More</button>`;
          }
        } 
    }
  }
}

function toggleContact(id) {
  state.showContact = state.showContact === id ? null : id;
  renderAlumni();
}

function loadMoreAlumni() {
  state.showAllAlumni = true;
  renderAlumni();
}

function showLessAlumni() {
  state.showAllAlumni = false;
  renderAlumni();
  const directorySection = document.getElementById('directory');
  if (directorySection) {
    directorySection.scrollIntoView({ behavior: 'smooth' });
  }
}

document.querySelectorAll('#yearFilters .filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('#yearFilters .filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    state.selectedYear = btn.dataset.filter;
    state.showAllAlumni = false; // Reset on filter change
    renderAlumni();
  });
});

document.querySelectorAll('#categoryFilters .filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('#categoryFilters .filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    state.selectedCategory = btn.dataset.filter;
    state.showAllAlumni = false; // Reset on filter change
    renderAlumni();
  });
});

// ===== Mentor Connect =====
async function renderMentors() {
  const content = document.getElementById('mentorTabContent');
  if (content) {
    const currentContent = content.firstChild;

    if (currentContent) {
      currentContent.classList.remove('fade-in');
      currentContent.classList.add('fade-out');
      await new Promise(resolve => setTimeout(resolve, 300)); // Wait for fade-out animation
    }

    if (state.activeMentorTab === 'find') {
      content.innerHTML = `<div class="mentor-grid fade-in">${mentors.map((m, index) => `
        <div class="mentor-card fade-in-up" style="animation-delay: ${index * 100}ms;">
          <img src="${m.photo}" alt="${m.name}" class="alumni-photo">
          <h3 class="alumni-name">${m.name}</h3>
          <p style="font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">${m.expertise}</p>
          <p class="alumni-role" style="font-weight: 500; margin-bottom: 1rem;">${m.company}</p>
          <span class="badge" style="background: ${m.available ? 'hsl(142, 76%, 36%)' : 'hsl(220, 10%, 50%)'}; color: white; margin-bottom: 1rem;">${m.available ? 'Available' : 'Busy'}</span>
          <button class="btn btn-primary w-full contact-btn" onclick='openScheduleModal(${JSON.stringify(m)})' ${!m.available ? 'disabled' : ''}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
            Connect
          </button>
        </div>
      `).join('')}</div>`;
    } else {
      content.innerHTML = `<div class="become-mentor-card fade-in">
        <div class="mentor-icon-wrapper"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg></div>
        <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">Share Your Journey</h3>
        <p style="color: var(--muted-foreground); margin-bottom: 2rem;">Help the next generation of students by sharing your knowledge and experiences.</p>
        <div class="benefit-list">${['Share your industry insights', 'Guide students in their career path', 'Build meaningful connections', 'Give back to the community'].map(b => `
          <div class="benefit-item"><div class="benefit-dot"><div class="benefit-dot-inner"></div></div><span>${b}</span></div>
        `).join('')}</div>
        <a href="/pages/auth.html"><button class="btn btn-primary btn-lg glow">Apply to Become a Mentor</button></a>
      </div>`;
    }
  }
}

document.querySelectorAll('[data-tab]').forEach(btn => {
  btn.addEventListener('click', () => {
    const section = btn.closest('section').id;
    if (section === 'mentorship') {
      document.querySelectorAll('#mentorship .tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      state.activeMentorTab = btn.dataset.tab;
      renderMentors();
    } else if (section === 'events') {
      document.querySelectorAll('#events .tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      state.activeEventTab = btn.dataset.tab;
      renderEvents();
    }
  });
});

// ===== Success Stories =====
function renderStories() {
  const container = document.getElementById('storiesContainer');
  if (container) {
    container.innerHTML = stories.map((s, index) => `
      <div class="story-card fade-in-up" style="animation-delay: ${index * 150}ms;">
        <div class="story-header">
          <img src="${s.photo}" alt="${s.name}" class="story-photo">
          <div class="story-title-section">
            <div class="story-icon-name"><div class="story-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></div><h3 class="story-name">${s.name}</h3></div>
            <h4 class="story-title gradient-text">${s.title}</h4>
            <p class="story-summary">${s.summary}</p>
          </div>
        </div>
        ${state.expandedStory === s.id ? `<div class="story-full fade-in">${s.fullStory}</div>` : ''}
        <button class="expand-btn" onclick="toggleStory(${s.id})">
          ${state.expandedStory === s.id ? 'Show Less' : 'Read More'}
          <svg class="expand-icon ${state.expandedStory === s.id ? 'rotated' : ''}" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>
      </div>
    `).join('');
  }
}

function toggleStory(id) {
  state.expandedStory = state.expandedStory === id ? null : id;
  renderStories();
}

// ===== FAQ =====
const faqAccordion = document.getElementById('faqAccordion');
if (faqAccordion) {
  faqAccordion.innerHTML = faqs.map((faq, i) => `
    <div class="accordion-item fade-in-up" style="animation-delay: ${i * 100}ms;">
      <button class="accordion-header" onclick="toggleAccordion(${i})">${faq.question}<svg class="expand-icon" id="icon-${i}" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
      <div class="accordion-content" id="content-${i}">${faq.answer}</div>
    </div>
  `).join('');
}

function toggleAccordion(index) {
  const content = document.getElementById(`content-${index}`);
  const icon = document.getElementById(`icon-${index}`);
  content.classList.toggle('active');
  icon.classList.toggle('rotated');
}

// ===== Events =====
async function renderEvents() {
  const events = state.activeEventTab === 'upcoming' ? upcomingEvents : pastEvents;
  const eventsGrid = document.getElementById('eventsGrid');
  if (eventsGrid) {
    const currentContent = eventsGrid.firstChild;

    if (currentContent) {
      currentContent.classList.remove('fade-in');
      currentContent.classList.add('fade-out');
      await new Promise(resolve => setTimeout(resolve, 300)); // Wait for fade-out animation
    }

    eventsGrid.innerHTML = `<div class="alumni-grid fade-in">${events.map((e, index) => `
      <div class="event-card fade-in-up" style="animation-delay: ${index * 100}ms;">
        <div class="event-header">
          <span class="event-type-badge">${e.type === 'online' ? '🌐 Online' : '📍 In-Person'}</span>
          <span class="event-attendees">👤 ${e.attendees}</span>
        </div>
        <h3 class="event-title">${e.title}</h3>
        <div class="event-details">
          <div class="event-detail-item">🗓️ ${e.date}</div>
          <div class="event-detail-item">📍 ${e.location}</div>
        </div>
        <p class="event-description">${e.description}</p>
        <div class="event-speaker"><div class="speaker-avatar"></div><div class="speaker-info"><div class="speaker-label">Speaker</div><div class="speaker-name">${e.speaker}</div></div></div>
        <button class="btn ${state.activeEventTab === 'upcoming' ? 'btn-primary' : 'btn-outline'} register-btn" ${state.activeEventTab === 'upcoming' ? `onclick='openRegistrationModal(${JSON.stringify(e)})'` : ''}>${state.activeEventTab === 'upcoming' ? 'Register Now' : 'View Recording'}</button>
      </div>
    `).join('')}</div>`;
  }
}

// ===== Testimonials Carousel =====
let testimonialInterval;

function renderTestimonials() {
  const carousel = document.getElementById('testimonialCarousel');
  const dotsContainer = document.getElementById('testimonialDots');

  if (carousel && dotsContainer) {
    carousel.innerHTML = testimonials.map(t => `
      <div class="testimonial-card" data-id="${t.id}">
        <p class="testimonial-quote">"${t.quote}"</p>
        <div class="testimonial-author">
          <img src="${t.photo}" alt="${t.name}" class="testimonial-photo">
          <div class="testimonial-author-info">
            <h4 class="testimonial-name">${t.name}</h4>
            <p class="testimonial-role">${t.role}</p>
          </div>
        </div>
      </div>
    `).join('');

    dotsContainer.innerHTML = testimonials.map((_, i) => 
      `<button class="carousel-dot ${i === state.currentTestimonial ? 'active' : ''}" onclick="showTestimonial(${i})"></button>`
    ).join('');

    showTestimonial(state.currentTestimonial, true);
  }
}

function showTestimonial(index, isInitial = false) {
  state.currentTestimonial = index;
  const carousel = document.getElementById('testimonialCarousel');
  const dots = document.querySelectorAll('#testimonialDots .carousel-dot');
  const cards = document.querySelectorAll('.testimonial-card');
  
  if (carousel) {
    const offset = -index * 100;
    carousel.style.transform = `translateX(${offset}%)`;
    if (!isInitial) {
      carousel.style.transition = 'transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1)';
    }
    dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
    cards.forEach((card, i) => card.classList.toggle('active', i === index));
  }
  
  clearInterval(testimonialInterval);
  testimonialInterval = setInterval(() => showTestimonial((state.currentTestimonial + 1) % testimonials.length), 5000);
}

// ===== Scheduling Modal =====
function openScheduleModal(mentor) {
  if (!mentor.available) return;
  state.selectedMentor = mentor;
  const modal = document.getElementById('scheduleModal');
  const step1 = document.getElementById('modalStep1');
  const step2 = document.getElementById('modalStep2');
  
  document.getElementById('modalMentorName').textContent = mentor.name;
  
  // Reset to step 1
  step1.classList.remove('hidden');
  step2.classList.add('hidden');
  document.getElementById('sessionDate').value = '';
  document.getElementById('sessionTime').value = '';

  modal.classList.remove('hidden');
}

function closeScheduleModal() {
  const modal = document.getElementById('scheduleModal');
  modal.classList.add('hidden');
  state.selectedMentor = null;
}

function confirmSchedule(event) {
  const date = document.getElementById('sessionDate').value;
  const time = document.getElementById('sessionTime').value;

  if (!date || !time) {
    alert('Please select a date and time.');
    return;
  }

  const step1 = document.getElementById('modalStep1');
  const step2 = document.getElementById('modalStep2');

  document.getElementById('mentorEmail').textContent = state.selectedMentor.email;
  document.getElementById('mentorPhone').textContent = state.selectedMentor.phone;

  step1.classList.add('hidden');
  step2.classList.remove('hidden');
}

// ===== Event Registration Modal =====
function openRegistrationModal(event) {
  state.selectedEvent = event;
  const modal = document.getElementById('registrationModal');
  const step1 = document.getElementById('regModalStep1');
  const step2 = document.getElementById('regModalStep2');

  document.getElementById('modalEventTitle').textContent = `"${event.title}"`;

  // Reset to step 1
  step1.classList.remove('hidden');
  step2.classList.add('hidden');
  document.getElementById('regName').value = '';
  document.getElementById('regEmail').value = '';
  document.getElementById('regPhone').value = '';
  document.getElementById('rsvpCheckbox').checked = false;

  modal.classList.remove('hidden');
}

function closeRegistrationModal() {
  const modal = document.getElementById('registrationModal');
  modal.classList.add('hidden');
  state.selectedEvent = null;
}

function confirmRegistration(event) {
  const name = document.getElementById('regName').value;
  const email = document.getElementById('regEmail').value;

  if (!name || !email) {
    alert('Please fill in your Name and Email.');
    return;
  }

  const rsvp = document.getElementById('rsvpCheckbox').checked;
  const step1 = document.getElementById('regModalStep1');
  const step2 = document.getElementById('regModalStep2');
  const confirmationTitle = document.getElementById('confirmationTitle');
  const confirmationMessage = document.getElementById('confirmationMessage');

  if (rsvp) {
    confirmationTitle.textContent = "Registered & RSVP'd!";
    confirmationMessage.textContent = "Your spot is confirmed. We look forward to seeing you!";
  } else {
    confirmationTitle.textContent = "Registration Successful!";
    confirmationMessage.textContent = "You will receive a confirmation email shortly.";
  }

  step1.classList.add('hidden');
  step2.classList.remove('hidden');
}

// ===== Initialize Page =====
async function initializeApp() {
  try {
    const response = await fetch('/data.json');
    const data = await response.json();
    alumniData = data.alumniData;
    mentors = data.mentors;
    stories = data.stories;
    upcomingEvents = data.upcomingEvents;
    pastEvents = data.pastEvents;
    testimonials = data.testimonials;

    renderAlumni();
    renderMentors();
    renderStories();
    renderEvents();
    renderTestimonials();
  } catch (error) {
    console.error("Failed to load data:", error);
  }
}

initializeApp();