document.addEventListener('DOMContentLoaded', function() {

  const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'];

  // Attendance Chart
  const attCtx = document.getElementById('attendanceChart').getContext('2d');
  new Chart(attCtx, {
    type: 'bar',
    data: {
      labels: months,
      datasets: [
        {
          label: 'A1-1',
          data: [88, 90, 85, 91, 93, 92],
          backgroundColor: '#00E5FF',
          borderRadius: 6,
          barPercentage: 0.7
        },
        {
          label: 'A1-2',
          data: [82, 78, 75, 70, 74, 76],
          backgroundColor: '#EAB308',
          borderRadius: 6,
          barPercentage: 0.7
        },
        {
          label: 'B1-1',
          data: [85, 87, 90, 88, 91, 89],
          backgroundColor: '#22C55E',
          borderRadius: 6,
          barPercentage: 0.7
        },
        {
          label: 'B1-2',
          data: [80, 75, 70, 65, 63, 61],
          backgroundColor: '#EF4444',
          borderRadius: 6,
          barPercentage: 0.7
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } }
      },
      scales: {
        y: {
          beginAtZero: false,
          min: 40,
          max: 100,
          ticks: { callback: v => v + '%' },
          grid: { color: '#F2F4F7' }
        },
        x: { grid: { display: false } }
      }
    }
  });

  // Scores Chart
  const scoresCtx = document.getElementById('scoresChart').getContext('2d');
  new Chart(scoresCtx, {
    type: 'line',
    data: {
      labels: months,
      datasets: [
        {
          label: 'A1-1',
          data: [68, 70, 72, 74, 76, 78],
          borderColor: '#00E5FF',
          backgroundColor: 'rgba(0,229,255,.1)',
          fill: true,
          tension: 0.4,
          pointRadius: 4
        },
        {
          label: 'A1-2',
          data: [62, 60, 58, 61, 63, 64],
          borderColor: '#EAB308',
          backgroundColor: 'rgba(234,179,8,.1)',
          fill: true,
          tension: 0.4,
          pointRadius: 4
        },
        {
          label: 'B1-1',
          data: [72, 74, 76, 78, 80, 81],
          borderColor: '#22C55E',
          backgroundColor: 'rgba(34,197,94,.1)',
          fill: true,
          tension: 0.4,
          pointRadius: 4
        },
        {
          label: 'B1-2',
          data: [60, 56, 54, 50, 48, 52],
          borderColor: '#EF4444',
          backgroundColor: 'rgba(239,68,68,.1)',
          fill: true,
          tension: 0.4,
          pointRadius: 4
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } }
      },
      scales: {
        y: {
          beginAtZero: false,
          min: 30,
          max: 100,
          grid: { color: '#F2F4F7' }
        },
        x: { grid: { display: false } }
      }
    }
  });

  // Smooth scroll for nav links
  document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
        this.classList.add('active');
      }
    });
  });

});