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 } 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 PrivateKrankenversicherung = () => {
  const { t } = useTranslation('privateKrankenversicherung');

  // Add SEO metadata for search
  React.useEffect(() => {
    document.title = 'Private Krankenversicherung - Agentur Mizera';
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Private Krankenversicherung: Umfassender Schutz für Ihre Gesundheit. Unabhängige Beratung und Tarifvergleich für private Krankenversicherungen.');
    }
  }, []);
  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: '',
    occupation: '',
    currentInsurance: '',
    message: ''
  });

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

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    navigate('/contact');
  };

  const benefits = [
    {
      icon: Shield,
      title: 'Umfassender Schutz',
      description: 'Optimale medizinische Versorgung',
    },
    {
      icon: Heart,
      title: 'Freie Arztwahl',
      description: 'Behandlung bei allen Fachärzten ohne Überweisung',
    },
    {
      icon: FileText,
      title: 'Keine Wartezeiten',
      description: 'Schnelle Termine bei Fachärzten und Kliniken',
    },
    {
      icon: Users,
      title: 'Premium Leistungen',
      description: 'Zimmer mit Komfort und Einbettbetten',
    },
    {
      icon: Clock,
      title: 'Komfort im Krankenhaus',
      description: 'Ein- oder Zweibettzimmer, Chefarztbehandlung',
    },
  ];

  const services = [
    'Ambulante Behandlungen',
    'Stationäre Aufenthalte',
    'Zahnbehandlungen',
    'Vorsorgeuntersuchungen',
    'Alternative Medizin',
    'Auslandsbehandlungen',
  ];

  
  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('head_kranken.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">
                    Private Krankenversicherung
                  </h1>
                  <p className="text-xl text-white/90 mb-8 max-w-2xl">
                    Gesundheit ist ein hohes, wenn nicht das höchste Gut!
                    <br />
                    Verwenden Sie die beste Absicherung für Ihre Gesundheit.
                  </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">
                      Jetzt beraten lassen
                    </Button>
                    <Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
                      Jetzt 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 {
            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">
              Private Krankenversicherung
            </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-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" />
                      {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="reform" 
                      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"
                    >
                      <AlertCircle className="w-4 h-4 mr-1.5" />
                      {t('tabs.reform', 'Reform')}
                    </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>

                <div className="p-4 md:p-6">
                  <TabsContent value="overview" className="mt-0">
                    <TwoColumnTab
                      className="gap-8 items-center"
                      left={
                        <>
                        <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>Vorteile einer privaten Krankenversicherung</span>
                        </div>
                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                          Private Krankenversicherung
                          <span className="block text-blue-700">für Ihre Gesundheit nur das Beste!</span>
                        </h1>
                        <p className="mt-4 text-gray-600 text-lg">
                          Bei über ca. vierzig Gesellschaften die eine private Krankenversicherung anbieten, fällt es schwer die Übersicht zu behalten. Es gibt verschiedene Tarife, mehrere Selbstbeteiligungen, Spezialtarife für bestimmte Berufsgruppen und andere Besonderheiten im Bereich der privaten Krankenversicherung. Doch mit Hilfe speziellen Software, behalten wir für Sie den Überblick im Tarif Dschungel der private Krankenversicherung.
                        </p>

                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
                            Angebot anfordern
                          </Button>
                          <Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
                            Leistungsumfang
                          </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">
                            <Shield className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Umfassender Schutz</div>
                              <div className="text-gray-600">Optimale medizinische Versorgung</div>
                            </div>
                          </div>
                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                            <Users className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Freie Arztwahl</div>
                              <div className="text-gray-600">Behandlung bei allen Fachärzten</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('head_kranken.jpg')}
                                alt="Private Krankenversicherung"
                                className="w-full h-[240px] 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">
                                  <Heart className="w-4 h-4" />
                                  <span>Professionelle Vorsorge und optimale Behandlung</span>
                                </div>
                                <div className="mt-2 text-sm text-gray-600">
                                  Tarifcheck – schnell, fair und passend zu Ihrem Bedarf.
                                </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" />
                              Umfassender Schutz
                            </CardTitle>
                            <CardDescription>Optimale medizinische Versorgung.</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" />
                              Tarifvergleich lohnt sich
                            </CardTitle>
                            <CardDescription>Beiträge & Leistungen variieren stark.</CardDescription>
                          </CardHeader>
                        </Card>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <PhoneCall className="w-4 h-4 text-blue-700" />
                              Persönliche Beratung
                            </CardTitle>
                            <CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
                          </CardHeader>
                        </Card>
                      </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 der privaten Krankenversicherung?</h3>

                      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="rounded-lg bg-white/10 p-4">
                          <Heart className="w-10 h-10 text-white/90" strokeWidth={1.25} />
                          <div className="mt-3 text-lg font-semibold">Eintrittsalter und Gesundheitszustand</div>
                          <div className="mt-1 text-sm text-white/85">
                            Aktuelle Gesundheit und bisherige Behandlungen beeinflussen die Prämie.
                          </div>
                        </div>

                        <div className="rounded-lg bg-white/10 p-4">
                          <Users className="w-10 h-10 text-white/90" strokeWidth={1.25} />
                          <div className="mt-3 text-lg font-semibold">Gewählte Tarifart und Leistungsumfang</div>
                          <div className="mt-1 text-sm text-white/85">
                            Umfassende Tarife mit 100% Erstattung kosten mehr als Basis-Tarife.
                          </div>
                        </div>

                        <div className="rounded-lg bg-white/10 p-4">
                          <Shield className="w-10 h-10 text-white/90" strokeWidth={1.25} />
                          <div className="mt-3 text-lg font-semibold">Selbstbeteiligung und Franchise</div>
                          <div className="mt-1 text-sm text-white/85">
                            Höhere Selbstbeteiligung senkt den monatlichen Beitrag.
                          </div>
                        </div>

                        <div className="rounded-lg bg-white/10 p-4">
                          <Calculator className="w-10 h-10 text-white/90" strokeWidth={1.25} />
                          <div className="mt-3 text-lg font-semibold">Berufsgruppe und Familienstand</div>
                          <div className="mt-1 text-sm text-white/85">
                            Berufsgruppe und Familienstand beeinflussen die Prämie.
                          </div>
                        </div>
                      </div>

                      <div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
                        Beispiel: Beiträge liegen in Deutschland meist zwischen 450 und 800 € monatlich.
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="details" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                        <h3 className="text-2xl font-bold text-gray-900">Vorteile einer privaten Krankenversicherung</h3>
                        <p className="mt-2 text-gray-600">
                          Bei über ca. vierzig Gesellschaften die eine private Krankenversicherung anbieten, fällt es schwer die Übersicht zu behalten. Es gibt verschiedene Tarife, mehrere Selbstbeteiligungen, Spezialtarife für bestimmte Berufsgruppen und andere Besonderheiten im Bereich der privaten Krankenversicherung. Doch mit Hilfe speziellen Software, behalten wir für Sie den Überblick im Tarif Dschungel der private Krankenversicherung.
                        </p>

                        <div className="mt-6">
                          <h4 className="text-lg font-semibold text-gray-900 mb-3">Vorteile:</h4>
                          <div className="space-y-2 text-sm text-gray-700">
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Beitragsgestaltung individuell je nach Tarif</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Freie Tarifwahl, Individuelle Leistungspakete</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Individuelle Zusammenstellung</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Freie Privatärzte, Arzt- und Krankenhauswahl</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Facharztbesuch ohne Überweisung</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>100% Zahnbehandlung</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>optimale Behandlung, keine Arzneimittelzuzahlung *</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Erstattung von Sehhilfen</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Alternative Behandlungen</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Gezielte Vorsorgeuntersuchungen</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Stationäre Behandlung im Einbettzimmer / Chefarzt *</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Kostenübernahme Heilpraktiker *</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Hohe Kostenerstattung Zahnersatz *</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Beitragsrückerstattung *</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Weltweiter Krankenschutz *</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>Unbeschwerter Urlaub mit dem Reisekrankenschutz</span>
                            </div>
                          </div>
                          <div className="mt-3 text-xs text-gray-500">
                            * je nach Tarif und individuelle Zusammenstellung des Versicherungsschutzes
                          </div>
                        </div>

                        <div className="mt-6">
                          <h4 className="text-lg font-semibold text-gray-900 mb-3">Nachteile:</h4>
                          <div className="space-y-2 text-sm text-gray-700">
                            <div className="flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                              <span>Risikozuschläge oder Ausschlüsse von Leistungen bei Vorerkrankungen möglich</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                              <span>Beitragspflicht auch bei längerer Krankheit über 6 Wochen</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                              <span>Wechsel der Krankenversicherung nur eingeschränkt möglich</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                              <span>Keine Beitragsfreiheit während Mutterschafts- und Erziehungsurlaub</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                              <span>Summenbegrenzung bei Zahnersatz in den ersten Jahren möglich</span>
                            </div>
                          </div>
                        </div>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('head_kranken.jpg')} alt="Details & Vorteile">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Tipp</CardTitle>
                              <CardDescription>Leistungsumfang & Tarifdetails prüfen.</CardDescription>
                            </CardHeader>
                            <CardContent className="text-sm text-gray-700">
                              Achte auf umfassenden Leistungsumfang und Tarifdetails.
                            </CardContent>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="reform" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                        <div className="inline-flex items-center gap-2 rounded-full bg-orange-50 border border-orange-200 px-3 py-1 text-sm text-orange-800 mb-4">
                          <AlertCircle className="w-4 h-4" />
                          <span>EINE AKTUELLE</span>
                        </div>
                        <h3 className="text-2xl font-bold text-gray-900">Gesundheitsreform - Versicherungspflicht seit 16. Juni 2008</h3>
                        
                        <div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
                          <p className="text-sm text-blue-800 font-medium mb-2">
                            Information - Bundesministerium für Gesundheit - Versicherungspflicht
                          </p>
                        </div>

                        <div className="mt-6 space-y-6">
                          <div>
                            <p className="text-gray-700 leading-relaxed">
                              "Wie wichtig eine Absicherung für den Krankheitsfall ist, merkt man spätestens, wenn man krank wird und keine hat. Zwar waren auch bisher die meisten Einwohner in Deutschland über eine Krankenversicherung abgesichert, aber die Zahl derer, die ohne jegliche Absicherung im Krankheitsfall waren, war immer noch zu groß. Ihnen konnte es bisher jederzeit so gehen, dass sie bei Krankheit nicht wussten, wie sie die notwendigen Behandlungskosten bezahlen sollten. Dies soll in Zukunft niemandem mehr passieren.
                            </p>
                          </div>

                          <div>
                            <p className="text-gray-700 leading-relaxed">
                              Alle Einwohnerinnen und Einwohner, die keinen Anspruch auf anderweitige Absicherung im Krankheitsfall haben, erhalten wieder Zugang zu einer Krankenversicherung. Ob gesetzlich oder privat, hängt davon ab, wie man vorher versichert war. Wer bisher weder gesetzlich noch privat versichert war, wird in dem System versichert, dem er oder sie aufgrund der zuletzt ausgeübten Tätigkeit zuzuordnen ist. Wer zum Beispiel selbstständig ist, hat Zugang zur privaten Krankenversicherung.
                            </p>
                          </div>

                          <div>
                            <p className="text-gray-700 leading-relaxed">
                              Die Erweiterung der bisherigen Versicherungspflicht auf Personen ohne anderweitige Absicherung im Krankheitsfall bedeutet, dass im Grundsatz nunmehr jede und jeder dazu beiträgt, das persönliche Krankheitsrisiko finanziell abzusichern. Sie verhindert auch, dass Menschen bewusst auf die Absicherung verzichten, weil sie wissen, dass letztlich die Allgemeinheit die Kosten einer medizinischen Behandlung tragen muss, wenn die eigenen Mittel nicht ausreichen. Zugleich kann allen, die versichert sind, künftig auch der Versicherungsschutz nicht mehr vollständig entzogen werden zum Beispiel wegen Beitragsrückstand.
                            </p>
                          </div>

                          <div>
                            <p className="text-gray-700 leading-relaxed">
                              Auf der anderen Seite gilt: Wer zu spät, zum Beispiel erst, wenn er krank ist, dieser neuen Versicherungspflicht nachkommt, muss nicht bezahlte Beiträge nachzahlen. Denn seit dem 1. April 2007 ist diese neue Versicherungspflicht in der GKV entstanden, die damit verbundene Beitragspflicht beginnt mit dem Zeitpunkt, in dem kein anderweitiger Anspruch auf Absicherung im Krankheitsfall vorliegt. In der privaten Krankenversicherung beginnt die entsprechende Pflicht zum Abschluss einer Krankenversicherung ab dem 1. Januar 2009. Im Ergebnis besteht danach praktisch für alle Bürgerinnen und Bürger eine lückenlose Krankenversicherungspflicht. Sie sind soweit dies nicht schon bereits der Fall war - damit zugleich auch pflegeversichert."
                            </p>
                          </div>

                          <Card className="border-orange-200 bg-orange-50">
                            <CardHeader>
                              <CardTitle className="text-lg flex items-center gap-2 text-orange-800">
                                <AlertCircle className="w-5 h-5 text-orange-600" />
                                Wer muss sich versichern?
                              </CardTitle>
                            </CardHeader>
                            <CardContent>
                              <p className="text-gray-700 leading-relaxed text-sm">
                                Bundesministerium für Gesundheit - "Mit der Einführung der Versicherungspflicht seit dem 1. Januar 2009 muss sich jede/r versichern. Wer dies nicht tut, muss bei verspätetem Vertragsabschluss Prämienzuschläge zahlen: Für Februar bis Mai dieses Jahres jeweils den vollen Monatsbeitrag, also maximal rund 570 Euro pro Monat, ab Juni 2009 für jeden weiteren Monat ein Sechstel des entsprechenden Beitrags. Sie sollten also auf jeden Fall einen Vertrag abschließen, falls Sie dies nicht schon getan haben."
                              </p>
                            </CardContent>
                          </Card>
                        </div>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('head_kranken.jpg')} alt="Gesundheitsreform">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Unsere Empfehlung</CardTitle>
                              <CardDescription>Professionelle Beratung in Zeiten der Reform</CardDescription>
                            </CardHeader>
                            <CardContent className="text-sm text-gray-700">
                              In Zeiten der Gesundheitsreform ist eine professionelle Beratung besonders wichtig. Wir helfen Ihnen, die richtigen Entscheidungen für Ihre Absicherung zu treffen.
                            </CardContent>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="calculator" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                        <h3 className="text-2xl font-bold text-gray-900">Beitragssatz-Rechner</h3>
                        <p className="mt-2 text-gray-600">
                          Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
                          wir u. a. Alter, Gesundheitszustand und Berufsgruppe.
                        </p>

                        <Card className="mt-6 border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg flex items-center gap-2">
                              <Calculator className="w-5 h-5 text-blue-700" />
                              Grobe Beitragsschätzung
                            </CardTitle>
                            <CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                              <div>
                                <label className="text-sm font-medium text-gray-700">Fahrzeugtyp</label>
                                <select
                                  name="age"
                                  value={formData.age}
                                  onChange={handleFormChange}
                                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                />
                              </div>
                              <div>
                                <label className="text-sm font-medium text-gray-700">Berufsgruppe</label>
                                <select
                                  name="occupation"
                                  value={formData.occupation}
                                  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>Angestellter</option>
                                  <option>Selbstständig</option>
                                  <option>Beamter</option>
                                  <option>Freiberufler</option>
                                </select>
                              </div>
                            </div>

                            <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
                              <div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
                              <div className="mt-1 text-sm text-blue-900">
                                Krankenversicherung ab <span className='font-bold'>ca. 450-650 €</span>/Monat
                              </div>
                              <div className="text-xs text-blue-900/80 mt-2">
                                Abhängig von Alter, Gesundheitszustand, Berufsgruppe, Tarif.
                              </div>
                            </div>

                            <Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
                              Jetzt konkretes Angebot anfordern
                            </Button>
                          </CardContent>
                        </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('head_kranken.jpg')} alt="Beitragssatz-Rechner">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Für wen eignet sich die PKV?</CardTitle>
                              <CardDescription>Je genauer, desto besser.</CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-3 text-sm text-gray-700">
                              <div className="flex items-start gap-2">
                                <FileText className="w-4 h-4 text-blue-700 mt-0.5" />
                                <span>Selbstständige über 66.600 € Jahresgehalt</span>
                              </div>
                              <div className="flex items-start gap-2">
                                <Search className="w-4 h-4 text-blue-700 mt-0.5" />
                                <span>Beamte mit Beihilfeanspruch</span>
                              </div>
                              <div className="flex items-start gap-2">
                                <AlertCircle className="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0" />
                                <span>Höhere Beiträge: Kosten steigen mit dem Alter</span>
                              </div>
                            </CardContent>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="form" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                        <h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
                        <p className="mt-2 text-gray-600">
                          Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
                        </p>

                        <Card className="mt-6 border-gray-200">
                          <CardContent className="p-6">
                            <form onSubmit={handleFormSubmit} className="space-y-4">
                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Name</label>
                                  <input
                                    name="name"
                                    value={formData.name}
                                    onChange={handleFormChange}
                                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                    required
                                  />
                                </div>
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Telefon</label>
                                  <input
                                    name="phone"
                                    value={formData.phone}
                                    onChange={handleFormChange}
                                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                  />
                                </div>
                              </div>

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

                              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Alter</label>
                                  <input
                                    name="age"
                                    value={formData.age}
                                    onChange={handleFormChange}
                                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                    placeholder="z. B. 35"
                                  />
                                </div>
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Berufsgruppe</label>
                                  <select
                                    name="occupation"
                                    value={formData.occupation}
                                    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>Angestellter</option>
                                    <option>Selbstständig</option>
                                    <option>Beamter</option>
                                    <option>Freiberufler</option>
                                  </select>
                                </div>
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Aktuelle Versicherung</label>
                                  <select
                                    name="currentInsurance"
                                    value={formData.currentInsurance}
                                    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="gkv">Gesetzlich (GKV)</option>
                                    <option value="pkv">Privat (PKV)</option>
                                    <option value="keine">Keine Versicherung</option>
                                  </select>
                                </div>
                              </div>

                              <div>
                                <label className="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="Welche Leistungen sind dir wichtig?"
                                />
                              </div>

                              <Button type="submit" className="w-full bg-blue-700 hover:bg-blue-800">
                                Anfrage senden
                              </Button>
                            </form>
                          </CardContent>
                        </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('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('/kontakt')}>
                                  Kontaktseite
                                </Button>
                              </div>
                            </CardContent>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  
                  <TabsContent value="brochure" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Kundenbroschüre (PDF)</h3>
                          <p className="mt-2 text-gray-600">Broschüre als PDF zum Download.</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Private Krankenversicherung (PDF)</CardTitle>
                              <CardDescription>Informationsbroschüre zur privaten Krankenversicherung</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <a href={`${baseUrl}/PDF/PKV-Ratgeber.pdf`} download target='_blank'>
                                <Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
                              </a>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('head_kranken.jpg')} alt="Informationsmaterial">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Hinweis</CardTitle>
                              <CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <GeneralNotice />

                </div>
                </Tabs>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default PrivateKrankenversicherung;