BU #deploy

public/locales/de/berufsunfaehigkeit.json

@@ -14,11 +14,94 @@
   "tabs": {
     "overview": "Übersicht",
     "details": "Details",
+    "stats": "Statistik & Vergleich",
     "calculator": "Rechner",
     "form": "Anfrage",
     "catalog": "Ratgeber",
     "brochure": "PDF"
   },
+  "stats": {
+    "title": "Statistik & Vergleich",
+    "subtitle": "Schnelle Orientierung: Was leistet BU, was leistet Unfallversicherung – und wann passt ein Krankheits-Schutzbrief?",
+    "kpis": [
+      {
+        "label": "BU",
+        "value": "Monatliche Rente",
+        "hint": "Schützt das Einkommen, wenn der Beruf nicht mehr ausgeübt werden kann (je Tarifdefinition)."
+      },
+      {
+        "label": "Unfallversicherung",
+        "value": "Unfall + Invalidität",
+        "hint": "Leistet typischerweise bei Unfallereignis und daraus resultierender Invalidität."
+      },
+      {
+        "label": "Krankheits-Schutzbrief",
+        "value": "Diagnose-Katalog",
+        "hint": "Einmalzahlung bei definierten schweren Krankheiten – je nach Bedingungen." 
+      },
+      {
+        "label": "Merksatz",
+        "value": "Nicht entweder/oder",
+        "hint": "BU ist oft die Basis – Unfall & Schutzbrief können sinnvoll ergänzen."
+      }
+    ],
+    "matrix": {
+      "title": "Vergleich auf einen Blick",
+      "subtitle": "Die wichtigste Unterscheidung ist Auslöser und Leistungsart.",
+      "head": {
+        "feature": "Merkmal",
+        "bu": "BU",
+        "unfall": "Unfall",
+        "ksb": "Krankheits-Schutzbrief"
+      },
+      "rows": [
+        {
+          "feature": "Was wird abgesichert?",
+          "bu": "Einkommen / Lebensstandard",
+          "unfall": "Folgen eines Unfalls",
+          "ksb": "Sofortkapital bei Diagnose"
+        },
+        {
+          "feature": "Auslöser",
+          "bu": "Beruf kann nicht mehr ausgeübt werden",
+          "unfall": "Unfallereignis + Invalidität",
+          "ksb": "Diagnose definierter Krankheiten"
+        },
+        {
+          "feature": "Zahlt bei Krankheit ohne Unfall?",
+          "bu": "Ja",
+          "unfall": "Nein",
+          "ksb": "Ja (Katalog)"
+        },
+        {
+          "feature": "Auszahlung",
+          "bu": "Monatlich",
+          "unfall": "Meist einmalig",
+          "ksb": "Einmalig"
+        },
+        {
+          "feature": "Worauf achten?",
+          "bu": "Bedingungen, Gesundheitsfragen, Laufzeit",
+          "unfall": "Progression, Gliedertaxe, Unfallbegriff",
+          "ksb": "Krankheitskatalog, Definitionen, Ausschlüsse"
+        }
+      ]
+    },
+    "combos": [
+      {
+        "title": "BU + Unfall",
+        "desc": "Einkommensschutz plus Absicherung von Unfallfolgen – sinnvoll für viele Berufe und aktive Freizeit." 
+      },
+      {
+        "title": "BU + Krankheits-Schutzbrief",
+        "desc": "Monatliche Rente plus Sofortkapital bei Diagnose – kann finanzielle Lücken schnell überbrücken." 
+      },
+      {
+        "title": "Unfall + Schutzbrief",
+        "desc": "Gute Ergänzung, aber kein Ersatz für BU – Einkommen ist damit meist nicht dauerhaft abgesichert." 
+      }
+    ]
+  },
   "overview": {
     "badge": "BU – Einkommensschutz",
     "title": "Wenn Arbeit nicht mehr geht",

public/locales/pl/berufsunfaehigkeit.json

@@ -14,11 +14,94 @@
   "tabs": {
     "overview": "Przegląd",
     "details": "Szczegóły",
+    "stats": "Statystyka i porównanie",
     "calculator": "Kalkulator",
     "form": "Zapytanie",
     "catalog": "Poradnik",
     "brochure": "PDF"
   },
+  "stats": {
+    "title": "Statystyka i porównanie",
+    "subtitle": "Szybka orientacja: co daje BU, co daje ubezpieczenie NNW – i kiedy pasuje ochrona w ramach „Krankheits‑Schutzbrief”?",
+    "kpis": [
+      {
+        "label": "BU",
+        "value": "Miesięczna renta",
+        "hint": "Chroni dochód, gdy nie możesz wykonywać zawodu (zgodnie z definicją w OWU)."
+      },
+      {
+        "label": "Ubezpieczenie NNW",
+        "value": "Wypadek + inwalidztwo",
+        "hint": "Zwykle działa przy zdarzeniu wypadkowym i skutkach w postaci trwałego uszczerbku."
+      },
+      {
+        "label": "Krankheits‑Schutzbrief",
+        "value": "Katalog diagnoz",
+        "hint": "Jednorazowa wypłata przy zdefiniowanych ciężkich chorobach – zależnie od warunków."
+      },
+      {
+        "label": "W skrócie",
+        "value": "To nie „albo/albo”",
+        "hint": "BU często jest bazą – NNW i Schutzbrief mogą sensownie uzupełniać ochronę."
+      }
+    ],
+    "matrix": {
+      "title": "Porównanie w pigułce",
+      "subtitle": "Kluczowe różnice to: wyzwalacz świadczenia i forma wypłaty.",
+      "head": {
+        "feature": "Cecha",
+        "bu": "BU",
+        "unfall": "NNW",
+        "ksb": "Krankheits‑Schutzbrief"
+      },
+      "rows": [
+        {
+          "feature": "Co zabezpiecza?",
+          "bu": "Dochód / standard życia",
+          "unfall": "Skutki wypadku",
+          "ksb": "Kapitał po diagnozie"
+        },
+        {
+          "feature": "Wyzwalacz",
+          "bu": "Brak możliwości pracy w zawodzie",
+          "unfall": "Wypadek + inwalidztwo",
+          "ksb": "Diagnoza z katalogu"
+        },
+        {
+          "feature": "Choroba bez wypadku?",
+          "bu": "Tak",
+          "unfall": "Nie",
+          "ksb": "Tak (katalog)"
+        },
+        {
+          "feature": "Wypłata",
+          "bu": "Miesięcznie",
+          "unfall": "Najczęściej jednorazowo",
+          "ksb": "Jednorazowo"
+        },
+        {
+          "feature": "Na co uważać?",
+          "bu": "Warunki, ankieta zdrowotna, okres",
+          "unfall": "Progresja, tabela świadczeń, definicja wypadku",
+          "ksb": "Katalog chorób, definicje, wyłączenia"
+        }
+      ]
+    },
+    "combos": [
+      {
+        "title": "BU + NNW",
+        "desc": "Ochrona dochodu + ochrona skutków wypadku – dobre połączenie dla wielu osób aktywnych." 
+      },
+      {
+        "title": "BU + Schutzbrief",
+        "desc": "Miesięczna renta + kapitał po diagnozie – może szybko pokryć koszty i luki finansowe." 
+      },
+      {
+        "title": "NNW + Schutzbrief",
+        "desc": "Dobre uzupełnienie, ale nie zastępuje BU – dochód zwykle nie jest zabezpieczony długoterminowo." 
+      }
+    ]
+  },
   "overview": {
     "badge": "BU – ochrona dochodu",
     "title": "Gdy praca nie jest już możliwa",

src/pages/Berufsunfaehigkeitsversicherung.tsx

@@ -10,6 +10,7 @@ import {
   LineChart,
   Mail,
   Phone,
+  Scale,
   ShieldCheck,
   TrendingUp,
 } from 'lucide-react';
@@ -25,6 +26,7 @@ import RightImageCard from '@/components/tab-pages/RightImageCard';
 
 const TAB_OVERVIEW = 'overview';
 const TAB_DETAILS = 'details';
+const TAB_STATS = 'stats';
 const TAB_CALCULATOR = 'calculator';
 const TAB_FORM = 'form';
 const TAB_CATALOG = 'catalog';
@@ -44,6 +46,7 @@ const Berufsunfaehigkeitsversicherung = () => {
     const hash = (location.hash || '').replace('#', '').toLowerCase();
 
     if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
+    else if (hash === TAB_STATS) setActiveTab(TAB_STATS);
     else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
     else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
     else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
@@ -103,7 +106,7 @@ const Berufsunfaehigkeitsversicherung = () => {
             <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
               <Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
                 <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
-                  <TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                     <TabsTrigger
                       value={TAB_OVERVIEW}
                       className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
@@ -120,6 +123,14 @@ const Berufsunfaehigkeitsversicherung = () => {
                       {t('tabs.details', 'Details')}
                     </TabsTrigger>
 
+                    <TabsTrigger
+                      value={TAB_STATS}
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Scale className="w-4 h-4 mr-1.5" />
+                      {t('tabs.stats', 'Statistik & Vergleich')}
+                    </TabsTrigger>
+
                     <TabsTrigger
                       value={TAB_CALCULATOR}
                       className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
@@ -288,6 +299,96 @@ const Berufsunfaehigkeitsversicherung = () => {
                     </div>
                   </TabsContent>
 
+                  <TabsContent value={TAB_STATS} className="mt-0">
+                    <div className="space-y-8">
+                      <div className="text-center mb-8">
+                        <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                          {t('stats.title', 'Statistik & Vergleich')}
+                        </h2>
+                        <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+                          {t(
+                            'stats.subtitle',
+                            'Schnelle Orientierung: Was leistet BU, was leistet Unfallversicherung – und wann passt ein Krankheits-Schutzbrief?'
+                          )}
+                        </p>
+                      </div>
+
+                      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+                        {[0, 1, 2, 3].map((idx) => (
+                          <Card key={idx} className="h-full">
+                            <CardHeader>
+                              <div className="text-sm text-gray-500">{t(`stats.kpis.${idx}.label`)}</div>
+                              <CardTitle className="text-lg">{t(`stats.kpis.${idx}.value`)}</CardTitle>
+                              <CardDescription>{t(`stats.kpis.${idx}.hint`)}</CardDescription>
+                            </CardHeader>
+                          </Card>
+                        ))}
+                      </div>
+
+                      <Card className="border-gray-200">
+                        <CardHeader>
+                          <CardTitle className="text-xl">{t('stats.matrix.title', 'Vergleich auf einen Blick')}</CardTitle>
+                          <CardDescription>
+                            {t(
+                              'stats.matrix.subtitle',
+                              'Die wichtigste Unterscheidung ist Auslöser und Leistungsart.'
+                            )}
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="overflow-x-auto">
+                            <div className="min-w-[760px]">
+                              <div className="grid grid-cols-4 gap-0 border border-gray-200 rounded-lg overflow-hidden">
+                                <div className="bg-gray-50 p-3 text-sm font-semibold text-gray-900 border-b border-gray-200">
+                                  {t('stats.matrix.head.feature', 'Merkmal')}
+                                </div>
+                                <div className="bg-gray-50 p-3 text-sm font-semibold text-gray-900 border-b border-gray-200">
+                                  {t('stats.matrix.head.bu', 'BU')}
+                                </div>
+                                <div className="bg-gray-50 p-3 text-sm font-semibold text-gray-900 border-b border-gray-200">
+                                  {t('stats.matrix.head.unfall', 'Unfall')}
+                                </div>
+                                <div className="bg-gray-50 p-3 text-sm font-semibold text-gray-900 border-b border-gray-200">
+                                  {t('stats.matrix.head.ksb', 'Krankheits-Schutzbrief')}
+                                </div>
+
+                                {[0, 1, 2, 3, 4].map((rowIdx) => (
+                                  <React.Fragment key={rowIdx}>
+                                    <div className="p-3 text-sm font-medium text-gray-900 border-t border-gray-200">
+                                      {t(`stats.matrix.rows.${rowIdx}.feature`) }
+                                    </div>
+                                    <div className="p-3 text-sm text-gray-700 border-t border-gray-200">
+                                      {t(`stats.matrix.rows.${rowIdx}.bu`) }
+                                    </div>
+                                    <div className="p-3 text-sm text-gray-700 border-t border-gray-200">
+                                      {t(`stats.matrix.rows.${rowIdx}.unfall`) }
+                                    </div>
+                                    <div className="p-3 text-sm text-gray-700 border-t border-gray-200">
+                                      {t(`stats.matrix.rows.${rowIdx}.ksb`) }
+                                    </div>
+                                  </React.Fragment>
+                                ))}
+                              </div>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        {[0, 1, 2].map((idx) => (
+                          <Card key={idx} className="border-gray-200">
+                            <CardHeader>
+                              <CardTitle className="text-lg">{t(`stats.combos.${idx}.title`)}</CardTitle>
+                              <CardDescription>{t(`stats.combos.${idx}.desc`)}</CardDescription>
+                            </CardHeader>
+                          </Card>
+                        ))}
+                      </div>
+
+                      <GeneralNotice />
+                    </div>
+                  </TabsContent>
+
                   <TabsContent value={TAB_CALCULATOR} className="mt-0">
                     <div className="max-w-2xl mx-auto">
                       <Card>