{{/* Horizontal bar chart — teen social media usage percentages */}}
{{ $lang := .Page.Language.Lang }}
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;text-align:center;margin:2rem 0">
  <h4 style="margin:0 0 1rem;font-size:0.9rem;color:#334155;font-family:system-ui,sans-serif">{{ if eq $lang "de" }}Jugendliche & Social Media{{ else if eq $lang "fr" }}Adolescents & réseaux sociaux{{ else }}Teens & Social Media{{ end }}</h4>
  <canvas id="addiction-usage-chart"></canvas>
</div>
<script src="{{ "js/chart.umd.min.js" | relURL }}"></script>
<script>
(function() {
  const lang = '{{ $lang }}';
  const labels = {
    en: ['Use social media\nregularly', 'Feel addicted', 'Sleep negatively\naffected', '3+ hours/day'],
    de: ['Nutzen Social Media\nregelmäßig', 'Fühlen sich\nsüchtig', 'Schlaf negativ\nbeeinflusst', '3+ Stunden/Tag'],
    fr: ['Utilisent les\nréseaux sociaux', 'Se sentent\ndépendants', 'Sommeil\nnégativement affecté', '3+ heures/jour']
  };
  new Chart(document.getElementById('addiction-usage-chart'), {
    type: 'bar',
    data: {
      labels: labels[lang] || labels.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 } }
      }
    }
  });
})();
</script>