feat: add top 5 blocked threats ranking to FamilyGuard report preview

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LhY1QhDXGWfyhrxaJvfpNt

components/FlyerReportPreview.tsx

@@ -13,6 +13,16 @@ const monthlyData = [
 
 const maxValue = Math.max(...monthlyData.map((d) => d.value));
 
+const topThreats = [
+  { label: "Werbung & Tracker", value: 112 },
+  { label: "Erwachseneninhalte", value: 54 },
+  { label: "Phishing-Versuche", value: 38 },
+  { label: "Schadsoftware-Domains", value: 24 },
+  { label: "Social-Media-Tracker", value: 19 },
+];
+
+const maxThreatValue = Math.max(...topThreats.map((t) => t.value));
+
 const stats = [
   { value: 247, suffix: "", label: "Blockierte Gefahren (Mär)", accent: "orange" as const },
   { value: 6, suffix: "", label: "Geschützte Geräte", accent: "blue" as const },
@@ -141,6 +151,34 @@ export default function FlyerReportPreview() {
           ))}
         </div>
       </div>
+
+      {/* Top 5 Gefahrenkategorien */}
+      <div className="mt-10">
+        <p className="text-slate-700 dark:text-slate-300 text-sm font-semibold mb-4 text-center">
+          Top 5 blockierte Gefahren (Mär)
+        </p>
+        <div className="space-y-3 max-w-lg mx-auto">
+          {topThreats.map((t, i) => (
+            <div key={t.label} className="flex items-center gap-3">
+              <span className="w-5 flex-shrink-0 text-xs font-bold text-slate-400 dark:text-slate-500">
+                {i + 1}
+              </span>
+              <span className="w-36 sm:w-40 flex-shrink-0 text-xs text-slate-600 dark:text-slate-400 truncate">
+                {t.label}
+              </span>
+              <div className="flex-1 h-2 rounded-full bg-slate-100 dark:bg-[#111925] overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-orange-500"
+                  style={{ width: `${(t.value / maxThreatValue) * 100}%` }}
+                />
+              </div>
+              <span className="w-8 flex-shrink-0 text-xs font-semibold text-slate-700 dark:text-slate-300 text-right">
+                {t.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }