import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, Truck, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, Home } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';

const Flottenversicherung = () => {
  const { t } = useTranslation('flottenversicherung');
  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({
    company: '',
    contactName: '',
    phone: '',
    email: '',
    fleetSize: '',
    vehicleTypes: '',
    usage: '',
    currentInsurer: '',
    message: ''
  });

  const benefits = [
    {
      icon: Shield,
      title: 'Komplettschutz',
      description: 'Umfassender Schutz für Ihre gesamte Fahrzeugflotte'
    },
    {
      icon: Users,
      title: 'Flottenmanagement',
      description: 'Zentrale Verwaltung aller Fahrzeuge'
    },
    {
      icon: FileText,
      title: 'Flexible Verträge',
      description: 'Anpassbare Deckungen für verschiedene Fahrzeugtypen'
    },
    {
      icon: Calculator,
      title: 'Günstige Konditionen',
      description: 'Spezielle Flottentarife mit Rabatten'
    }
  ];

  const services = [
    'Firmenwagen-Flottenversicherung',
    'Lieferwagen-Flottenversicherung',
    'Baustellenfahrzeuge Versicherung',
    'Transporter-Flottenversicherung',
    'Flotten-Haftpflichtversicherung',
    'Flotten-Kaskoversicherung'
  ];

  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();
    alert('Vielen Dank! Wir melden uns kurzfristig bei dir.');
  };

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
        {/* Hero Section */}
        <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', 'Flottenversicherung')}
            </h2>

            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <Tabs
                value={activeTab}
                onValueChange={(next) => {
                  setActiveTab(next);
                }}
                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-7 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"
                    >
                      <Home 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="statistics" 
                      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.statistics', 'Statistik')}
                    </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="claims" 
                      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.claims', 'Schaden')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value="catalog" 
                      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"
                    >
                      <Search className="w-4 h-4 mr-1.5" />
                      {t('tabs.catalog', 'Katalog')}
                    </TabsTrigger>
                  </TabsList>
                </div>

        {/* Content */}
                <div className="p-4 md:p-6">
                  <TabsContent value="overview" 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>{t('hero.badge', 'Für Unternehmen & Fuhrparks')}</span>
                        </div>
                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                          {t('hero.title', 'Flottenversicherung')}
                          <span className="block text-blue-700">{t('hero.subtitle', 'optimale Flottenlösungen für dein Unternehmen')}</span>
                        </h1>
                        <p className="mt-4 text-gray-600 text-lg">
                          {t(
                            'hero.description',
                            'Zentrale Policierung, flexible Deckungen und attraktive Konditionen – wir finden die passende Lösung für deine Fahrzeugflotte.'
                          )}
                        </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"
                          >
                            {t('hero.primaryCta', 'Angebot anfordern')}
                          </Button>
                          <Button
                            variant="outline"
                            onClick={() => navigate('/kontakt')}
                            className="border-gray-300"
                          >
                            {t('hero.secondaryCta', 'Beratung')}
                          </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">
                            <Truck className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Viele Fahrzeugtypen</div>
                              <div className="text-gray-600">PKW, Transporter, LKW</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">Zentrale Verwaltung</div>
                              <div className="text-gray-600">Fahrerkreis & Flotte</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('head_kfz_gewerblich.jpg')}
                            alt="Flottenversicherung"
                            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">
                              <Shield className="w-4 h-4" />
                              <span>{t('hero.imageHint', 'Haftpflicht + Kasko für Flotten')}</span>
                            </div>
                            <div className="mt-2 text-sm text-gray-600">
                              {t('hero.imageText', 'Individuell kalkuliert – passend zu Einsatz & Risiko.')}
                            </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" />
                              Skalierbar
                            </CardTitle>
                            <CardDescription>
                              Fahrzeuge hinzufügen/entfernen – ohne Chaos.
                            </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" />
                              Vergleich
                            </CardTitle>
                            <CardDescription>
                              Richtwert ermitteln und Angebot einholen.
                            </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" />
                              Schadenhilfe
                            </CardTitle>
                            <CardDescription>
                              Klare Schritte im Schadenfall.
                            </CardDescription>
                          </CardHeader>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="details" 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">Details & Vorteile</h3>
                        <p className="mt-2 text-gray-600">
                          Flottenversicherung bündelt mehrere Fahrzeuge in einer Lösung – für weniger
                          Verwaltungsaufwand und häufig bessere Konditionen. Besonders sinnvoll bei
                          regelmäßig wechselnden Fahrern und Fahrzeugen.
                        </p>

                        {/* Benefits Grid */}
                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                          {benefits.map((benefit, index) => {
                            const Icon = benefit.icon;
                            return (
                              <Card key={index} className="border-gray-200">
                                <CardHeader>
                                  <CardTitle className="text-base flex items-center gap-2">
                                    <Icon className="h-5 w-5 text-blue-700" />
                                    {benefit.title}
                                  </CardTitle>
                                  <CardDescription className="text-gray-600">{benefit.description}</CardDescription>
                                </CardHeader>
                              </Card>
                            );
                          })}
                        </div>

                        {/* Services */}
                        <div className="mt-8">
                          <h4 className="text-lg font-semibold text-gray-900 mb-3">Leistungen (Auszug)</h4>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            {services.map((service, index) => (
                              <div
                                key={index}
                                className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3"
                              >
                                <CheckCircle className="h-5 w-5 text-blue-700 mt-0.5 flex-shrink-0" />
                                <p className="text-gray-700">{service}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>

                      <div>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Für wen passt das?</CardTitle>
                            <CardDescription>
                              Ab wenigen Fahrzeugen sinnvoll – je nach Struktur.
                            </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>Handwerk / Bau / Service-Flotten</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span>Lieferdienste / Logistik</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span>Außendienst / Firmenwagen</span>
                            </div>
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="statistics" 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">Unfallstatistik</h3>
                        <p className="mt-2 text-gray-600">
                          In Flotten treten Schäden oft im Alltag auf: Rangieren, Parken, Lieferstopps.
                          Einheitliche Prozesse (Meldung, Dokumentation, Fahrerunterweisung) reduzieren
                          Ausfallzeiten und Kosten.
                        </p>

                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-base flex items-center gap-2">
                                <AlertTriangle className="w-5 h-5 text-blue-700" />
                                Typische Flottenschäden
                              </CardTitle>
                              <CardDescription>
                                Parkrempler, Rangierschäden, Glas, Auffahrunfälle.
                              </CardDescription>
                            </CardHeader>
                          </Card>
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-base flex items-center gap-2">
                                <Clock className="w-5 h-5 text-blue-700" />
                                Ausfallzeit minimieren
                              </CardTitle>
                              <CardDescription>
                                Schnelle Meldung + Werkstattnetz verkürzen Standzeiten.
                              </CardDescription>
                            </CardHeader>
                          </Card>
                        </div>
                      </div>

                      <div>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Tipp</CardTitle>
                            <CardDescription>
                              Einheitlicher Prozess im Unternehmen.
                            </CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm text-gray-700">
                            Definiere eine kurze Checkliste (Fotos, Daten, Meldung) und schule Fahrer.
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="calculator" className="mt-0">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                      <div>
                        <h3 className="text-2xl font-bold text-gray-900">Vergleichsrechner</h3>
                        <p className="mt-2 text-gray-600">
                          Für Flotten ist eine genaue Kalkulation individuell. Hier ein Richtwert,
                          danach erstellen wir dir ein Angebot.
                        </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 – abhängig von Einsatz & Schadenverlauf.
                            </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">Flottengröße</label>
                                <select
                                  name="fleetSize"
                                  value={formData.fleetSize}
                                  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="2-5">2-5 Fahrzeuge</option>
                                  <option value="6-15">6-15 Fahrzeuge</option>
                                  <option value="16-50">16-50 Fahrzeuge</option>
                                  <option value="50+">50+ Fahrzeuge</option>
                                </select>
                              </div>
                              <div>
                                <label className="text-sm font-medium text-gray-700">Nutzung</label>
                                <select
                                  name="usage"
                                  value={formData.usage}
                                  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="delivery">Lieferung / Kurier</option>
                                  <option value="service">Service / Handwerk</option>
                                  <option value="sales">Außendienst</option>
                                  <option value="mixed">Gemischt</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">
                                Flottenbeitrag ab <span className="font-bold">ca. 85 €</span>/Monat
                              </div>
                              <div className="text-xs text-blue-900/80 mt-2">
                                Stark abhängig von Fahrzeugmix, Region, Fahrern, Schadenquote.
                              </div>
                            </div>

                            <Button
                              onClick={() => setActiveTab('form')}
                              className="w-full bg-blue-700 hover:bg-blue-800"
                            >
                              Jetzt konkretes Angebot anfordern
                            </Button>
                          </CardContent>
                        </Card>
                      </div>

                      <div>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
                            <CardDescription>
                              Ein paar Eckdaten reichen für den Start.
                            </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>Fahrzeugliste (Typen, Kennzeichen optional)</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <Search className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span>Jährliche Fahrleistung / Einsatzgebiet</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span>Schadenverlauf / Vorversicherung</span>
                            </div>
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="form" 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">Anfrageformular</h3>
                        <p className="mt-2 text-gray-600">
                          {t('form.description', 'Sende uns ein paar Angaben – wir erstellen dir ein passendes Flottenangebot.')}
                        </p>

                        <Card className="mt-6 border-gray-200">
                          <CardContent className="p-6">
                            <form onSubmit={handleSubmit} 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">Unternehmen</label>
                                  <input
                                    name="company"
                                    value={formData.company}
                                    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">Ansprechpartner</label>
                                  <input
                                    name="contactName"
                                    value={formData.contactName}
                                    onChange={handleFormChange}
                                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                    required
                                  />
                                </div>
                              </div>

                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <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>
                                  <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>

                              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Flottengröße</label>
                                  <select
                                    name="fleetSize"
                                    value={formData.fleetSize}
                                    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="2-5">2-5</option>
                                    <option value="6-15">6-15</option>
                                    <option value="16-50">16-50</option>
                                    <option value="50+">50+</option>
                                  </select>
                                </div>
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Fahrzeugtypen</label>
                                  <input
                                    name="vehicleTypes"
                                    value={formData.vehicleTypes}
                                    onChange={handleFormChange}
                                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                    placeholder="z. B. PKW, Transporter"
                                  />
                                </div>
                                <div>
                                  <label className="text-sm font-medium text-gray-700">Nutzung</label>
                                  <select
                                    name="usage"
                                    value={formData.usage}
                                    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="delivery">Lieferung / Kurier</option>
                                    <option value="service">Service / Handwerk</option>
                                    <option value="sales">Außendienst</option>
                                    <option value="mixed">Gemischt</option>
                                  </select>
                                </div>
                              </div>

                              <div>
                                <label className="text-sm font-medium text-gray-700">Aktueller Versicherer (optional)</label>
                                <input
                                  name="currentInsurer"
                                  value={formData.currentInsurer}
                                  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">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="Wichtige Infos: Fahrzeugmix, Einsatzgebiet, gewünschte Deckungen"
                                />
                              </div>

                              <Button type="submit" className="bg-blue-700 hover:bg-blue-800">
                                Anfrage senden
                              </Button>
                            </form>
                          </CardContent>
                        </Card>
                      </div>

                      <div>
                        <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: 0171 / 9864053</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Mail className="w-4 h-4 text-blue-700" />
                              <span>E-Mail: info@finanzen-mizera.de</span>
                            </div>
                            <div className="pt-2">
                              <Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
                                Kontaktseite
                              </Button>
                            </div>
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="claims" 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">Schadenmeldung</h3>
                        <p className="mt-2 text-gray-600">
                          Im Flottenbetrieb ist Geschwindigkeit entscheidend: schnelle Meldung,
                          klare Dokumentation und ein zentraler Ansprechpartner.
                        </p>

                        <div className="mt-6 space-y-3">
                          <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
                            <AlertTriangle className="w-5 h-5 text-blue-700 mt-0.5" />
                            <div>
                              <div className="font-semibold text-gray-900">Sicherheit zuerst</div>
                              <div className="text-gray-600 text-sm">Unfallstelle sichern, ggf. 110/112.</div>
                            </div>
                          </div>
                          <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
                            <FileCheck className="w-5 h-5 text-blue-700 mt-0.5" />
                            <div>
                              <div className="font-semibold text-gray-900">Dokumentation</div>
                              <div className="text-gray-600 text-sm">Fotos, Daten, Fahrer, Fahrzeug, Zeugen.</div>
                            </div>
                          </div>
                          <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
                            <PhoneCall className="w-5 h-5 text-blue-700 mt-0.5" />
                            <div>
                              <div className="font-semibold text-gray-900">Melden</div>
                              <div className="text-gray-600 text-sm">So schnell wie möglich melden – wir steuern den Prozess.</div>
                            </div>
                          </div>
                        </div>

                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
                            Hilfe anfordern
                          </Button>
                          <Link to="/kontakt" className="inline-flex">
                            <Button variant="outline">Kontakt</Button>
                          </Link>
                        </div>
                      </div>

                      <div>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Notfall-Info</CardTitle>
                            <CardDescription>
                              In akuten Situationen immer 110 / 112 wählen.
                            </CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm text-gray-700 space-y-2">
                            <div className="flex items-start gap-2">
                              <PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span>Polizei: 110</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
                              <span>Rettung: 112</span>
                            </div>
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="catalog" 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">Bußgeldkatalog</h3>
                        <p className="mt-2 text-gray-600">
                          Informiere dich über Bußgelder & Punkte. Externe Quelle:
                        </p>

                        <div className="mt-4 flex flex-col sm:flex-row gap-3">
                          <a
                            href="https://www.derbussgeldkatalog.de/geschwindigkeit/?Ads-Kampagne-Bussgeldkatalog&gad_source=1&gad_campaignid=22848963551&gclid=CjwKCAiA09jKBhB9EiwAgB8l-EEMEsLQRd9_7VP8lxqXg8NBMFKwGCo1NDVYVwH2K0LQMfRmmDNAxRoCglsQAvD_BwE"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex"
                          >
                            <Button className="bg-blue-700 hover:bg-blue-800">
                              Zum Bußgeldkatalog
                            </Button>
                          </a>
                          <Button variant="outline" className="gap-2" onClick={() => window.print()}>
                            <Download className="w-4 h-4" />
                            Als PDF speichern
                          </Button>
                        </div>
                      </div>

                      <div>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Hinweis</CardTitle>
                            <CardDescription>
                              Werte können sich ändern – bitte immer die aktuelle Quelle prüfen.
                            </CardDescription>
                          </CardHeader>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

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

export default Flottenversicherung;