{{/* Addiction stats charts — visual representation of key social media addiction statistics */}}
{{ $lang := .Page.Language.Lang }}

<style>
.addiction-stats { margin: 2.5rem 0; }
.addiction-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.addiction-stat-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1.5rem; text-align: center;
}
.addiction-stat-card h4 {
  margin: 0 0 1rem; font-size: 0.9rem; color: #334155;
  font-family: system-ui, sans-serif;
}
.addiction-stat-card canvas { max-height: 220px; }
@media (max-width: 640px) {
  .addiction-stats-grid { grid-template-columns: 1fr; }
}
</style>

<div class="addiction-stats">
  <div class="addiction-stats-grid">
    <div class="addiction-stat-card">
      <h4>{{ if eq $lang "de" }}Nutzung & Suchtempfinden{{ else if eq $lang "fr" }}Utilisation & sentiment d'addiction{{ else }}Usage & Perceived Addiction{{ end }}</h4>
      <canvas id="addiction-usage-chart"></canvas>
    </div>
    <div class="addiction-stat-card">
      <h4>{{ if eq $lang "de" }}Gesundheitliche Auswirkungen{{ else if eq $lang "fr" }}Impact sur la santé{{ else }}Health Impact{{ end }}</h4>
      <canvas id="addiction-health-chart"></canvas>
    </div>
  </div>
</div>

<script src="{{ "js/chart.umd.min.js" | relURL }}"></script>
<script>
(function() {
  const lang = '{{ $lang }}';

  const labels = {
    usage: {
      en: ['Use social media\nregularly', 'Feel addicted', 'Sleep affected', '3+ hours/day'],
      de: ['Nutzen Social Media\nregelmäßig', 'Fühlen sich\nsüchtig', 'Schlaf\nbeeinträchtigt', '3+ Stunden/Tag'],
      fr: ['Utilisent les\nréseaux sociaux', 'Se sentent\ndépendants', 'Sommeil\naffecté', '3+ heures/jour']
    },
    health: {
      en: ['Higher anxiety\n& depression\n(3h+/day)', 'Suicidal ideation\nrisk increase', 'Avg. daily\nscreen time (h)'],
      de: ['Mehr Angst &\nDepression\n(3h+/Tag)', 'Erhöhtes Risiko\nSuizidgedanken', 'Bildschirmzeit\npro Tag (Std.)'],
      fr: ['Anxiété &\ndépression\n(3h+/jour)', 'Risque accru\nd\'idéation\nsuicidaire', 'Temps d\'écran\nquotidien (h)']
    }
  };

  // Usage & Addiction doughnut-style horizontal bar
  new Chart(document.getElementById('addiction-usage-chart'), {
    type: 'bar',
    data: {
      labels: labels.usage[lang] || labels.usage.en,
      datasets: [{
        data: [95, 47, 45, 63],
        backgroundColor: ['#667eea', '#764ba2', '#a78bfa', '#c4b5fd'],
        borderRadius: 6,
        barThickness: 28
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: function(ctx) { return ctx.raw + '%'; }
          }
        }
      },
      scales: {
        x: {
          max: 100,
          ticks: {
            callback: function(v) { return v + '%'; },
            font: { size: 11, family: 'system-ui' }
          },
          grid: { color: '#f1f5f9' }
        },
        y: {
          ticks: {
            font: { size: 11, family: 'system-ui' },
            autoSkip: false
          },
          grid: { display: false }
        }
      }
    }
  });

  // Health impact - mixed chart
  new Chart(document.getElementById('addiction-health-chart'), {
    type: 'bar',
    data: {
      labels: labels.health[lang] || labels.health.en,
      datasets: [{
        data: [100, 250, 5],
        backgroundColor: ['#ef4444', '#dc2626', '#667eea'],
        borderRadius: 6,
        barThickness: 36
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: function(ctx) {
              if (ctx.dataIndex === 0) return (lang === 'de' ? 'Deutlich erhöht' : lang === 'fr' ? 'Significativement plus élevé' : 'Significantly higher');
              if (ctx.dataIndex === 1) return '2-3x';
              return ctx.raw + 'h';
            }
          }
        }
      },
      scales: {
        x: {
          ticks: {
            font: { size: 11, family: 'system-ui' },
            autoSkip: false
          },
          grid: { display: false }
        },
        y: {
          display: false
        }
      }
    },
    plugins: [{
      afterDatasetsDraw: function(chart) {
        const ctx = chart.ctx;
        chart.data.datasets[0].data.forEach(function(value, index) {
          const meta = chart.getDatasetMeta(0);
          const bar = meta.data[index];
          ctx.save();
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';
          ctx.fillStyle = '#fff';
          ctx.font = 'bold 14px system-ui';
          const label = index === 0 ? '↑' : index === 1 ? '2-3x' : '5h';
          ctx.fillText(label, bar.x, bar.y + bar.height / 2 + 7);
          ctx.restore();
        });
      }
    }]
  });
})();
</script>