internetforkids/layouts/shortcodes/addiction-stats.html

{{/* Addiction stats — horizontal bar chart + stat cards for health impact */}}
{{ $lang := .Page.Language.Lang }}

<style>
.addiction-stats { margin: 2.5rem 0; }
.addiction-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
.addiction-chart-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1.5rem; text-align: center;
}
.addiction-chart-card h4 {
  margin: 0 0 1rem; font-size: 0.9rem; color: #334155;
  font-family: system-ui, sans-serif;
}
.addiction-impact-cards {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem;
}
.addiction-impact-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.addiction-impact-num {
  font-size: 1.8rem; font-weight: 800; line-height: 1;
  min-width: 3.5rem; text-align: center;
  font-family: system-ui, sans-serif;
}
.addiction-impact-desc {
  font-size: 0.85rem; color: #475569; line-height: 1.35;
  font-family: system-ui, sans-serif; text-align: left;
}
@media (max-width: 640px) {
  .addiction-stats-grid { grid-template-columns: 1fr; }
}
</style>

<div class="addiction-stats">
  <div class="addiction-stats-grid">
    <div class="addiction-chart-card">
      <h4>{{ 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>
    <div class="addiction-impact-cards">
      <div class="addiction-impact-card">
        <div class="addiction-impact-num" style="color:#667eea">5h</div>
        <div class="addiction-impact-desc">{{ if eq $lang "de" }}Durchschnittliche tägliche Social-Media-Nutzung bei Jugendlichen{{ else if eq $lang "fr" }}Temps moyen quotidien sur les réseaux sociaux chez les adolescents{{ else }}Average daily social media use among teenagers{{ end }}</div>
      </div>
      <div class="addiction-impact-card">
        <div class="addiction-impact-num" style="color:#ef4444">2-3x</div>
        <div class="addiction-impact-desc">{{ if eq $lang "de" }}Höheres Risiko für Suizidgedanken bei Social-Media-Abhängigkeit (Weill Cornell Medicine){{ else if eq $lang "fr" }}Risque accru d'idéation suicidaire en cas de dépendance aux réseaux sociaux (Weill Cornell Medicine){{ else }}Higher risk of suicidal ideation with social media addiction (Weill Cornell Medicine){{ end }}</div>
      </div>
      <div class="addiction-impact-card">
        <div class="addiction-impact-num" style="color:#764ba2">3h+</div>
        <div class="addiction-impact-desc">{{ if eq $lang "de" }}Tägliche Nutzung ab der Angst und Depression deutlich zunehmen (JAMA Psychiatry){{ else if eq $lang "fr" }}D'utilisation quotidienne au-delà desquelles anxiété et dépression augmentent significativement (JAMA Psychiatry){{ else }}Daily use threshold where anxiety and depression increase significantly (JAMA Psychiatry){{ end }}</div>
      </div>
    </div>
  </div>
</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>