import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart, UserCheck } from 'lucide-react';
import Layout from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
import RightImageCard from '@/components/tab-pages/RightImageCard';

const Risikolebensversicherung = () => {
  const { t } = useTranslation('risikolebensversicherung');

  // Add SEO metadata for search
  React.useEffect(() => {
    document.title = t('title', 'Risikolebensversicherung') + ' - Agentur Mizera';
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', t('title', 'Risikolebensversicherung') + ': ' + t('subtitle', 'Optimaler Schutz für Ihre Familie im Todesfall') + '. Unabhängige Beratung und Tarifvergleich für Risikolebensversicherungen.');
    }
  }, []);
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [activeTab, setActiveTab] = useState('overview');
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    age: '',
    coverageAmount: '',
    duration: '',
    healthStatus: '',
    message: ''
  });

  const handleFormChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Anfrage Risikolebensversicherung - ${formData.name}`);
    const body = encodeURIComponent(
      `Name: ${formData.name}\nTelefon: ${formData.phone}\nE-Mail: ${formData.email}\nAlter: ${formData.age}\nVersicherungssumme: ${formData.coverageAmount}€\nLaufzeit: ${formData.duration} Jahre\nGesundheitszustand: ${formData.healthStatus}\n\nNachricht:\n${formData.message}`
    );
    window.location.href = `mailto:info@finanzen-mizera.de?subject=${subject}&body=${body}`;
  };

  const benefits = [
    {
      icon: Users,
      title: t('benefits.family.title', 'Familienschutz'),
      description: t('benefits.family.description', 'Sichert Ihre Familie finanziell ab')
    },
    {
      icon: Shield,
      title: t('benefits.death.title', 'Todesfallschutz'),
      description: t('benefits.death.description', 'Zahlung bei Tod der versicherten Person')
    },
    {
      icon: Calculator,
      title: t('benefits.cheap.title', 'Günstige Beiträge'),
      description: t('benefits.cheap.description', 'Reiner Risikoschutz ohne Sparanteil')
    },
    {
      icon: FileCheck,
      title: t('benefits.easy.title', 'Einfacher Abschluss'),
      description: t('benefits.easy.description', 'Schnelle und unkomplizierte Beantragung')
    }
  ];

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
        {/* Hero Section */}
        <div className="relative">
          <div 
            className="h-96 bg-cover bg-center relative"
            style={{ backgroundImage: `url(${assetUrl('iStock-975006448.jpg')})` }}
          >
            <div className="absolute inset-0 bg-gray-900/20" />
            <div className="relative container mx-auto px-4 h-full flex items-center">
              <div className="max-w-3xl">
                <div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
                  <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
                    {t('title', 'Risikolebensversicherung')}
                  </h1>
                  <p className="text-xl text-white/90 mb-8 max-w-2xl">
                    {t('subtitle', 'Optimaler Schutz für Ihre Familie im Todesfall')}
                  </p>
                  <div className="flex flex-col sm:flex-row gap-4">
                    <Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
                      {t('buttons.consultation', 'Jetzt beraten lassen')}
                    </Button>
                    <Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
                      {t('buttons.calculator', 'Beitrag berechnen')}
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Content */}
        <style>{`
          [data-state="active"] {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
          }
          button:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
          }
        `}</style>
        <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">
              {t('title', 'Risikolebensversicherung')}
            </h2>

            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <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-5 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" />
                      {t('tabs.overview', 'Übersicht')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value="details" 
                      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" />
                      {t('tabs.details', 'Details')}
                    </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" />
                      {t('tabs.calculator', 'Rechner')}
                    </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"
                    >
                      <Phone className="w-4 h-4 mr-1.5" />
                      {t('tabs.form', 'Anfrage')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value="brochure" 
                      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"
                    >
                      <Download className="w-4 h-4 mr-1.5" />
                      {t('tabs.brochure', 'PDF')}
                    </TabsTrigger>
                  </TabsList>
                </div>

                <TabsContent value="overview" className="mt-0">
                  <TwoColumnTab
                    left={
                      <>
                        <div className="flex items-center gap-2 mb-6">
                          <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                            <Shield className="w-4 h-4 text-blue-700" />
                          </div>
                          <span className="text-lg font-semibold text-gray-900">{t('overview.subtitle', 'Ihre Familie optimal absichern')}</span>
                        </div>
                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                          {t('title', 'Risikolebensversicherung')}
                          <span className="block text-blue-700">{t('overview.tagline', 'Finanzielle Sicherheit für Ihre Liebsten')}</span>
                        </h1>
                        <p className="mt-4 text-gray-600 text-lg">
                          {t('overview.description', 'Eine Risikolebensversicherung bietet reinen Todesfallschutz zu günstigen Beiträgen. Im Todesfall der versicherten Person wird die vereinbarte Versicherungssumme an die Hinterbliebenen ausgezahlt.')}
                        </p>

                        <div className="mt-8 space-y-4">
                          <div className="flex items-start gap-3">
                            <CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                            <div>
                              <h3 className="font-semibold text-gray-900">{t('overview.benefit1.title', 'Reiner Risikoschutz')}</h3>
                              <p className="text-gray-600">{t('overview.benefit1.description', 'Kein Sparanteil - nur Schutz für den Todesfall')}</p>
                            </div>
                          </div>
                          <div className="flex items-start gap-3">
                            <CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                            <div>
                              <h3 className="font-semibold text-gray-900">{t('overview.benefit2.title', 'Günstige Beiträge')}</h3>
                              <p className="text-gray-600">{t('overview.benefit2.description', 'Deutlich günstiger als kapitalbildende Lebensversicherung')}</p>
                            </div>
                          </div>
                          <div className="flex items-start gap-3">
                            <CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                            <div>
                              <h3 className="font-semibold text-gray-900">{t('overview.benefit3.title', 'Flexible Laufzeiten')}</h3>
                              <p className="text-gray-600">{t('overview.benefit3.description', 'Anpassbar an Ihre individuelle Situation')}</p>
                            </div>
                          </div>
                        </div>
                      </>
                    }
                    right={
                      <RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Risikolebensversicherung">
                        <div className="space-y-4">
                          <h3 className="text-lg font-semibold text-gray-900">{t('overview.features.title', 'Leistungen im Überblick')}</h3>
                          <div className="space-y-3">
                            <div className="flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-green-600" />
                              <span className="text-sm">{t('overview.features.item1', 'Todesfallleistung')}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-green-600" />
                              <span className="text-sm">{t('overview.features.item2', 'Kreditabsicherung möglich')}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-green-600" />
                              <span className="text-sm">{t('overview.features.item3', 'Steuerfrei (§20 EStG)')}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-green-600" />
                              <span className="text-sm">{t('overview.features.item4', 'Unabhängige Tarifauswahl')}</span>
                            </div>
                          </div>
                        </div>
                      </RightImageCard>
                    }
                  />
                </TabsContent>

                <TabsContent value="details" className="mt-0">
                  <TwoColumnTab
                    left={
                      <>
                        <h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details zur Risikolebensversicherung')}</h3>
                        
                        <div className="mt-6 space-y-6">
                          <div>
                            <h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.what.title', 'Was ist eine Risikolebensversicherung?')}</h4>
                            <p className="text-gray-600">
                              {t('details.what.description', 'Eine Risikolebensversicherung ist eine reine Risikoversicherung, die nur im Todesfall der versicherten Person leistet. Im Gegensatz zur kapitalbildenden Lebensversicherung enthält sie keinen Sparanteil und ist daher deutlich günstiger.')}
                            </p>
                          </div>

                          <div>
                            <h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.features.title', 'Wichtigste Merkmale')}</h4>
                            <ul className="space-y-2 text-gray-600">
                              <li>• {t('details.features.item1', 'Reiner Todesfallschutz ohne Kapitalbildung')}</li>
                              <li>• {t('details.features.item2', 'Günstige monatliche Beiträge')}</li>
                              <li>• {t('details.features.item3', 'Flexible Versicherungssummen (typisch 100.000€ - 1.000.000€)')}</li>
                              <li>• {t('details.features.item4', 'Laufzeiten meist 10, 15, 20 oder 30 Jahre')}</li>
                              <li>• {t('details.features.item5', 'Steuerfreie Auszahlung an Hinterbliebene')}</li>
                            </ul>
                          </div>

                          <div>
                            <h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.suitable.title', 'Für wen geeignet?')}</h4>
                            <ul className="space-y-2 text-gray-600">
                              <li>• {t('details.suitable.item1', 'Familien mit Kindern zur Absicherung des Einkommensverlusts')}</li>
                              <li>• {t('details.suitable.item2', 'Hausbesitzer zur Absicherung von Immobiliendarlehen')}</li>
                              <li>• {t('details.suitable.item3', 'Selbstständige zur Absicherung von Geschäftspartnern')}</li>
                              <li>• {t('details.suitable.item4', 'Alle, die Hinterbliebene finanziell absichern möchten')}</li>
                            </ul>
                          </div>
                        </div>
                      </>
                    }
                    right={
                      <RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Details">
                        <div className="space-y-4">
                          <h3 className="text-lg font-semibold text-gray-900">Beispielrechnung</h3>
                          <div className="bg-blue-50 rounded-lg p-4">
                            <div className="text-sm text-blue-900 font-semibold mb-2">Beispiel: 40-jähriger Mann, Nichtraucher</div>
                            <div className="space-y-2 text-sm text-blue-900">
                              <div>• Versicherungssumme: 250.000€</div>
                              <div>• Laufzeit: 20 Jahre</div>
                              <div>• Monatlicher Beitrag: ca. 15-25€</div>
                            </div>
                          </div>
                          
                          <div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
                            <h3 className="text-2xl font-bold">Was beeinflusst die Kosten?</h3>
                            
                            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                              <div className="rounded-lg bg-white/10 p-4">
                                <h4 className="font-semibold mb-2">Risikofaktoren</h4>
                                <ul className="text-sm space-y-1">
                                  <li>• Alter bei Vertragsbeginn</li>
                                  <li>• Gesundheitszustand</li>
                                  <li>• Raucherstatus</li>
                                  <li>• Berufliche Risiken</li>
                                </ul>
                              </div>
                              <div className="rounded-lg bg-white/10 p-4">
                                <h4 className="font-semibold mb-2">Vertragsdetails</h4>
                                <ul className="text-sm space-y-1">
                                  <li>• Versicherungssumme</li>
                                  <li>• Laufzeit</li>
                                  <li>• Einschließungen</li>
                                  <li>• Zahlweise (monatlich/jährlich)</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </RightImageCard>
                    }
                  />
                </TabsContent>

                <TabsContent value="calculator" className="mt-0">
                  <TwoColumnTab
                    left={
                      <>
                        <h3 className="text-2xl font-bold text-gray-900">Beitragsrechner</h3>
                        <p className="mt-2 text-gray-600">
                          Berechnen Sie grob den monatlichen Beitrag für Ihre Risikolebensversicherung.
                        </p>

                        <div className="mt-6 space-y-4">
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Alter</label>
                            <input
                              type="number"
                              placeholder="z.B. 35"
                              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                            />
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Versicherungssumme (€)</label>
                            <input
                              type="number"
                              placeholder="z.B. 250000"
                              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                            />
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Laufzeit (Jahre)</label>
                            <select className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
                              <option value="">Bitte wählen</option>
                              <option value="10">10 Jahre</option>
                              <option value="15">15 Jahre</option>
                              <option value="20">20 Jahre</option>
                              <option value="30">30 Jahre</option>
                            </select>
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Raucherstatus</label>
                            <select className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
                              <option value="">Bitte wählen</option>
                              <option value="nein">Nichtraucher</option>
                              <option value="ja">Raucher</option>
                            </select>
                          </div>
                          
                          <Button className="w-full bg-blue-700 hover:bg-blue-800">
                            Beitrag berechnen
                          </Button>
                        </div>

                        <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
                          <div className="text-sm text-blue-900 font-semibold">Unverbindliche Schätzung</div>
                          <div className="mt-1 text-sm text-blue-900">
                            Monatlicher Beitrag: <span className="font-bold">ca. 15-25 €</span>
                          </div>
                          <div className="text-xs text-blue-900/80 mt-2">
                            Dies ist eine grobe Schätzung. Der genaue Beitrag hängt von vielen Faktoren ab und wird vom Versicherer individuell berechnet.
                          </div>
                        </div>
                      </>
                    }
                    right={
                      <RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Rechner">
                        <div className="space-y-4">
                          <h3 className="text-lg font-semibold text-gray-900">Beispielrechnungen</h3>
                          
                          <div className="space-y-3">
                            <div className="border rounded-lg p-3">
                              <div className="text-sm font-semibold text-gray-900">Beispiel 1: Junge Familie</div>
                              <div className="text-xs text-gray-600 mt-1">
                                35 Jahre, Nichtraucher, 250.000€, 20 Jahre<br/>
                                <strong>Monatlich ca. 15-20 €</strong>
                              </div>
                            </div>
                            
                            <div className="border rounded-lg p-3">
                              <div className="text-sm font-semibold text-gray-900">Beispiel 2: Immobilienfinanzierung</div>
                              <div className="text-xs text-gray-600 mt-1">
                                40 Jahre, Nichtraucher, 200.000€, 15 Jahre<br/>
                                <strong>Monatlich ca. 20-30 €</strong>
                              </div>
                            </div>
                            
                            <div className="border rounded-lg p-3">
                              <div className="text-sm font-semibold text-gray-900">Beispiel 3: Ältere Person</div>
                              <div className="text-xs text-gray-600 mt-1">
                                50 Jahre, Raucher, 100.000€, 10 Jahre<br/>
                                <strong>Monatlich ca. 40-60 €</strong>
                              </div>
                            </div>
                          </div>
                          
                          <div className="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
                            <div className="text-xs text-yellow-900">
                              <strong>Hinweis:</strong> Dies sind nur Beispiele. Der tatsächliche Beitrag wird individuell berechnet.
                            </div>
                          </div>
                        </div>
                      </RightImageCard>
                    }
                  />
                </TabsContent>

                <TabsContent value="form" className="mt-0">
                  <TwoColumnTab
                    left={
                      <>
                        <h3 className="text-2xl font-bold text-gray-900">Beratungsanfrage</h3>
                        <p className="mt-2 text-gray-600">
                          Füllen Sie das Formular aus und wir erstellen Ihnen ein unverbindliches Angebot.
                        </p>

                        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
                          <div>
                            <label className="block text-sm font-medium text-gray-700">Name*</label>
                            <input
                              type="text"
                              name="name"
                              value={formData.name}
                              onChange={handleFormChange}
                              required
                              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                              placeholder="Ihr vollständiger Name"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">Telefon*</label>
                            <input
                              type="tel"
                              name="phone"
                              value={formData.phone}
                              onChange={handleFormChange}
                              required
                              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                              placeholder="Ihre Telefonnummer"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">E-Mail*</label>
                            <input
                              type="email"
                              name="email"
                              value={formData.email}
                              onChange={handleFormChange}
                              required
                              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                              placeholder="Ihre E-Mail-Adresse"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">Alter*</label>
                            <input
                              type="number"
                              name="age"
                              value={formData.age}
                              onChange={handleFormChange}
                              required
                              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                              placeholder="Ihr Alter in Jahren"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">Versicherungssumme (€)</label>
                            <input
                              type="number"
                              name="coverageAmount"
                              value={formData.coverageAmount}
                              onChange={handleFormChange}
                              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                              placeholder="z.B. 250000"
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">Laufzeit (Jahre)</label>
                            <select
                              name="duration"
                              value={formData.duration}
                              onChange={handleFormChange}
                              className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                            >
                              <option value="">Bitte wählen</option>
                              <option value="10">10 Jahre</option>
                              <option value="15">15 Jahre</option>
                              <option value="20">20 Jahre</option>
                              <option value="30">30 Jahre</option>
                            </select>
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">Gesundheitszustand</label>
                            <select
                              name="healthStatus"
                              value={formData.healthStatus}
                              onChange={handleFormChange}
                              className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                            >
                              <option value="">Bitte wählen</option>
                              <option value="gesund">Gesund</option>
                              <option value="kleine-beschwerden">Kleine Beschwerden</option>
                              <option value="chronisch">Chronische Erkrankungen</option>
                              <option value="unbekannt">Möchte ich nicht angeben</option>
                            </select>
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700">Nachricht</label>
                            <textarea
                              name="message"
                              value={formData.message}
                              onChange={handleFormChange}
                              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
                              placeholder="Zusätzliche Informationen oder Fragen..."
                            />
                          </div>

                          <Button type="submit" className="bg-blue-700 hover:bg-blue-800">
                            Anfrage senden
                          </Button>
                        </form>
                      </>
                    }
                    right={
                      <RightImageCard src="/head_kontakt_agentur_mizera.jpg" alt="Anfrageformular">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Direktkontakt</CardTitle>
                            <CardDescription>Wenn es schnell gehen soll.</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-center gap-2">
                              <Phone className="w-4 h-4 text-blue-700" />
                              <span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Mail className="w-4 h-4 text-blue-700" />
                              <span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
                            </div>
                            <div className="pt-2">
                              <Button variant="outline" className="w-full" onClick={() => navigate('/contact')}>
                                Kontaktseite
                              </Button>
                            </div>
                          </CardContent>
                        </Card>
                      </RightImageCard>
                    }
                  />
                </TabsContent>

                <TabsContent value="brochure" className="mt-0">
                  <TwoColumnTab
                    left={
                      <>
                        <h3 className="text-2xl font-bold text-gray-900">Informationsmaterial</h3>
                        <p className="mt-2 text-gray-600">
                          Laden Sie unsere Informationsbroschüre zur Risikolebensversicherung herunter.
                        </p>

                        <Card className="mt-6 border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Risikolebensversicherung (PDF)</CardTitle>
                            <CardDescription>Informationsbroschüre zur Risikolebensversicherung</CardDescription>
                          </CardHeader>
                          <CardContent>
                            <a href="/PDF/PR_DEGTP_PP_2DE.pdf" download>
                              <Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
                            </a>
                          </CardContent>
                        </Card>
                      </>
                    }
                    right={
                      <RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Informationsmaterial">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Hinweis</CardTitle>
                            <CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-center gap-2">
                              <Phone className="w-4 h-4 text-blue-700" />
                              <span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a></span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Mail className="w-4 h-4 text-blue-700" />
                              <span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
                            </div>
                          </CardContent>
                        </Card>
                      </RightImageCard>
                    }
                  />
                </TabsContent>
              </Tabs>
            </div>

            {/* Benefits Section */}
            <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {benefits.map((benefit, index) => {
                const Icon = benefit.icon;
                return (
                  <Card key={index} className="text-center">
                    <CardContent className="p-6">
                      <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <Icon className="w-6 h-6 text-blue-700" />
                      </div>
                      <h3 className="font-semibold text-gray-900 mb-2">{benefit.title}</h3>
                      <p className="text-sm text-gray-600">{benefit.description}</p>
                    </CardContent>
                  </Card>
                );
              })}
            </div>

            {/* General Notice */}
            <GeneralNotice />
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Risikolebensversicherung;