document.addEventListener('DOMContentLoaded', function() {
  // Tab functionality
  const tabButtons = document.querySelectorAll('.tab-btn');
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const tabId = button.getAttribute('data-tab');
      
      // Remove active class from all buttons
      tabButtons.forEach(btn => btn.classList.remove('active'));
      // Add active class to clicked button
      button.classList.add('active');
      
      // Hide all tab contents
      document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.add('hidden');
      });
      
      // Show the selected tab content
      document.getElementById(tabId).classList.remove('hidden');
    });
  });

  // Simulate loading content for demo purposes
  setTimeout(() => {
    const tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(tab => {
      tab.innerHTML = `<p>This is a demo of the ${tab.id} section. In a real application, this would be populated with dynamic content.</p>`;
    });

    const eventsGrid = document.querySelector('.events-grid');
    if (eventsGrid) {
      eventsGrid.innerHTML = `
        <div class="card">
          <h3>Campus Hackathon</h3>
          <p>May 15, 2023 | Computer Lab</p>
        </div>
        <div class="card">
          <h3>Guest Lecture: AI Ethics</h3>
          <p>May 18, 2023 | Auditorium</p>
        </div>
      `;
    }

    const teamGrid = document.querySelector('.team-grid');
    if (teamGrid) {
      teamGrid.innerHTML = `
        <div class="card">
          <h3>Alex Johnson</h3>
          <p>Project Lead</p>
        </div>
        <div class="card">
          <h3>Sam Wilson</h3>
          <p>Frontend Developer</p>
        </div>
        <div class="card">
          <h3>Taylor Smith</h3>
          <p>Backend Developer</p>
        </div>
      `;
    }
  }, 300);
});