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, TrendingUp, Calculator, Users, CheckCircle, Phone, Mail, FileText, Download, PiggyBank, Home, Heart, Star, AlertTriangle, Clock } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice';

const SeniorenAltersvorsorge = () => {
  const { t } = useTranslation('seniorenAltersvorsorge');
  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: PiggyBank,
      title: 'Sichere Rente',
      description: 'Planen Sie Ihre finanzielle Unabhängigkeit im Ruhestand'
    },
    {
      icon: Shield,
      title: 'Staatliche Förderung',
      description: 'Nutzen Sie alle möglichen staatlichen Zulagen und Steuervorteile'
    },
    {
      icon: TrendingUp,
      title: 'Flexible Anlagen',
      description: 'Wählen Sie zwischen sicheren und renditestarken Anlageformen'
    },
    {
      icon: Heart,
      title: 'Hinterbliebenenschutz',
      description: 'Sorgen Sie für Ihre Angehörigen vorzusorgen'
    }
  ];

  const products = [
    {
      title: 'Riester-Rente',
      description: 'Staatlich geförderte private Altersvorsorge mit Zulagen',
      details: 'Direkte Zulagen vom Staat, steuerliche Vorteile, flexible Verträge'
    },
    {
      title: 'Rürup-Rente',
      description: 'Für Selbstständige und Freiberufler mit Steuervorteilen',
      details: 'Steuerliche Absetzbarkeit, hohe Flexibilität, auch für Angestellte'
    },
    {
      title: 'Betriebliche Altersvorsorge',
      description: 'Durch den Arbeitgeber geförderte Vorsorge',
      details: 'Arbeitgeberzuschüsse, Steuerfreiheit, verschiedene Durchführungswege'
    },
    {
      title: 'Kapitallebensversicherung',
      description: 'Kombination aus Vorsorge und Vermögensaufbau',
      details: 'Garantierte Leistungen, flexible Verträge, Hinterbliebenenschutz'
    },
    {
      title: 'Rentenversicherung',
      description: 'Sichere monatliche Rente für den Lebensabend',
      details: 'Lebenslange Rente, Inflationsausgleich, flexible Optionen'
    },
    {
      title: 'Fondsgebundene Politik',
      description: 'Chancen auf höhere Renditen mit Fondsanlagen',
      details: 'Renditechancen, Risikomanagement, professionelles Fondsmanagement'
    }
  ];

  const steps = [
    {
      step: '1',
      title: 'Bedarfsanalyse',
      description: 'Ermittlung Ihres individuellen Vorsorgebedarfs'
    },
    {
      step: '2',
      title: 'Geeignete Produkte',
      description: 'Auswahl der passenden Vorsorgelösungen'
    },
    {
      step: '3',
      title: 'Förderung prüfen',
      description: 'Optimierung staatlicher Zulagen und Steuervorteile'
    },
    {
      step: '4',
      title: 'Umsetzung',
      description: 'Abschluss und regelmäßige Betreuung'
    }
  ];

  return (
    <Layout>
      <HeroSlider
        slides={[
          {
            id: 'senioren-altersvorsorge-1',
            kicker: 'Altersvorsorge für Senioren',
            title: 'Sorgen Sie für Ihren Lebensabend vor',
            subtitle: 'Maßgeschneiderte Vorsorgelösungen für Ihre finanzielle Sicherheit im Ruhestand',
            imageUrl: assetUrl('Fotolia_67327775_XS.jpg'),
            imagePosition: 'center 35%',
            ctas: [
              { label: 'Beratung anfordern', href: '#form' },
              { label: 'Vorsorge-Rechner', href: '#calculator' },
            ],
          },
        ]}
      />

      <div className="min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 md:px-6 py-8">
          <div className="max-w-screen-2xl mx-auto">
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
              Altersvorsorge für Senioren
            </h2>

            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                <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-4 lg: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"
                    >
                      <Phone className="w-4 h-4 mr-1.5" />
                      Anfrage
                    </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"
                    >
                      <Home className="w-4 h-4 mr-1.5" />
                      Übersicht
                    </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"
                    >
                      <FileText className="w-4 h-4 mr-1.5" />
                      Prozess
                    </TabsTrigger>
                    <TabsTrigger 
                      value="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"
                    >
                      <Calculator className="w-4 h-4 mr-1.5" />
                      Rechner
                    </TabsTrigger>
                  </TabsList>
                </div>

                <div className="p-4 md:p-6">
                  <TabsContent value="overview" className="mt-0">
                    <div className="text-center">
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
                      <p className="text-gray-600 mb-6">
                        Lassen Sie sich unverbindlich zu Ihrer Altersvorsorge beraten
                      </p>
                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
                          <Phone className="h-5 w-5 mr-2" />
                          Jetzt anrufen
                        </Button>
                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
                          <Mail className="h-5 w-5 mr-2" />
                          Kontakt aufnehmen
                        </Button>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="products" className="mt-0">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
                          <Star className="w-4 h-4" />
                          <span>Sicherheit im Ruhestand</span>
                        </div>
                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                          Altersvorsorge für Senioren
                          <span className="block text-blue-700">Planen Sie Ihre Zukunft sicher</span>
                        </h1>
                        <p className="mt-4 text-gray-600 text-lg">
                          Es ist nie zu spät, für den Lebensabend vorzusorgen. Wir helfen Ihnen,
                          die passende Altersvorsorge zu finden – mit staatlicher Förderung und
                          steuerlichen Vorteilen.
                        </p>

                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
                          <Button onClick={() => setActiveTab('overview')} className="bg-blue-700 hover:bg-blue-800">
                            Beratung anfordern
                          </Button>
                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
                            Kostenlos beraten lassen
                          </Button>
                        </div>

                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                            <PiggyBank className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Sichere Rente</div>
                              <div className="text-gray-600">Finanzielle Unabhängigkeit</div>
                            </div>
                          </div>
                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                            <Shield className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Staatliche Hilfe</div>
                              <div className="text-gray-600">Zulagen & Steuervorteile</div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <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('Fotolia_67327775_XS.jpg')}
                            alt="Altersvorsorge"
                            className="w-full h-[320px] object-cover"
                            onError={(e) => {
                              (e.currentTarget as HTMLImageElement).style.display = 'none';
                            }}
                          />
                          <div className="p-5">
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <TrendingUp className="w-4 h-4" />
                              <span>Riester, Rürup, bAV & Co.</span>
                            </div>
                            <div className="mt-2 text-sm text-gray-600">
                              Wir finden die passende Lösung für Ihre Situation.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700" />
                              Nie zu spät
                            </CardTitle>
                            <CardDescription>Selbst mit 50+ noch sinnvoll.</CardDescription>
                          </CardHeader>
                        </Card>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <Calculator className="w-4 h-4 text-blue-700" />
                              Staatliche Hilfe
                            </CardTitle>
                            <CardDescription>Zulagen & Steuervorteile nutzen.</CardDescription>
                          </CardHeader>
                        </Card>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <Clock className="w-4 h-4 text-blue-700" />
                              Flexible Optionen
                            </CardTitle>
                            <CardDescription>Passgenau für Ihre Situation.</CardDescription>
                          </CardHeader>
                        </Card>
                      </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 Vorsorgelösungen</h3>
                        <p className="mt-2 text-gray-600">
                          Wir bieten verschiedene Altersvorsorge-Produkte, die perfekt auf Ihre
                          Situation zugeschnitten sind.
                        </p>

                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                          {products.map((product, index) => (
                            <Card key={index} className="border-gray-200">
                              <CardHeader>
                                <CardTitle className="text-lg">{product.title}</CardTitle>
                                <CardDescription>{product.description}</CardDescription>
                              </CardHeader>
                              <CardContent className="text-sm text-gray-700">
                                {product.details}
                              </CardContent>
                            </Card>
                          ))}
                        </div>
                      </div>

                      <div>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Welches Produkt passt?</CardTitle>
                            <CardDescription>Abhängig von Ihrer Situation</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span><strong>Riester:</strong> Für Angestellte mit Kindern</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span><strong>Rürup:</strong> Für Selbstständige</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span><strong>bAV:</strong> Durch Arbeitgeber</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span><strong>Kapital:</strong> Sicherheit + Vermögen</span>
                            </div>
                          </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">
                        Warum die Altersvorsorge besonders wichtig ist
                      </p>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                      {benefits.map((benefit, index) => {
                        const Icon = benefit.icon;
                        return (
                          <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">
                              <Icon className="h-8 w-8 text-blue-700" />
                            </div>
                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
                            <p className="text-gray-600 text-sm">{benefit.description}</p>
                          </div>
                        );
                      })}
                    </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">
                        Schritt für Schritt zu Ihrer optimalen Altersvorsorge
                      </p>
                    </div>

                    <div className="grid md:grid-cols-4 gap-6">
                      {steps.map((step) => (
                        <div key={step.step} className="text-center">
                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
                            {step.step}
                          </div>
                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
                          <p className="text-gray-600 text-sm">{step.description}</p>
                        </div>
                      ))}
                    </div>
                  </TabsContent>

                  <TabsContent value="calculator" className="mt-0">
                    <div className="text-center">
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Altersvorsorge-Rechner</h3>
                      <p className="text-gray-600 mb-6">
                        Berechnen Sie Ihre voraussichtliche Rente und den Bedarf
                      </p>
                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
                        <Calculator className="mr-2 h-4 w-4" />
                        Rechner starten
                      </Button>
                    </div>
                  </TabsContent>

                  <TabsContent value="form" className="mt-0">
                    <div className="text-center">
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
                      <p className="text-gray-600 mb-6">
                        Lassen Sie sich unverbindlich zu Ihrer Altersvorsorge beraten
                      </p>
                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
                          <Phone className="h-5 w-5 mr-2" />
                          Jetzt anrufen
                        </Button>
                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
                          <Mail className="h-5 w-5 mr-2" />
                          Kontakt aufnehmen
                        </Button>
                      </div>
                    </div>
                  </TabsContent>
                </div>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default SeniorenAltersvorsorge;