redesign stats: chart + stat cards, add crosslinks between articles

Replace broken health impact chart (mixed units) with stat cards showing
5h avg, 2-3x risk, 3h+ threshold. Keep horizontal bar for percentages.
Add crosslinks at end of addiction article → global overview + France ban.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

layouts/shortcodes/addiction-stats.html

@@ -1,20 +1,35 @@
-{{/* Addiction stats charts — visual representation of key social media addiction statistics */}}
+{{/* 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;
+  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
 }
-.addiction-stat-card {
+.addiction-chart-card {
   background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
   padding: 1.5rem; text-align: center;
 }
-.addiction-stat-card h4 {
+.addiction-chart-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; }
+.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; }
 }
@@ -22,13 +37,23 @@
 
 <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>
+    <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-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 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>
@@ -37,25 +62,16 @@
 <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)']
-    }
+    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']
   };
 
-  // Usage & Addiction doughnut-style horizontal bar
   new Chart(document.getElementById('addiction-usage-chart'), {
     type: 'bar',
     data: {
-      labels: labels.usage[lang] || labels.usage.en,
+      labels: labels[lang] || labels.en,
       datasets: [{
         data: [95, 47, 45, 63],
         backgroundColor: ['#667eea', '#764ba2', '#a78bfa', '#c4b5fd'],
@@ -70,9 +86,7 @@
       plugins: {
         legend: { display: false },
         tooltip: {
-          callbacks: {
-            label: function(ctx) { return ctx.raw + '%'; }
-          }
+          callbacks: { label: function(ctx) { return ctx.raw + '%'; } }
         }
       },
       scales: {
@@ -85,73 +99,11 @@
           grid: { color: '#f1f5f9' }
         },
         y: {
-          ticks: {
-            font: { size: 11, family: 'system-ui' },
-            autoSkip: false
-          },
+          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>