import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Calculator, DollarSign, HandHeart, Home } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice';
import Disclaimer from '@/components/Disclaimer';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';

const SeniorenSterbegeldversicherung = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [activeTab, setActiveTab] = useState('overview');

  const benefits = [
    {
      icon: HandHeart,
      title: 'Absicherung im Todesfall',
      description: 'Finanzielle Unterstützung für Ihre Hinterbliebenen'
    },
    {
      icon: DollarSign,
      title: 'Beitragsgünstig',
      description: 'Günstige Beiträge mit hoher Auszahlungssumme'
    },
    {
      icon: Shield,
      title: 'Sofortauszahlung',
      description: 'Schnelle Hilfe für Ihre Familie'
    },
    {
      icon: Heart,
      title: 'Familienabsicherung',
      description: 'Schutz für Ihre Liebsten'
    },
    {
      icon: Clock,
      title: 'Lebenslang gültig',
      description: 'Keine Altersbegrenzung'
    },
    {
      icon: Users,
      title: 'Ohne Gesundheitsprüfung',
      description: 'Einfacher Abschluss möglich'
    }
  ];

  const processSteps = [
    {
      icon: FileText,
      title: 'Beratung',
      description: 'Persönliche Beratung zu Ihren Wünschen'
    },
    {
      icon: Calculator,
      title: 'Berechnung',
      description: 'Individuelle Tarifauswahl'
    },
    {
      icon: Shield,
      title: 'Abschluss',
      description: 'Schneller und unkomplizierter Vertragsschluss'
    },
    {
      icon: CheckCircle,
      title: 'Schutz',
      description: 'Sofortiger Versicherungsschutz'
    }
  ];

  const advantages = [
    {
      icon: Heart,
      title: 'Finanzielle Entlastung',
      description: 'Ihre Angehörigen müssen keine Kosten tragen'
    },
    {
      icon: Shield,
      title: 'Schnelle Auszahlung',
      description: 'Geld ist sofort nach dem Todesfall verfügbar'
    },
    {
      icon: Home,
      title: 'Freie Wahl',
      description: 'Bestatter und Art der Bestattung frei wählbar'
    },
    {
      icon: DollarSign,
      title: 'Beitragsgünstig',
      description: 'Schon ab wenigen Euro im Monat absicherbar'
    },
    {
      icon: Users,
      title: 'Ohne Gesundheitsprüfung',
      description: 'Keine Gesundheitsfragen erforderlich'
    },
    {
      icon: Clock,
      title: 'Lebenslang gültig',
      description: 'Keine Altersgrenzen oder Laufzeiten'
    }
  ];

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
        {/* Wichtiger Hinweis oben */}
        <div className="container mx-auto px-4 py-4">
          <div className="max-w-6xl mx-auto">
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
              <div className="flex items-start gap-3">
                <AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
                <div className="text-sm text-amber-800 leading-relaxed">
                  <h4 className="font-semibold mb-1">Wichtiger Hinweis:</h4>
                  <p>
                    Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Hero Section */}
        <HeroSlider
          slides={[
            {
              id: 'senioren-sterbegeld-1',
              title: 'Die Sterbegeldversicherung',
              subtitle: 'Für Ihre Liebsten sorgen',
              imageUrl: assetUrl('iStock-939772870.jpg'),
              topics: [
                { label: 'Sterbegeld', href: '#overview' },
                { label: 'Vorsorge', href: '#benefits' }
              ],
              ctas: [
                { label: 'Beratung anfordern', href: '#form', variant: 'default' as const },
                { label: 'Mehr erfahren', href: '#overview', variant: 'outline' as const }
              ]
            }
          ]}
        />

        {/* Main Content */}
        <div className="container mx-auto px-4 py-8">
          <div className="max-w-6xl mx-auto">
            {/* Header */}
            <div className="text-center mb-8">
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                Die Sterbegeldversicherung
              </h1>
              <p className="text-xl text-gray-600 mb-6">
                Für Ihre Liebsten sorgen
              </p>
            </div>

            {/* Tabs Navigation */}
            <div className="bg-white rounded-lg border border-gray-200 shadow-sm mb-8">
              <Tabs
                value={activeTab}
                onValueChange={(next) => {
                  setActiveTab(next);
                }}
                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-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                    <TabsTrigger 
                      value="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"
                    >
                      <Shield className="w-4 h-4 mr-1.5" />
                      Übersicht
                    </TabsTrigger>
                    <TabsTrigger 
                      value="products" 
                      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"
                    >
                      <FileText className="w-4 h-4 mr-1.5" />
                      Produkte
                    </TabsTrigger>
                    <TabsTrigger 
                      value="benefits" 
                      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"
                    >
                      <Star className="w-4 h-4 mr-1.5" />
                      Vorteile
                    </TabsTrigger>
                    <TabsTrigger 
                      value="process" 
                      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"
                    >
                      <Clock className="w-4 h-4 mr-1.5" />
                      Prozess
                    </TabsTrigger>
                    <TabsTrigger 
                      value="costs" 
                      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"
                    >
                      <Calculator className="w-4 h-4 mr-1.5" />
                      Kosten
                    </TabsTrigger>
                    <TabsTrigger 
                      value="form" 
                      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"
                    >
                      <Mail className="w-4 h-4 mr-1.5" />
                      Anfrage
                    </TabsTrigger>
                  </TabsList>
                </div>

                <div className="p-4 md:p-6">
                  <TabsContent value="overview" className="mt-0">
                    <TwoColumnTab
                      className="gap-8 items-center"
                      left={
                        <>
                          <div className="mb-4">
                            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                              <Heart className="w-3 h-3 mr-1" />
                              Sterbegeldversicherung
                            </span>
                          </div>
                          <h2 className="text-3xl font-bold text-gray-900 mb-4">
                            Die Sterbegeldversicherung
                          </h2>
                          <p className="text-lg text-gray-600 mb-6">
                            Für Ihre Liebsten sorgen
                          </p>
                          <p className="text-gray-600 mb-8">
                            Eine Sterbegeldversicherung ist eine sinnvolle Vorsorge, die Ihre Angehörigen im Todesfall finanziell entlastet. 
                            Mit einer monatlichen Prämie sichern Sie eine Auszahlungssumme, die für die Bestattungskosten verwendet werden kann.
                          </p>
                          
                          <div className="flex flex-col sm:flex-row gap-4 mb-8">
                            <Button 
                              onClick={() => setActiveTab('form')} 
                              className="bg-blue-700 hover:bg-blue-800 px-6 py-3 text-lg font-semibold"
                            >
                              Beratung anfordern
                            </Button>
                            <Button 
                              onClick={() => setActiveTab('form')} 
                              variant="outline" 
                              className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 text-lg font-semibold"
                            >
                              Kostenlos beraten lassen
                            </Button>
                          </div>

                          <div className="space-y-4">
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-4">
                              <Heart className="w-5 h-5 text-blue-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">Familienabsicherung</div>
                                <div className="text-gray-600">Schutz für Ihre Liebsten</div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-4">
                              <DollarSign className="w-5 h-5 text-blue-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">Beitragsgünstig</div>
                                <div className="text-gray-600">Günstige Absicherung</div>
                                <div className="text-xs text-gray-500 mt-1">ab 40,75 €/mtl. für 12.500 €</div>
                              </div>
                            </div>
                          </div>
                        </>
                      }
                      right={
                        (
                          <div className="relative">
                            <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
                            <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                              <img
                                src={assetUrl('iStock-939772870.jpg')}
                                alt="Sterbegeldversicherung"
                                className="w-full h-[400px] object-cover"
                              />
                              <div className="p-5 bg-gradient-to-t from-white/90 to-white/60 backdrop-blur-sm">
                                <div className="flex items-center gap-2 text-sm text-gray-700">
                                  <Heart className="w-4 h-4 text-blue-700" />
                                  <span>Finanzielle Absicherung, letzte Wünsche, Entlastung für Familie</span>
                                </div>
                                <div className="flex items-center gap-2 text-sm text-gray-700 mt-1">
                                  <Star className="w-4 h-4 text-blue-700" />
                                  <span>Tarifcheck – schnell, fair und passend zu Ihrer Vorsorge.</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        )
                      }
                    />

                    {/* Wichtige Information */}
                    <div className="mt-8 bg-red-50 border border-red-200 rounded-xl p-6">
                      <div className="flex items-start gap-4">
                        <div className="w-8 h-8 bg-red-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                          <AlertTriangle className="w-4 h-4 text-red-800" />
                        </div>
                        <div>
                          <h6 className="font-medium text-red-900 mb-2">Wichtige Information zur gesetzlichen Regelung</h6>
                          <p className="text-red-800 text-sm">
                            Die Sterbegeldversicherung ist eine private Vorsorge, die gesetzlich nicht geregelt ist. 
                            Die Leistungen und Bedingungen variieren je nach Anbieter. Eine sorgfältige Prüfung der Vertragsbedingungen ist empfehlenswert.
                          </p>
                        </div>
                      </div>
                    </div>

                    {/* Vorteile */}
                    <div className="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
                      <div className="flex items-start gap-4">
                        <div className="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                          <CheckCircle className="w-4 h-4 text-blue-800" />
                        </div>
                        <div>
                          <h6 className="font-medium text-blue-900 mb-2">Ihre Garantierte Vorteile & Absicherung lebenslang</h6>
                          <p className="text-blue-800 text-sm">
                            Mit einer Sterbegeldversicherung sichern Sie sich und Ihre Familie finanziell ab. 
                            Die Beiträge bleiben über die gesamte Vertragslaufzeit gleich und die Auszahlungssumme ist garantiert.
                          </p>
                        </div>
                      </div>
                    </div>

                    {/* Beitragsbeispiel und Versicherungssummen */}
                    <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
                        <div className="text-center">
                          <p className="text-blue-700 font-medium text-sm uppercase tracking-wide mb-3">Beitragsbeispiel</p>
                          <p className="text-4xl font-light text-blue-900 mb-2">ab 40,75 €</p>
                          <p className="text-blue-600 text-sm">pro Monat für 12.500 € Versicherungssumme</p>
                          <div className="mt-4 text-xs text-blue-700">
                            <p>• Männer/Frauen: ab 53 Jahre</p>
                          </div>
                        </div>
                      </div>
                      <div className="bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl p-6 border border-slate-600">
                        <div className="text-center">
                          <p className="text-slate-300 font-medium text-sm uppercase tracking-wide mb-3">Versicherungssummen</p>
                          <p className="text-4xl font-light text-white mb-2">1.500 € - bis 50.000 €</p>
                          <p className="text-slate-400 text-sm">Frei wählbare Absicherung</p>
                          <div className="mt-4 text-xs text-slate-300">
                            <p>• Sofortauszahlung bei Unfalltod</p>
                            <p>• Doppelte Leistung bei Unfalltod</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Wichtiger Hinweis unter der Tabelle */}
                    <div className="mt-6 bg-amber-50 border border-amber-200 rounded-xl p-4">
                      <div className="flex items-start gap-3">
                        <AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
                        <div className="text-sm text-amber-800 leading-relaxed">
                          <h4 className="font-semibold mb-1">Wichtiger Hinweis:</h4>
                          <p>
                            Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
                          </p>
                        </div>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="products" className="mt-0">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                      <div className="lg:col-span-2">
                        <h3 className="text-2xl font-bold text-gray-900">Unsere Sterbegeldlösungen</h3>
                        <p className="text-gray-600 mt-2">
                          Wir bieten verschiedene Tarife an, die auf Ihre individuellen Bedürfnisse zugeschnitten sind.
                        </p>
                        
                        <div className="mt-6 space-y-4">
                          <Card className="border-blue-200">
                            <CardHeader>
                              <CardTitle className="text-lg flex items-center gap-2">
                                <Shield className="w-5 h-5 text-blue-700" />
                                Klassische Sterbegeldversicherung
                              </CardTitle>
                              <CardDescription>
                                Die bewährte Lösung für Ihre finanzielle Absicherung
                              </CardDescription>
                            </CardHeader>
                            <CardContent>
                              <ul className="space-y-2 text-sm text-gray-700">
                                <li className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                  <span>Auszahlungssumme bis 50.000 €</span>
                                </li>
                                <li className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                  <span>Ohne Gesundheitsprüfung</span>
                                </li>
                                <li className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                  <span>Beitragskonstant über die gesamte Laufzeit</span>
                                </li>
                              </ul>
                            </CardContent>
                          </Card>

                          <Card className="border-green-200">
                            <CardHeader>
                              <CardTitle className="text-lg flex items-center gap-2">
                                <Heart className="w-5 h-5 text-green-700" />
                                Familien-Sterbegeldversicherung
                              </CardTitle>
                              <CardDescription>
                                Gemeinsam für die ganze Familie vorsorgen
                              </CardDescription>
                            </CardHeader>
                            <CardContent>
                              <ul className="space-y-2 text-sm text-gray-700">
                                <li className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                  <span>Bis zu 5 Personen versicherbar</span>
                                </li>
                                <li className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                  <span>Separate Auszahlungssummen</span>
                                </li>
                                <li className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                                  <span>Familienrabatt bis 15%</span>
                                </li>
                              </ul>
                            </CardContent>
                          </Card>
                        </div>
                      </div>

                      <div>
                        <Card className="border-orange-200">
                          <CardHeader>
                            <CardTitle className="text-lg flex items-center gap-2">
                              <Calculator className="w-5 h-5 text-orange-700" />
                              Kosten berechnen
                            </CardTitle>
                          </CardHeader>
                          <CardContent>
                            <p className="text-sm text-gray-600 mb-4">
                              Berechnen Sie jetzt Ihre individuellen Beiträge und finden Sie den passenden Tarif.
                            </p>
                            <Button 
                              onClick={() => setActiveTab('calculator')} 
                              className="w-full bg-orange-600 hover:bg-orange-700"
                            >
                              <Calculator className="mr-2 h-4 w-4" />
                              Rechner starten
                            </Button>
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="benefits" className="mt-0">
                    <div className="text-center mb-12">
                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                        Ihre Vorteile
                      </h3>
                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
                        Entdecken Sie die vielen Vorteile einer Sterbegeldversicherung und wie Sie Ihre Liebsten schützen können.
                      </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      {advantages.map((advantage, index) => (
                        <Card key={index} className="border-gray-200 hover:shadow-lg transition-shadow">
                          <CardHeader className="text-center">
                            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                              <advantage.icon className="w-6 h-6 text-blue-700" />
                            </div>
                            <CardTitle className="text-lg">{advantage.title}</CardTitle>
                          </CardHeader>
                          <CardContent className="text-center">
                            <p className="text-gray-600">{advantage.description}</p>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </TabsContent>

                  <TabsContent value="process" className="mt-0">
                    <div className="text-center mb-12">
                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                        So läuft die Beratung ab
                      </h3>
                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
                        In nur wenigen Schritten zu Ihrer individuellen Sterbegeldversicherung
                      </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                      {processSteps.map((step, index) => (
                        <div key={index} className="text-center">
                          <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <step.icon className="w-8 h-8 text-blue-700" />
                          </div>
                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
                          <p className="text-gray-600">{step.description}</p>
                          {index < processSteps.length - 1 && (
                            <div className="hidden lg:block absolute top-8 left-full w-full">
                              <div className="flex items-center justify-center">
                                <div className="w-full border-t-2 border-dashed border-gray-300"></div>
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </TabsContent>

                  <TabsContent value="calculator" className="mt-0">
                    <div className="text-center">
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Sterbegeld-Rechner</h3>
                      <p className="text-gray-600 mb-6">
                        Berechnen Sie jetzt Ihre individuellen Beiträge
                      </p>
                      <Button className="bg-blue-700 hover:bg-blue-800">
                        <Calculator className="mr-2 h-4 w-4" />
                        Rechner starten
                      </Button>
                    </div>
                  </TabsContent>

                  <TabsContent value="costs" className="mt-0">
                    <div className="text-center mb-8">
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Bestattungskosten im Überblick</h3>
                      <p className="text-gray-600">
                        Typische Kosten für eine Bestattung in Deutschland
                      </p>
                    </div>

                    <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
                      {/* Modern Header */}
                      <div className="bg-gradient-to-r from-slate-700 to-slate-900 text-white p-8">
                        <div className="text-center">
                          <h4 className="text-3xl font-light tracking-wide mb-3">Bestattungskosten</h4>
                          <p className="text-slate-300 text-lg">Eine transparente Übersicht aller Kostenpositionen</p>
                        </div>
                      </div>
                      
                      {/* Content */}
                      <div className="p-8 bg-gradient-to-b from-white to-gray-50">
                        {/* Kostenübersicht Cards */}
                        <div className="grid md:grid-cols-2 gap-6 mb-8">
                          <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
                            <div className="text-center">
                              <p className="text-blue-700 font-medium text-sm uppercase tracking-wide mb-3">Beitragsbeispiel</p>
                              <p className="text-4xl font-light text-blue-900 mb-2">ab 40,75 €</p>
                              <p className="text-blue-600 text-sm">pro Monat für 12.500 € Versicherungssumme</p>
                              <div className="mt-4 text-xs text-blue-700">
                                <p>• Männer/Frauen: ab 53 Jahre</p>
                              </div>
                            </div>
                          </div>
                          <div className="bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl p-6 border border-slate-600">
                            <div className="text-center">
                              <p className="text-slate-300 font-medium text-sm uppercase tracking-wide mb-3">Versicherungssummen</p>
                              <p className="text-4xl font-light text-white mb-2">1.500 € - bis 50.000 €</p>
                              <p className="text-slate-400 text-sm">Frei wählbare Absicherung</p>
                              <div className="mt-4 text-xs text-slate-300">
                                <p>• Sofortauszahlung bei Unfalltod</p>
                                <p>• Doppelte Leistung bei Unfalltod</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                        {/* Detaillierte Kostenliste */}
                        <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
                          <div className="p-3 border-b border-gray-200">
                            <h5 className="text-lg font-medium text-gray-900">Detaillierte Kostenübersicht</h5>
                          </div>
                          <div className="divide-y divide-gray-100">
                            {[
                              { name: 'Bestatter', desc: 'Organisation, Überführung, Trauerfeier', min: 1500, max: 3500 },
                              { name: 'Sarg', desc: 'Je nach Material und Ausführung', min: 800, max: 2500 },
                              { name: 'Grabstelle', desc: 'Erwerb und Aushebung', min: 500, max: 1200 },
                              { name: 'Grabpflege', desc: 'Je nach Wahl und Friedhof (pro Jahr)', min: 200, max: 400 },
                              { name: 'Krankenhaus', desc: 'Kosten für Aufbahrung', min: 50, max: 100 },
                              { name: 'Verwaltung', desc: 'Verwaltungsgebühren', min: 50, max: 150 },
                              { name: 'Todesanzeige', desc: 'Je nach Zeitung und Auflage', min: 100, max: 500 },
                              { name: 'Trauerfeier', desc: 'Kaffee und Kuchen, Musik', min: 300, max: 1000 },
                              { name: 'Blumenschmuck', desc: 'Kranz und Sträuße', min: 200, max: 800 },
                              { name: 'Danksagungskarten', desc: 'Druck und Versand', min: 50, max: 200 },
                              { name: 'Steinmetz', desc: 'Grabstein und Inschrift', min: 2350, max: 8000 }
                            ].map((item, index) => (
                              <div key={index} className="p-3 hover:bg-gray-50 transition-colors">
                                <div className="flex items-center justify-between">
                                  <div className="flex-1 pr-3">
                                    <h6 className="font-medium text-gray-900">{item.name}</h6>
                                    <p className="text-gray-600 text-sm">{item.desc}</p>
                                  </div>
                                  <div className="flex items-center gap-16">
                                    <div className="text-right min-w-[120px]">
                                      <p className="text-xs text-gray-500 uppercase">ab</p>
                                      <p className="text-lg font-medium text-gray-900">{item.min.toLocaleString()} €</p>
                                    </div>
                                    <div className="text-right min-w-[120px]">
                                      <p className="text-xs text-gray-500 uppercase">bis</p>
                                      <p className="text-lg font-medium text-gray-900">{item.max.toLocaleString()} €</p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                        
                        {/* Hinweisbereich */}
                        <div className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-4">
                          <div className="flex items-start gap-3">
                            <AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
                            <div>
                              <h6 className="font-medium text-amber-900 mb-2">Wichtige Hinweise</h6>
                              <ul className="text-amber-800 text-sm space-y-1">
                                <li>• Die Kosten variieren je nach Region, Friedhof und individuellen Wünschen</li>
                                <li>• Grabpflegekosten fallen jährlich zusätzlich an</li>
                                <li>• Eine Sterbegeldversicherung kann Ihre Angehörigen finanziell entlasten</li>
                              </ul>
                            </div>
                          </div>
                        </div>

                        {/* Verantwortungsbereich */}
                        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-6">
                          <div className="flex items-start gap-4">
                            <div className="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                              <CheckCircle className="w-4 h-4 text-blue-800" />
                            </div>
                            <div>
                              <h6 className="font-medium text-blue-900 mb-2">Verantwortung</h6>
                              <p className="text-blue-800 text-sm leading-relaxed">
                                Sie können Verantwortung vereinbaren durch:
                              </p>
                              <ul className="text-blue-800 text-sm space-y-2 mt-3">
                                <li>• <strong>Sterbegeldversicherungen</strong> - bieten gegen einen vergleichsweise geringen monatlichen Beitrag eine Lösung, welche ohne Gesundheitsprüfung bis ins hohe Alter von 85 Jahren - auch von Kindern oder Verwandten ohne das Wissen der zu versicherten Person - abgeschlossen werden kann.</li>
                                <li>• <strong>Bestattungsvorsorgeversicherung</strong> - ermöglicht Ihnen, alles Notwendige schon jetzt eigenverantwortlich zu regeln. Sie können sich darauf verlassen, dass später alles in Ihrem Sinne arrangiert ist und sämtliche Formalitäten zuverlässig erledigt werden. Gewähren Sie Ihnen und Ihren Angehörigen emotionale und finanzielle Entlastung.</li>
                              </ul>
                              <p className="text-blue-800 text-sm mt-3 leading-relaxed">
                                Ein persönliches Gespräch ist durch nichts zur ersetzen, deswegen Vereinbaren Sie einen Termin und wir werden gemeinsam für Sie oder Ihrer Angehörigen eine passende sichere und vertrauliche Lösung finden.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="calculator" className="mt-0">
                    <div className="text-center mb-8">
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Sterbegeld-Rechner</h3>
                      <p className="text-gray-600 mb-6">
                        Berechnen Sie jetzt Ihre individuellen Beiträge und finden Sie den passenden Tarif
                      </p>
                    </div>

                    <div className="max-w-2xl mx-auto">
                      <Card className="border-blue-200">
                        <CardHeader>
                          <CardTitle className="text-lg flex items-center gap-2">
                            <Calculator className="w-5 h-5 text-blue-700" />
                            Beitrag berechnen
                          </CardTitle>
                          <CardDescription>
                            Geben Sie Ihre Wünsche ein und erhalten Sie eine unverbindliche Kostenschätzung
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Versicherungssumme
                              </label>
                              <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="5000">5.000 €</option>
                                <option value="10000">10.000 €</option>
                                <option value="12500" selected>12.500 €</option>
                                <option value="15000">15.000 €</option>
                                <option value="20000">20.000 €</option>
                                <option value="25000">25.000 €</option>
                                <option value="30000">30.000 €</option>
                                <option value="50000">50.000 €</option>
                              </select>
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Alter
                              </label>
                              <input 
                                type="number" 
                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="z.B. 53"
                                defaultValue="53"
                              />
                            </div>
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                              Geschlecht
                            </label>
                            <div className="flex gap-4">
                              <label className="flex items-center">
                                <input type="radio" name="gender" value="male" className="mr-2" defaultChecked />
                                Männlich
                              </label>
                              <label className="flex items-center">
                                <input type="radio" name="gender" value="female" className="mr-2" />
                                Weiblich
                              </label>
                            </div>
                          </div>

                          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div className="text-center">
                              <p className="text-sm text-blue-700 font-medium mb-2">Ihr geschätzter Beitrag</p>
                              <p className="text-3xl font-bold text-blue-900">ab 40,75 €</p>
                              <p className="text-sm text-blue-600">pro Monat</p>
                            </div>
                          </div>

                          <div className="flex gap-4">
                            <Button 
                              onClick={() => setActiveTab('form')} 
                              className="flex-1 bg-blue-700 hover:bg-blue-800"
                            >
                              <Phone className="mr-2 h-4 w-4" />
                              Beratung anfordern
                            </Button>
                            <Button variant="outline" className="flex-1">
                              <Download className="mr-2 h-4 w-4" />
                              Angebot herunterladen
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </TabsContent>

                  <TabsContent value="form" className="mt-0">
                    <div className="max-w-2xl mx-auto">
                      <Card className="border-blue-200">
                        <CardHeader className="text-center">
                          <CardTitle className="text-2xl">Beratungsanfrage</CardTitle>
                          <CardDescription>
                            Lassen Sie sich unverbindlich zu Ihrer Sterbegeldversicherung beraten
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Vorname *
                              </label>
                              <input 
                                type="text" 
                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="Ihr Vorname"
                              />
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Nachname *
                              </label>
                              <input 
                                type="text" 
                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="Ihr Nachname"
                              />
                            </div>
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                              E-Mail *
                            </label>
                            <input 
                              type="email" 
                              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="ihre@email.de"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                              Telefon
                            </label>
                            <input 
                              type="tel" 
                              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="0123 456789"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                              Ihre Nachricht
                            </label>
                            <textarea 
                              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                              rows={4}
                              placeholder="Besondere Wünsche oder Fragen..."
                            />
                          </div>

                          <div className="flex items-start gap-2">
                            <input type="checkbox" id="privacy" className="mt-1" />
                            <label htmlFor="privacy" className="text-sm text-gray-600">
                              Ich stimme der <Link to="/datenschutz" className="text-blue-600 hover:underline">Datenschutzerklärung</Link> zu und bin damit einverstanden, dass meine Daten zur Bearbeitung meiner Anfrage verwendet werden.
                            </label>
                          </div>

                          <div className="flex flex-col sm:flex-row gap-4">
                            <Button className="flex-1 bg-blue-700 hover:bg-blue-800">
                              <Mail className="mr-2 h-4 w-4" />
                              Anfrage senden
                            </Button>
                            <Button variant="outline" className="flex-1">
                              <Phone className="mr-2 h-4 w-4" />
                              Rückruf bitten
                            </Button>
                          </div>

                          <div className="text-center text-sm text-gray-600">
                            <p>Oder rufen Sie uns direkt an:</p>
                            <p className="font-semibold text-blue-700">+49 123 456789</p>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </TabsContent>
                </div>
              </Tabs>
            </div>

            {/* Additional Sections */}
            <Disclaimer />
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default SeniorenSterbegeldversicherung;